Team page redesign updated (#1786)

components/arcade/prizes.js

@@ -62,21 +62,21 @@ const Prizes = ({
           position: 'relative',
           transform: `rotate(${pRotate}deg)`,
           transitionDuration: '0.5s',
-          opacity: stock == 0 ? '0.5' : 1,
+          opacity: stock === 0 ? '0.5' : 1,
           '&:hover': {
-            transform: stock == 0 ? null : 'scale(1.1)',
+            transform: stock === 0 ? null : 'scale(1.1)',
-            cursor: stock == 0 ? 'default' : 'pointer'
+            cursor: stock === 0 ? 'default' : 'pointer'
           }
         }}
         onClick={e => {
           const div = e.currentTarget
           const quantity = div.querySelector('[id*="dropdown-"]')
           const buy = div.querySelector('#buy')
-          if (quantity === e.target || buy == e.target) {
+          if (quantity === e.target || buy === e.target) {
             console.log('TRUE')
             return
           } else {
-            stock != 0
+            stock !== 0
               ? document.getElementById(`${parsedFullName}-info`).showModal()
               : null
           }
@@ -98,7 +98,7 @@ const Prizes = ({
               alt={text}
             />
           </Flex>
-          {stock <= 100 && stock != null && (
+          {stock <= 100 && stock !== null && (
             <Text
               sx={{
                 background: '#CC6CE7',
@@ -113,7 +113,7 @@ const Prizes = ({
               variant="headline"
               className="gaegu"
             >
-              {stock == 0 ? <>Sold out</> : <>Only {stock} left! </>}
+              {stock === 0 ? <>Sold out</> : <>Only {stock} left! </>}
             </Text>
           )}
           <Text
@@ -161,7 +161,7 @@ const Prizes = ({
                 (
                   hoursBalance
                     ? hoursBalance / cost >= 2
-                      ? stock != 0
+                      ? stock !== 0
                       : null
                     : null
                 ) ? (
@@ -182,7 +182,7 @@ const Prizes = ({
                 (
                   hoursBalance
                     ? hoursBalance / cost >= 1
-                      ? stock != 0
+                      ? stock !== 0
                       : null
                     : null
                 ) ? (
@@ -289,7 +289,7 @@ const Prizes = ({
               variant="headline"
               className="gaegu"
             >
-              {cost} {cost == 1 ? 'ticket' : 'tickets'}
+              {cost} {cost === 1 ? 'ticket' : 'tickets'}
             </Text>
             <Flex
               sx={{
@@ -378,7 +378,7 @@ const Prizes = ({
                       (
                         hoursBalance
                           ? hoursBalance / cost >= 2
-                            ? stock != 0
+                            ? stock !== 0
                             : null
                           : null
                       ) ? (
@@ -398,7 +398,7 @@ const Prizes = ({
                       (
                         hoursBalance
                           ? hoursBalance / cost >= 1
-                            ? stock != 0
+                            ? stock !== 0
                             : null
                           : null
                       ) ? (

components/arcade/shop-component.js

@@ -77,7 +77,7 @@ export default function ShopComponent({
       >
         {availableItems
           .sort((a, b) => a['Cost Hours'] - b['Cost Hours'])
-          .filter(item => (item['Stock'] > 0 || item['Stock'] == null))
+          .filter(item => (item['Stock'] > 0 || item['Stock'] === null))
           .map((item) => (
             <Prizes
               img={item['Image URL']}
@@ -101,7 +101,7 @@ export default function ShopComponent({
           ))}
           {availableItems
           .sort((a, b) => a['Cost Hours'] - b['Cost Hours'])
-          .filter(item => (item['Stock'] == 0))
+          .filter(item => (item['Stock'] === 0))
           .map((item) => (
             <Prizes
               img={item['Image URL']}

components/arcade/showcase/create-card.js

@@ -7,7 +7,7 @@ const CreateCard = ({ createCardLink }) => {
     <>
     <a href={createCardLink} className={styles.linkWrapper} rel="noopener noreferrer">
       <div className={styles.card}>
-        <img src={img}/>
+        <img src={img} alt="Create a card" />
         Create a card
       </div>
     </a>

components/arcade/showcase/project-add.js

@@ -52,7 +52,7 @@ const NewProjectForm = ({ authToken }) => {
             success: 'Pulling repo data'
           }}
           sx={{
-            background: status == 'error' ? '#DE4E2B' : '#09AFB4',
+            background: status === 'error' ? '#DE4E2B' : '#09AFB4',
             borderRadius: '10px'
           }}
         />

components/arcade/showcase/project-view.js

@@ -66,6 +66,7 @@ const ProjectView = ({
   useEffect(() => {
     setDarkColor(darkenColor(color, 0.8))
     setInvertedColor(invertColor(textColor))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [color])
 
   // function convertToRawUrl(githubUrl) {
@@ -133,8 +134,8 @@ const ProjectView = ({
         }}
       >
         <h1 className="slackey">{title}</h1>
-        <h2>{description != 'Description Not Found' ? description : <></>}</h2>
+        <h2>{description !== 'Description Not Found' ? description : <></>}</h2>
-        <h3>{user != 'User Not Found' ? <>By {user}</> : <></>}</h3>
+        <h3>{user !== 'User Not Found' ? <>By {user}</> : <></>}</h3>
 
         <div
           className={styles.buttonGroup}
@@ -218,13 +219,13 @@ const ProjectView = ({
             display: 'grid',
             flexWrap: 'wrap',
             gridTemplateColumns:
-              screenshot != '' && video != ''
+              screenshot !== '' && video !== ''
                 ? ['1fr', '1fr 1fr', '1fr 1fr']
                 : '1fr',
             gap: '10px'
           }}
         >
-          {image != '' && (
+          {image !== '' && (
             <div
               sx={{
                 display: 'flex',
@@ -254,7 +255,7 @@ const ProjectView = ({
 
         <p
           className={styles.description}
-          sx={{ textAlign: screenshot.length != 1 ? 'center' : 'left' }}
+          sx={{ textAlign: screenshot.length !== 1 ? 'center' : 'left' }}
         >
           <ReadmeRenderer markdown={markdown} />
         </p>

components/bio.js

@@ -1,9 +1,9 @@
 import Icon from '@hackclub/icons'
 import { useState } from 'react'
-import { Avatar, Box, Card, Flex, Text } from 'theme-ui'
+import { Box, Card, Flex, Text } from 'theme-ui'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
-  const { img, name, teamRole, pronouns, text, subrole, email, href, video } =
+  const { name, teamRole, pronouns, text, subrole, email, href, video, img } =
     props
   const [expand, setExpand] = useState(false)
   return (
@@ -36,23 +36,21 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
           }
         }}
       >
-        <Avatar
+        {img && (
-          size={64}
+          <Box
-          width={64}
+            as="img"
-          height={64}
+            src={img}
-          mr={3}
+            alt={name}
-          src={img}
+            sx={{
-          alt={name}
+              width: 96,
-          sx={{
+              height: 96,
-            overflow: 'hidden',
+              minWidth: 96,
-            objectFit: 'cover',
+              borderRadius: '50%',
-            transition: 'transform 0.125s ease-in-out',
+              objectFit: 'cover',
-            '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+              mr: 3
-            flexShrink: 0,
+            }}
-            width: '64px',
+          />
-            height: '64px'
+        )}
-          }}
-        />
         <Box>
           <Text sx={{ fontSize: [3, 3, 3] }} variant="headline" color="black">
             {name}

components/boardbio.js

@@ -0,0 +1,239 @@
+import Icon from '@hackclub/icons'
+import { useState } from 'react'
+import { Avatar, Box, Card, Flex, Text } from 'theme-ui'
+
+export default function BoardBox({ popup = true, ...props }) {
+  const { img, name, teamRole, pronouns, text, subrole, email, href, video } = props
+  const [expand, setExpand] = useState(false)
+
+  return (
+    <>
+      <Card
+        bg="#d9f7ed"
+        sx={{
+          display: 'flex',
+          flexDirection: popup ? 'column' : 'row',
+          alignItems: popup ? 'center' : 'flex-start',
+          justifyContent: popup ? 'center' : 'flex-start',
+          transition: 'transform 0.125s ease-in-out',
+          '&:hover': { transform: 'scale(1.025)' },
+          cursor: (text && popup) || href ? 'pointer' : null,
+          textDecoration: 'none',
+          maxWidth: popup ? 'auto' : '600px',
+          zIndex: !popup ? 1003 : 5,
+          maxHeight: popup ? 'auto' : '90vh',
+          overflowY: 'hidden',
+          position: 'relative'
+        }}
+        as={href && !text ? 'a' : 'div'}
+        href={href}
+        target="_blank"
+        onClick={() => {
+          if (text && popup) {
+            setExpand(true)
+          }
+        }}
+      >
+        {popup ? (
+          <>
+            <Text
+              variant="headline"
+              sx={{ fontSize: subrole ? 3 : 4, textAlign: 'center', mb: subrole ? 0 : 1, mt: subrole ? -3: -2 }}
+              color="black"
+            >
+              {name}
+            </Text>
+            <Text
+              color="#24B5A5"
+              variant="subheadline"
+              sx={{ fontSize: subrole ? 1 : 3, textAlign: 'center', mb: subrole ? 0 : 2 }}
+            >
+              {teamRole}
+            </Text>
+            {subrole && (
+              <Text
+                color="#24B5A5"
+                sx={{
+                  fontSize: 1,
+                  textAlign: 'center',
+                  mb: 2,
+                  fontWeight: 400
+                }}
+              >
+                {subrole}
+              </Text>
+            )}
+            <Box
+              as="img"
+              src={img}
+              alt={name}
+              sx={{
+                width: '120px',
+                height: '120px',
+                borderRadius: '50%',
+                objectFit: 'cover',
+                mb: subrole ? -3: -2
+              }}
+            />
+          </>
+        ) : (
+          <>
+            <Avatar
+              size={64}
+              width={64}
+              height={64}
+              mr={3}
+              src={img}
+              alt={name}
+              sx={{
+                overflow: 'hidden',
+                objectFit: 'cover',
+                transition: 'transform 0.125s ease-in-out',
+                '&:hover': { transform: 'rotate(-8deg) scale(1.25)' },
+                flexShrink: 0,
+                width: '64px',
+                height: '64px'
+              }}
+            />
+            <Box>
+              <Text sx={{ fontSize: [3, 3, 3] }} variant="headline" color="black">
+                {name}
+              </Text>
+              <Flex>
+                <Text>
+                  <Text
+                    color="#24B5A5"
+                    variant="subheadline"
+                    fontSize={2}
+                    sx={{
+                      mb: ['0px', '0px', '0px'],
+                      fontSize: '1.1em',
+                      width: 'fit-content'
+                    }}
+                  >
+                    {teamRole}
+                  </Text>
+                  {subrole && (
+                    <>
+                      <br />
+                      <Text
+                        color="#24B5A5"
+                        sx={{
+                          mb: ['0px', '0px', '0px'],
+                          fontSize: 1,
+                          fontWeight: 400,
+                          width: 'fit-content'
+                        }}
+                      >
+                        {subrole}
+                      </Text>
+                    </>
+                  )}
+                  {pronouns && (
+                    <Text fontSize={1} ml={1} color="muted" align="center">
+                      ({pronouns})
+                    </Text>
+                  )}
+                </Text>
+              </Flex>
+              {email &&
+                (email.includes('@') ? (
+                  <Text color="muted" as={'a'} href={`mailto:${email}`}>
+                    {email}
+                    <br />
+                  </Text>
+                ) : (
+                  <Text
+                    color="muted"
+                    as={'a'}
+                    href={`mailto:${email}@hackclub.com`}
+                  >
+                    {email}@hackclub.com
+                    <br />
+                  </Text>
+                ))}
+              <Text mt={2} mb={0} color="black">
+                {text}
+              </Text>
+              {video && (
+                <Flex
+                  sx={{
+                    marginTop: 4,
+                    marginX: 5,
+                    justifyContent: 'center',
+                    aspectRatio: 4 / 3
+                  }}
+                >
+                  <iframe
+                    width="100%"
+                    src={video}
+                    title="YouTube video player"
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                  />
+                </Flex>
+              )}
+              {href && (
+                <Flex sx={{ alignItems: 'center' }}>
+                  <Text
+                    sx={{
+                      transform: 'translateX(-4px) translateY(2px)',
+                      display: 'inline-flex',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <Icon glyph="external-fill" size={24} />
+                  </Text>
+                  <Text
+                    mt={1}
+                    mb={0}
+                    color="black"
+                    as={'a'}
+                    target="_blank"
+                    href={href}
+                    sx={{ transform: 'translateX(-2px)' }}
+                  >
+                    {href}
+                  </Text>
+                </Flex>
+              )}
+            </Box>
+          </>
+        )}
+      </Card>
+      {popup && expand && (
+        <Flex
+          sx={{
+            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
+          }}
+        >
+          <BoardBox {...props} popup={false} />
+          <Flex
+            sx={{
+              position: 'fixed',
+              zIndex: 1002,
+              top: 0,
+              left: 0,
+              height: '100vh',
+              width: '100vw',
+              alignItems: 'center',
+              justifyContent: 'center',
+              pb: 4
+            }}
+            onClick={() => setExpand(false)}
+          />
+        </Flex>
+      )}
+    </>
+  )
+}

components/force-theme.js

@@ -5,7 +5,7 @@ const ForceTheme = ({ theme }) => {
   const [colorMode, setColorMode] = useColorMode()
   useEffect(() => {
     setColorMode(theme)
-  }, [])
+  }, [setColorMode, theme])
   return null
 }
 

components/index/cards/blueprint.js

@@ -18,7 +18,7 @@ export default function Blueprint({ stars, blueprintData }) {
           setProjects('100+ projects built')
         })
     }
-  }, [])
+  }, [blueprintData])
 
   return (
     <Box

components/replit/form.js

@@ -57,6 +57,7 @@ const ReplitForm = ({ cssDark }) => {
         draggedSticker.current = null
       }
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleInputChange = e => {

components/slack/join.js

@@ -51,6 +51,7 @@ export default function Join() {
       </Box>
       <Image
         src="https://cloud-j0p07nviw-hack-club-bot.vercel.app/0image.png"
+        alt="Hack Club Slack community"
         sx={{
           width: ['100%', '100%', '50%'],
           height: ['100%', '100%', '30rem'],

components/slack/project.js

@@ -57,6 +57,7 @@ export default function Project({ title, description, color, img, itemId }) {
       </Box>
       <Image
         src={`/slack/${img}.png`}
+        alt={title}
         sx={{
           visibility: ['visible'],
           height: ['100%'],

components/slack/quote.js

@@ -14,7 +14,7 @@ export default function Quote({ text, person, age, location, img }) {
         "{text}"
       </Text>
       <Flex sx={{ gap: '8px' }}>
-        <Image src={img} sx={{ height: 24, width: 24, borderRadius: 100 }} />
+        <Image src={img} alt={`${person}'s profile picture`} sx={{ height: 24, width: 24, borderRadius: 100 }} />
         <Text as="h3" sx={{ fontWeight: 400 }}>
           {person}, {age} from {location}
         </Text>

pages/acknowledged.tsx

@@ -0,0 +1,110 @@
+import { Box, Container, Flex, Grid, Text } 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 BoardBox from '../components/boardbio'
+import ForceTheme from '../components/force-theme'
+import { fetchTeam } from './api/team'
+
+
+export default function Acknowleged({ team }) {
+  // Spacing between major team section boxes
+  const BOX_SPACING = 5
+
+  return (
+    <>
+      <Box as="main" key="main" pb={5}>
+        <ForceTheme theme="light" />
+        {/* @ts-expect-error -- TODO: fix this */}
+        <Nav />
+        <Meta
+          as={Head}
+          title="Team"
+          description="Meet the team that runs Hack Club, a global nonprofit network of high school computer science clubs."
+        />
+        <Box
+          pt={6}
+          pb={5}
+          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://hc-cdn.hel1.your-objectstorage.com/s/v3/cf3488823b5ae7c41ed968224485ea06423a6862_IMG_9920.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: '25% 15%'
+          }}
+        >
+          <Container>
+            <Text variant="ultratitle" color="snow">
+              By the students,
+              <br /> for the students.
+            </Text>
+
+            <Text
+              as="div"
+              variant="lead"
+              color="smoke"
+              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
+              working hard to make it reality.
+            </Text>
+          </Container>
+        </Box>
+        <Container>
+        <Box sx={{ textAlign: 'center', mt: 100, mb: [3, 4] }}>
+              <Text
+                variant="title"
+                color="orange"
+                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                as="h2"
+              >
+                Acknowledgements
+              </Text>
+              <Text
+                variant="title"
+                color="text"
+                sx={{
+                  lineHeight: '1.2',
+                  fontSize: [1, 3, 4],
+                  my: [3, 0, 0],
+                  fontWeight: 400,
+                  maxWidth: '600px',
+                  width: '100%',
+                  margin: 'auto'
+                }}
+                as="h2"
+              >
+                Thank you to everyone who helped shape Hack Club into what it is
+                today...
+              </Text>
+            </Box>
+            <Grid columns={[1, null, 2, 3]} gap={3}>
+              {team.acknowledged?.map(member => (
+                <Bio
+                  name={member.name}
+                  teamRole={member.role}
+                  text={member.bio}
+                  pronouns={member.pronouns}
+                  key={member.name}
+                  href={member.website}
+                />
+              ))}
+            </Grid>
+    </Container>
+    </Box>
+      <Footer light key="footer" />
+    </>
+  )
+}
+
+export const getServerSideProps = async () => {
+  try {
+    const team = await fetchTeam()
+    return { props: { team } }
+  } catch (e) {
+    return { props: { team: {} } }
+  }
+}

pages/api/arcade/hack-hour/inventory.js

@@ -38,7 +38,7 @@ export default async function handler(req, res) {
       formURL:  record.fields['Order Form URL'],
       description: record.fields['Description'],
       flavorText: record?.fields['Flavor text']?.map(recordID => {
-        const flavorRecord = data.flavor.find(f => f.id == recordID)
+        const flavorRecord = data.flavor.find(f => f.id === recordID)
         const result = {
           message: flavorRecord.fields["Message"],
           character: flavorRecord.fields["Character"],

pages/api/arcade/shop.js

@@ -21,7 +21,7 @@ export const shopParts = async () => {
     if (stock && fields["Count of Orders Fulfilled"]) {
       stock -= fields["Count of Orders Fulfilled"]
     }
-      return { id: record.id, ...record.fields, "Stock": (stock == null)? null : (stock >= 0 ? stock : 0) }
+      return { id: record.id, ...record.fields, "Stock": (stock === null)? null : (stock >= 0 ? stock : 0) }
   })
 
 

pages/api/bin/rsvp.js

@@ -23,7 +23,7 @@ export default async function handler(req, res) {
     await rsvpsTable.create(fields)
 
     res.status(200).json({ success: true })
-  } else if (req.method == 'GET') {
+  } else if (req.method === 'GET') {
     const result = await rsvpsTable.read()
 
     res.status(200).json(result.length)

pages/api/team.ts

@@ -14,6 +14,8 @@ interface TeamMember {
   website: string
   pronouns: string
   avatar: string
+  staff?: boolean
+  gapyear?: boolean
 }
 
 export async function fetchTeam() {

pages/arcade/[userAirtableID]/shop.js

@@ -49,12 +49,13 @@ export default function Shop({
   )
 
   useEffect(() => {
-    if (cat == 'all') {
+    if (cat === 'all') {
       setItems(availableItems)
     } else {
       let i = availableItems.filter(items => items['Category'].includes(cat))
       setItems(i)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cat])
 
   const spotlightRef = useRef()
@@ -232,7 +233,7 @@ export default function Shop({
               🦢 Swag
             </Button>
           </Flex>
-          {cat == 'all' ? (
+          {cat === 'all' ? (
             <>
               <Text
                 sx={{
@@ -314,6 +315,7 @@ export default function Shop({
         </Box>
         <img
           src="/arcade/o6.png"
+          alt="Decorative illustration"
           sx={{
             width: ['30%', '30%', '30%', '40%'],
             maxWidth: '210px',

pages/arcade/index.js

@@ -257,10 +257,10 @@ const Powerups = ({
         variant="headline"
         className="gaegu"
       >
-        {cost} {cost == 1 ? 'ticket' : 'tickets'}
+        {cost} {cost === 1 ? 'ticket' : 'tickets'}
       </Text>
       {extraTags?.map((tag, i) => {
-        if (tag == 'Limited Supply') {
+        if (tag === 'Limited Supply') {
           return (
             <Text
               key={tag}
@@ -383,7 +383,7 @@ const Powerups = ({
           variant="headline"
           className="gaegu"
         >
-          {cost} {cost == 1 ? 'ticket' : 'tickets'}
+          {cost} {cost === 1 ? 'ticket' : 'tickets'}
         </Text>
       </dialog>
     </Flex>
@@ -407,7 +407,7 @@ const Intro = ({ title, num, text, img, third, ...props }) => {
         className="gaegu"
         sx={{
           display: 'block',
-          width: third == 'true' ? ['100%', '100%', '100%', '70%'] : '100%'
+          width: third === 'true' ? ['100%', '100%', '100%', '70%'] : '100%'
         }}
       >
         {title}
@@ -953,7 +953,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
           paddingBottom: '20vh'
         }}
       >
-        {slack == 'slack' ? (
+        {slack === 'slack' ? (
           <Announcement
             copy="You were redirected as we're running a special summer event!"
             caption="To join our Slack, join ARCADE."
@@ -1105,6 +1105,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
           >
             <img
               src="/arcade/prizes.png"
+              alt="Arcade prizes"
               sx={{
                 zIndex: 10,
                 width: ['80%', '70%', '65%', '80%'],
@@ -1188,6 +1189,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
               />
               <img
                 src="/arcade/a1.png"
+                alt=""
                 sx={{
                   width: '100px',
                   position: 'absolute',
@@ -1571,6 +1573,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
             />
             <img
               src="/arcade/r5.png"
+              alt=""
               sx={{
                 width: ['35%', '35%', '35%', '50%'],
                 maxWidth: '210px',
@@ -1605,6 +1608,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
       >
         <img
           src="/arcade/o5.png"
+          alt=""
           sx={{
             width: ['45%', '45%', '45%', '60%'],
             maxWidth: '310px',
@@ -1617,6 +1621,7 @@ const Arcade = ({ stickers = [], carousel = [], highlightedItems = [] }) => {
         />
         <img
           src="/arcade/o6.png"
+          alt=""
           sx={{
             width: ['30%', '30%', '30%', '40%'],
             maxWidth: '210px',

pages/arcade/shop.js

@@ -51,13 +51,13 @@ export default function Shop({
   )
 
   useEffect(() => {
-    if (cat == 'all') {
+    if (cat === 'all') {
       setItems(availableItems)
     } else {
       let i = availableItems.filter(items => items['Category'].includes(cat))
       setItems(i)
     }
-  }, [cat])
+  }, [cat, availableItems])
 
   // Spotlight effect
   const spotlightRef = useRef()
@@ -132,6 +132,7 @@ export default function Shop({
         <Flag sx={{ display: 'block', zIndex: 4, ml: 5 }} />
         <img
           src="/arcade/o6.png"
+          alt="Decorative dino"
           sx={{
             width: ['30%', '30%', '30%', '40%'],
             maxWidth: '210px',
@@ -270,7 +271,7 @@ export default function Shop({
               🦢 Swag
             </Button>
           </Flex>
-          {cat == 'all' ? (
+          {cat === 'all' ? (
             <>
               <Text
                 sx={{

pages/arcade/showcase/login/[token].js

@@ -27,26 +27,28 @@ const flavorText = [
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 const LoginPage = ({token}) => {
   const [ status, setStatus ] = useState('Loading...')
-  useEffect(async () => {
+  useEffect(() => {
-    const minWaitTime = sleep(3 * 1000)
+    const run = async () => {
-    let data = {}
+      const minWaitTime = sleep(3 * 1000)
-    const getTokenPromise = new Promise(async resolve => {
+      let data = {}
-      const response = await fetch(`/api/arcade/showcase/login/${token}`, {method: 'POST'})
+      const getTokenPromise = new Promise(async resolve => {
-      data = await response.json()
+        const response = await fetch(`/api/arcade/showcase/login/${token}`, {method: 'POST'})
-      resolve()
+        data = await response.json()
-    })
+        resolve()
-    const [ _wait, _data ] = await Promise.all([minWaitTime, getTokenPromise])
+      })
+      const [ _wait, _data ] = await Promise.all([minWaitTime, getTokenPromise])
 
-    if (data.error) {
+      if (data.error) {
-      setStatus(data.error)
+        setStatus(data.error)
-    } else {
+      } else {
-      setStatus("Redirecting!")
+        setStatus("Redirecting!")
-      window.localStorage.setItem('arcade.authToken', data.authToken)
+        window.localStorage.setItem('arcade.authToken', data.authToken)
-      await sleep(250)
+        await sleep(250)
-      window.location.href = '/arcade/showcase/my'
+        window.location.href = '/arcade/showcase/my'
+      }
     }
-
+    run()
-  }, [])
+  }, [token])
 
   return (
     <div>

pages/arcade/showcase/my.js

@@ -192,6 +192,7 @@ const My = () => {
     if (now > deadline) {
       setSubmissionClose(true)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   // const launchDate = new Date(2025, 7, 25, 8, 0, 0, 0)
 
@@ -252,9 +253,12 @@ const My = () => {
     }
   }
 
-  useEffect(async () => {
+  useEffect(() => {
-    loadProjects()
+    const fetchData = async () => {
-    loadCohort()
+      loadProjects()
+      loadCohort()
+    }
+    fetchData()
   }, [])
 
   return (
@@ -289,6 +293,7 @@ const My = () => {
         <div sx={{ zIndex: 5, position: 'relative' }}>
           <img
             src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
+            alt="Arcade"
             sx={{
               width: '30%',
               maxWidth: '200px',
@@ -309,7 +314,7 @@ const My = () => {
               }}
             >
               <Text className="gaegu" sx={{ color: '#FF5C00' }}>
-                {status == 'success' ? `Welcome, ${name}` : ''}
+                {status === 'success' ? `Welcome, ${name}` : ''}
               </Text>
 
               <div>
@@ -342,11 +347,11 @@ const My = () => {
             </Heading>
           </SlideDown>
 
-          {status == 'loading' && <Loading />}
+          {status === 'loading' && <Loading />}
 
-          {status == 'error' && <ErrorMessage />}
+          {status === 'error' && <ErrorMessage />}
 
-          {status == 'success' && (
+          {status === 'success' && (
             <ProjectGallery
               projects={projects}
               loadProjects={loadProjects}

pages/arcade/showcase/project/[projectID]/edit.js

@@ -78,7 +78,7 @@ const Showcase = ({ projectID }) => {
         console.error(e)
         setStatus('error')
       })
-  }, [])
+  }, [projectID])
 
   return (
     <>
@@ -121,6 +121,7 @@ const Showcase = ({ projectID }) => {
         >
           <img
             src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
+            alt="Arcade logo"
             sx={{
               width: '30%',
               maxWidth: '200px',

pages/arcade/showcase/project/[projectID]/index.js

@@ -39,33 +39,37 @@ const ProjectShowPage = ({ projectID }) => {
   const [status, setStatus] = useState('loading')
   const [errorMsg, setError] = useState(null)
 
-  useEffect(async () => {
+  useEffect(() => {
-    const token = window.localStorage.getItem('arcade.authToken')
+    const fetchProject = async () => {
-    const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
+      const token = window.localStorage.getItem('arcade.authToken')
-      method: 'GET',
+      const response = await fetch(`/api/arcade/showcase/projects/${projectID}`, {
-      headers: {
+        method: 'GET',
-        Authorization: `Bearer ${token}`
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
+      }).catch(e => {
+        console.error(e)
+        setStatus('error')
+        setError(e)
+      })
+      const data = await response.json()
+      if (data.error) {
+        setStatus('error')
+        return
+      } else {
+        setProject(data.project)
+        setStatus('success')
       }
-    }).catch(e => {
-      console.error(e)
-      setStatus('error')
-      setError(e)
-    })
-    const data = await response.json()
-    if (data.error) {
-      setStatus('error')
-      return
-    } else {
-      setProject(data.project)
-      setStatus('success')
     }
-  }, [])
+    fetchProject()
+  }, [projectID])
 
   return (
     <div>
       <div sx={{ zIndex: 5, position: 'relative' }}>
         <img
           src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
+          alt="Arcade logo"
           sx={{
             width: '30%',
             maxWidth: '200px',
@@ -76,11 +80,11 @@ const ProjectShowPage = ({ projectID }) => {
           }}
         />
         <div className={styles.min}>
-          {status == 'loading' && <Loading />}
+          {status === 'loading' && <Loading />}
 
-          {status == 'error' && <ErrorMessage />}
+          {status === 'error' && <ErrorMessage />}
 
-          {status == 'success' && (
+          {status === 'success' && (
             <ProjectView
               key={project.id}
               id={project.id}

pages/arcade/showcase/vote.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import { Button, Text, Box, Close, Flex } from 'theme-ui'
 import ProjectView from '../../../components/arcade/showcase/project-view'
 import SmallView from '../../../components/arcade/showcase/small-view-card'
@@ -283,12 +283,12 @@ const Vote = () => {
     }
   }
 
-  useEffect(async () => {
+  useEffect(() => {
     loadProjects()
   }, [])
 
   /* get individual project details */
-  const getProjectDetails = async () => {
+  const getProjectDetails = useCallback(async () => {
     const token = window.localStorage.getItem('arcade.authToken')
     setStatus('loading')
 
@@ -318,11 +318,11 @@ const Vote = () => {
       console.error(e)
       setStatus('error')
     }
-  }
+  }, [openProjectId])
 
   useEffect(() => {
     getProjectDetails()
-  }, [openProjectId])
+  }, [getProjectDetails])
 
   const dialogRef = useRef(null)
 
@@ -438,7 +438,7 @@ const Vote = () => {
         isCursorInsideBoundingBox(mousePosition, box)
       ) {
         insideVotingBox = true
-        if (activeDroppableId != box.id) {
+        if (activeDroppableId !== box.id) {
           setActiveDroppable(true)
           setActiveDroppableId(box.id)
         }
@@ -461,7 +461,7 @@ const Vote = () => {
 
     console.log(destination)
 
-    if (destination.droppableId == 'projects') {
+    if (destination.droppableId === 'projects') {
       console.log('projects')
       return
     }
@@ -607,7 +607,7 @@ const Vote = () => {
 
   /* VOTE SUBMISSION BELOW */
   useEffect(() => {
-    if (Object.keys(votes).length == 5) {
+    if (Object.keys(votes).length === 5) {
       setIsButtonActive(true)
     } else {
       setIsButtonActive(false)
@@ -724,7 +724,7 @@ const Vote = () => {
       //skips first render
       submitVote(overall, technical, creative)
     }
-  }, [endPage])
+  }, [endPage, creative, overall, technical])
 
   //MOBILE w/ ChatGPT help
   const [selectedProjects, setSelectedProjects] = useState(Array(5).fill(''))
@@ -763,8 +763,8 @@ const Vote = () => {
     setSelectedProjects(Array(5).fill(''))
   }
 
-  return startVote == true ? (
+  return startVote === true ? (
-    endPage == true ? (
+    endPage === true ? (
       <div
         sx={{
           display: 'flex',
@@ -781,6 +781,7 @@ const Vote = () => {
       >
         <img
           src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
+          alt="Arcade logo"
           sx={{
             width: '30%',
             maxWidth: '200px',
@@ -794,9 +795,9 @@ const Vote = () => {
           className="gaegu"
           sx={{ textAlign: 'center', maxWidth: '800px' }}
         >
-          {submitStatus == 'loading'
+          {submitStatus === 'loading'
             ? 'Loading...'
-            : submitStatus == 'success'
+            : submitStatus === 'success'
               ? 'Thanks for voting!'
               : 'Ran into an error sending your votes'}
         </Text>
@@ -806,7 +807,7 @@ const Vote = () => {
           className="gaegu"
           sx={{ textAlign: 'center', maxWidth: '800px', mt: 0 }}
         >
-          {submitStatus == 'loading' ? 'It takes a while' : ''}
+          {submitStatus === 'loading' ? 'It takes a while' : ''}
         </Text>
         <Button
           as="a"
@@ -1018,7 +1019,7 @@ const Vote = () => {
                                   transition: 'transform 0.2s ease',
                                   transform:
                                     activeDroppableId === voteId
-                                      ? activeDroppable == true
+                                      ? activeDroppable === true
                                         ? 'scale(1.05)'
                                         : 'scale(1)'
                                       : 'scale(1)'
@@ -1153,11 +1154,11 @@ const Vote = () => {
               }}
               className="gaegu"
             >
-              {status == 'loading' && <Loading />}
+              {status === 'loading' && <Loading />}
 
-              {status == 'error' && <ErrorMessage />}
+              {status === 'error' && <ErrorMessage />}
 
-              {status == 'success' && (
+              {status === 'success' && (
                 <ProjectView
                   preview="preview"
                   key={openProject.id}
@@ -1198,7 +1199,7 @@ const Vote = () => {
         </div>
       )
     )
-  ) : startViewProject == true ? (
+  ) : startViewProject === true ? (
     <div>
       <div
         className="gaegu"
@@ -1300,6 +1301,7 @@ const Vote = () => {
     >
       <img
         src="https://cloud-677i45opw-hack-club-bot.vercel.app/0arcade_1.png"
+        alt="Arcade logo"
         sx={{
           width: '30%',
           maxWidth: '200px',
@@ -1312,8 +1314,8 @@ const Vote = () => {
         sx={{ width: '90vw', margin: 'auto', maxWidth: '800px' }}
         className="gaegu"
       >
-        {loadStatus == 'success' ? (
+        {loadStatus === 'success' ? (
-          voted == true ? (
+          voted === true ? (
             <div
               sx={{
                 display: 'flex',
@@ -1397,7 +1399,7 @@ const Vote = () => {
               {loadStatus}
             </Text>
             <Text variant="caption" as="h4">
-              {loadStatus == 'loading'
+              {loadStatus === 'loading'
                 ? "Please give it some time. If it's taken too long, ask for help in #arcade-help"
                 : 'Try logging in again with /showcase in Slack. If it persists, please ask for help in #arcade-help.'}
             </Text>

pages/bin/gallery.js

@@ -37,12 +37,15 @@ function Gallery({ posts = [], tags = [] }) {
   const [filterPosts, setFilterPosts] = useState([]);
   const [filterParts, setFilterParts] = useState([]);
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     setAllPosts(posts);
     setFilterParts([]);
 
   }, []);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     setFilterPosts(
       allPosts.filter(post =>
@@ -50,6 +53,7 @@ function Gallery({ posts = [], tags = [] }) {
       )
     );
   }, [filterParts]);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   
   const addFilter = (partID) => {

pages/bin/prelaunch.js

@@ -28,11 +28,14 @@ import { TypeAnimation } from 'react-type-animation'
 const RsvpCount = () => {
   const targetRSVPs = 500
   const [rsvpCount, setRsvpCount] = useState(0)
-  useEffect(async () => {
+  useEffect(() => {
-    // const url = 'https://api2.hackclub.com/v0.1/The Bin/rsvp'  <- switch to this once we have api2 back up and running
+    const fetchRsvpCount = async () => {
-    const url = '/api/bin/rsvp'
+      // const url = 'https://api2.hackclub.com/v0.1/The Bin/rsvp'  <- switch to this once we have api2 back up and running
-    const results = await fetch(url).then(r => r.json())
+      const url = '/api/bin/rsvp'
-    setRsvpCount(results)
+      const results = await fetch(url).then(r => r.json())
+      setRsvpCount(results)
+    }
+    fetchRsvpCount()
   }, [])
 
   if (rsvpCount < targetRSVPs) {
@@ -91,10 +94,13 @@ const PartPicker = () => {
 const OnboardCount = () => {
   const [onboardCount, setOnboardCount] = useState(200)
 
-  useEffect(async () => {
+  useEffect(() => {
-    const url = '/api/onboard/p/count'
+    const fetchOnboardCount = async () => {
-    const results = await fetch(url).then(r => r.json())
+      const url = '/api/onboard/p/count'
-    setOnboardCount(results.count)
+      const results = await fetch(url).then(r => r.json())
+      setOnboardCount(results.count)
+    }
+    fetchOnboardCount()
   }, [])
 
   return <Text>{onboardCount}</Text>
@@ -106,7 +112,7 @@ const Electronic = ({ imageUrl, name, description }) => {
       <Flex
         sx={{ mx: 'auto', flexDirection: 'column', display: 'inline-flex' }}
       >
-        <Image src={imageUrl} width="100" />
+        <Image src={imageUrl} width="100" alt={name} />
         <Heading as="span" variant="headline">
           {name}
         </Heading>
@@ -207,6 +213,7 @@ export default function Bin() {
               }}>
                 <Image
                   src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png"
+                  alt="Rummaging through The Bin"
                   onClick={(e) => { fireConfetti(); crunch(); spinIt(e.target) }}
                   sx={{
                     cursor: 'pointer',
@@ -223,7 +230,7 @@ export default function Bin() {
               <RsvpCount />
               <Box id="rsvp">
                 <Sparkles size="100px">
-                  <Image src="https://cloud-rdlz8he4l-hack-club-bot.vercel.app/0thebin.svg" sx={{ maxWidth: '250px' }} />
+                  <Image src="https://cloud-rdlz8he4l-hack-club-bot.vercel.app/0thebin.svg" alt="The Bin logo" sx={{ maxWidth: '250px' }} />
                 </Sparkles>
               </Box>
               <Text sx={{ fontWeight: 'bold' }}>
@@ -309,7 +316,7 @@ export default function Bin() {
             <Box sx={{ textAlign: 'left' }}>
               <Flex sx={{ my: 4 }}>
                 <Box>
-                  <Image src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png" />
+                  <Image src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/0rummaging.png" alt="Rummage" />
                 </Box>
                 <Box>
                   <Heading as="p" variant="headline">
@@ -321,10 +328,10 @@ export default function Bin() {
                   </Text>
                 </Box>
               </Flex>
-              <Image src="https://cloud-2wkwrydc4-hack-club-bot.vercel.app/0parts.svg" sx={{ width: '100%' }} />
+              <Image src="https://cloud-2wkwrydc4-hack-club-bot.vercel.app/0parts.svg" alt="Example parts" sx={{ width: '100%' }} />
               <Flex sx={{ my: 4 }}>
                 <Box>
-                  <Image src="https://cloud-h7vwjlwe3-hack-club-bot.vercel.app/0frame_1__50_.png" />
+                  <Image src="https://cloud-h7vwjlwe3-hack-club-bot.vercel.app/0frame_1__50_.png" alt="Think" />
                 </Box>
                 <Box>
                   <Text as="p" variant="headline">
@@ -347,7 +354,7 @@ export default function Bin() {
                   </Text>
                 </Box>
                 <Box>
-                  <Image src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/1prototype.png" />
+                  <Image src="https://cloud-mt5wqf6f5-hack-club-bot.vercel.app/1prototype.png" alt="Prototype" />
                 </Box>
               </Flex>
               <Box sx={{
@@ -388,6 +395,7 @@ export default function Bin() {
               </Flex>
               <Image
                 src="https://cloud-ge8yutn2q-hack-club-bot.vercel.app/0image.png"
+                alt="Build it"
                 width="100%"
               />
             </Box>

pages/fiscal-sponsorship/directory/index.js

@@ -99,7 +99,7 @@ export const categories = [
     color: 'blue',
     description:
       'Everywhere from San Jose to Boston to New York, HCB powers teams of all sizes.',
-    match: org => org.category == 'robotics_team',
+    match: org => org.category === 'robotics_team',
     icon: 'sam'
   },
   {
@@ -107,7 +107,7 @@ export const categories = [
     id: 'hackathons',
     color: 'purple',
     description: `Hackers are using HCB to run hackathons that'll blow your mind away.`,
-    match: org => org.category == 'hackathon',
+    match: org => org.category === 'hackathon',
     icon: 'event-code'
   }
 ]
@@ -204,10 +204,10 @@ const FilterPanel = ({ filter, mobile, clearOffset }) => {
                 color: 'inherit',
                 fontSize: 3,
                 color:
-                  category == availableCategory.id ||
+                  category === availableCategory.id ||
                   (availableCategory.index &&
-                    category == null &&
+                    category === null &&
-                    region == null)
+                    region === null)
                     ? 'primary'
                     : 'null',
                 ':hover': {
@@ -311,7 +311,7 @@ const FilterPanel = ({ filter, mobile, clearOffset }) => {
                 color: 'inherit',
                 fontSize: 3,
                 color:
-                  region == kebabCase(availableRegion.label)
+                  region === kebabCase(availableRegion.label)
                     ? 'primary'
                     : 'null',
                 ':hover': {
@@ -599,7 +599,7 @@ export default function Directory({ rawOrganizations, pageRegion, category }) {
         sx={{
           textAlign: 'center',
           mb: 4,
-          display: searchValue == '' ? 'flex' : 'none',
+          display: searchValue === '' ? 'flex' : 'none',
           alignItems: 'center',
           justifyContent: 'center',
           gap: '16px'
@@ -809,7 +809,7 @@ export async function fetchRawOrganizations() {
     page++
     total = [...total, ...json]
   }
-  return [...total.filter((a) => a.logo != null), ...total.filter((a) => a.logo == null)]
+  return [...total.filter((a) => a.logo !== null), ...total.filter((a) => a.logo === null)]
 }
 
 export const getStaticProps = async () => {

pages/team.tsx

@@ -4,8 +4,10 @@ import Head from 'next/head'
 import Nav from '../components/nav'
 import Footer from '../components/footer'
 import Bio from '../components/bio'
+import BoardBox from '../components/boardbio'
 import ForceTheme from '../components/force-theme'
 import { fetchTeam } from './api/team'
+import Link from 'next/link'
 
 const CommunityTeamBox = ({ title, children }) => {
   return (
@@ -22,7 +24,7 @@ const CommunityTeamBox = ({ title, children }) => {
         <Text
           variant="headline"
           as="h4"
-          sx={{ textAlign: 'center', fontSize: 3 }}
+          sx={{ textAlign: 'center', fontSize: 4 }}
         >
           {title}
         </Text>
@@ -40,6 +42,9 @@ const CommunityTeamBox = ({ title, children }) => {
 }
 
 export default function Team({ team }) {
+  // Spacing between major team section boxes
+  const BOX_SPACING = 5
+
   return (
     <>
       <Box as="main" key="main">
@@ -82,156 +87,64 @@ export default function Team({ team }) {
         </Box>
         <Box bg="#f9f9fa" py={4}>
           <Container>
-            <Flex
+            <Box sx={{
-              sx={{
+                mb: BOX_SPACING
-                bg: 'rgb(51 142 218 / 40%)',
+              }}>
-                p: 3,
+            <Text
-                borderRadius: '20px',
-                mb: 3,
-                gap: 3,
-                flexWrap: ['wrap', null, null, 'nowrap']
-              }}
-            >
-              <Text
                 variant="headline"
+                mt={2}
+                mb={3}
                 as="h3"
-                sx={{
+                sx={{ textAlign: 'center', fontSize: 5 }}
-                  textAlign: 'center',
-                  fontSize: 3,
-                  writingMode: [null, null, null, 'vertical-rl'],
-                  mr: [0, 0, 0, 1],
-                  transform: [null, null, null, 'rotate(180deg)'],
-                  width: ['100%', null, null, 'fit-content'],
-                  my: ['0px!important', '0px!important', '0px!important', 3]
-                }}
               >
                 Board & Advisors
               </Text>
-              <Box sx={{ flexGrow: 1 }}>
+            <Grid columns={[1, null, 2]} gap={5} mb={4}>
-                <Grid columns={[1, null, 2]} gap={2} mb={2}>
+            <BoardBox
-                  <Bio
+              img="/team/zach.jpg"
-                    img="/team/zach.jpg"
+              name="Zach Latta"
-                    name="Zach Latta"
+              teamRole="Founder"
-                    teamRole="Founder"
+              text="Zach dropped out of high school after his freshman year to work in the technology industry and had over 5 million people using his software by the time he turned 17. He founded Hack Club to build the program he wish he had in high school and has been awarded the Thiel Fellowship and Forbes 30 Under 30 for his work."
-                    text="Zach dropped out of high school after his freshman year to work in the technology industry and had over 5 million people using his software by the time he turned 17. He founded Hack Club to build the program he wish he had in high school and has been awarded the Thiel Fellowship and Forbes 30 Under 30 for his work."
+              email="zach"
-                    pronouns="he/him"
+            />
-                    email="zach"
+            <BoardBox 
-                  />
+              img="/team/christina.jpg"
-                  <Bio
+              name="Christina Asquith"
-                    img="/team/christina.jpg"
+              teamRole="Co-Founder and COO"
-                    name="Christina Asquith"
+              text="With more than a decade of experience in starting and leading organizations, Christina has built global teams and raised millions of dollars. She has 20 years experience as a journalist, including reporting for The New York Times from Iraq. She has an MA in education, and taught as a public school teacher in 2000, which inspired her book “The Emergency Teacher.”"
-                    teamRole="Co-founder and COO"
+              email="christina"
-                    text="With more than a decade of experience in starting and leading organizations, Christina has built global teams and raised millions of dollars. She has 20 years experience as a journalist, including reporting for The New York Times from Iraq. She has an MA in education, and taught as a public school teacher in 2000, which inspired her book “The Emergency Teacher.”"
+            />
-                    pronouns="she/her"
-                    email="christina"
-                  />
-                </Grid>
-                <Grid columns={[1, null, 3]} gap={2}>
-                  <Bio
-                    img="https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg"
-                    name="Tom Preston-Werner"
-                    teamRole={<>Board Member</>}
-                    subrole="Co-Founder, GitHub"
-                    pronouns="he/him"
-                    href="https://github.com/mojombo"
-                  />
-                  <Bio
-                    img="https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75"
-                    name="Quinn Slack"
-                    teamRole={<>Board Member</>}
-                    subrole="CEO, Sourcegraph"
-                    pronouns="he/him"
-                    href="https://github.com/sqs"
-                  />
-                  <Bio
-                    img="https://media.licdn.com/dms/image/C5603AQFum8zxW-IEEA/profile-displayphoto-shrink_800_800/0/1517058384850?e=2147483647&v=beta&t=-oM8no3Zc7xUzCDBsHxajD_joBkQi8Ge5iPaeF5p0gM"
-                    name="John Abele"
-                    teamRole={<>Board Advisor</>}
-                    href="https://en.wikipedia.org/wiki/John_Abele"
-                    subrole="Founder, Boston Scientific"
-                    pronouns="he/him"
-                  />
-                </Grid>
-              </Box>
-            </Flex>
-            <Grid columns={[1, null, 2]} gap={3}>
-              <Box>
-                <Box
-                  sx={{
-                    bg: 'rgb(51 214 166 / 40%)',
-                    p: 3,
-                    borderRadius: '20px'
-                  }}
-                >
-                  <Text
-                    variant="headline"
-                    mt={2}
-                    mb={3}
-                    as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
-                  >
-                    Hacker Resources Team
-                  </Text>
-                  <Grid columns={[1, null, 2]} gap={2}>
-                    {team.current
-                      ?.filter(member => member.department === 'HQ')
-                      .map(member => (
-                        <Bio
-                          img={member.avatar}
-                          name={member.name}
-                          teamRole={member.role}
-                          text={member.bio}
-                          pronouns={member.pronouns}
-                          email={member.email}
-                          href={member.website}
-                          key={member.name}
-                        />
-                      ))}
-                  </Grid>
-                </Box>
-              </Box>
-              <Box>
-                <Box
-                  sx={{
-                    bg: 'rgb(236 55 80 / 40%)',
-                    p: 3,
-                    borderRadius: '20px'
-                  }}
-                >
-                  <Text
-                    variant="headline"
-                    mt={2}
-                    mb={3}
-                    as="h3"
-                    sx={{ textAlign: 'center', fontSize: 4 }}
-                  >
-                    HCB Team
-                  </Text>
-                  <Grid columns={[1, null, 2]} gap={2}>
-                    {team.current
-                      ?.filter(member => member.department === 'HCB')
-                      .map(member => (
-                        <Bio
-                          img={member.avatar}
-                          name={member.name}
-                          teamRole={member.role}
-                          text={member.bio}
-                          pronouns={member.pronouns}
-                          email={member.email}
-                          href={member.website}
-                          key={member.name}
-                        />
-                      ))}
-                  </Grid>
-                </Box>
-              </Box>
             </Grid>
+            <Grid columns={[1, null, 3]} gap={4} mb={4}>
+            <BoardBox 
+                img="https://i.ibb.co/gMVMqJzt/2026-01-27-0io-Kleki.jpg"
+                name="Tom Preston-Werner"
+                teamRole={<>Board Member</>}
+                subrole="Co-Founder, GitHub"
+                href="https://github.com/mojombo"
+              />
+              <BoardBox 
+                img="https://i.ibb.co/qMCYrJn8/sqs.jpg"
+                name="Quinn Slack"
+                teamRole={<>Board Member</>}
+                subrole="Co-Founder and CEO, AMP"
+                href="https://github.com/sqs"
+              />
+              <BoardBox 
+                img="https://i.ibb.co/0pGTSmks/2026-01-27-0il-Kleki.png"
+                name="John Abele"
+                teamRole={<>Board Advisor</>}
+                href="https://en.wikipedia.org/wiki/John_Abele"
+                subrole="Founder, Boston Scientific"
+              />
+              </Grid>
+            </Box>
             <Box
               sx={{
-                bg: 'rgb(166 51 214 / 40%)',
+                bg: '#afcfee',
                 p: 3,
                 borderRadius: '20px',
-                mt: 3
+                mb: BOX_SPACING
               }}
             >
               <Text
@@ -239,13 +152,193 @@ export default function Team({ team }) {
                 mt={2}
                 mb={3}
                 as="h3"
-                sx={{ textAlign: 'center', fontSize: 4 }}
+                sx={{ textAlign: 'center', fontSize: 5 }}
+              >
+                Hacker Resources Team
+              </Text>
+              {team.current?.filter(member => member.department === 'HQ' && member.staff).length > 0 && (
+                <>
+                  <Text
+                    variant="headline"
+                    mt={2}
+                    mb={2}
+                    as="h4"
+                    sx={{ fontSize: 3 }}
+                  >
+                    Staff:
+                  </Text>
+                  <Grid columns={[1, null, 2, 3]} gap={3}>
+                    {team.current
+                      ?.filter(member => member.department === 'HQ' && member.staff)
+                      .map(member => (
+                        <Bio
+                          img={member.avatar}
+                          name={member.name}
+                          teamRole={member.role}
+                          text={member.bio}
+                          pronouns={member.pronouns}
+                          email={member.email}
+                          href={member.website}
+                          key={member.name}
+                        />
+                      ))}
+                  </Grid>
+                </>
+              )}
+              {team.current?.filter(member => member.department === 'HQ' && member.gapyear).length > 0 && (
+                <>
+                  <Text
+                    variant="headline"
+                    mt={3}
+                    mb={2}
+                    as="h4"
+                    sx={{ fontSize: 3 }}
+                  >
+                    2025-2026 Gap Years:
+                  </Text>
+                  <Grid columns={[1, null, 2, 3]} gap={3}>
+                    {team.current
+                      ?.filter(member => member.department === 'HQ' && member.gapyear)
+                      .map(member => (
+                        <Bio
+                          img={member.avatar}
+                          name={member.name}
+                          teamRole={member.role}
+                          text={member.bio}
+                          pronouns={member.pronouns}
+                          email={member.email}
+                          href={member.website}
+                          key={member.name}
+                        />
+                      ))}
+                  </Grid>
+                </>
+              )}
+              {team.current?.filter(member => member.department === 'HQ' && !member.gapyear && !member.staff).length > 0 && (
+                <>
+                  <Text
+                    variant="headline"
+                    mt={3}
+                    mb={2}
+                    as="h4"
+                    sx={{ fontSize: 3 }}
+                  >
+                    Teen Contractors:
+                  </Text>
+                  <Grid columns={[1, null, 2, 3]} gap={3}>
+                    {team.current
+                      ?.filter(member => member.department === 'HQ' && !member.gapyear && !member.staff)
+                      .map(member => (
+                        <Bio
+                          img={member.avatar}
+                          name={member.name}
+                          teamRole={member.role}
+                          text={member.bio}
+                          pronouns={member.pronouns}
+                          email={member.email}
+                          href={member.website}
+                          key={member.name}
+                        />
+                      ))}
+                  </Grid>
+                </>
+              )}
+            </Box>
+            <Box
+              sx={{
+                bg: 'rgb(236 55 80 / 40%)',
+                p: 3,
+                borderRadius: '20px',
+                mb: BOX_SPACING
+              }}
+            >
+              <Text
+                variant="headline"
+                mt={2}
+                mb={3}
+                as="h3"
+                sx={{ textAlign: 'center', fontSize: 5 }}
+              >
+                HCB Team
+              </Text>
+              {team.current?.filter(member => member.department === 'HCB' && member.staff).length > 0 && (
+                <>
+                  <Text
+                    variant="headline"
+                    mt={2}
+                    mb={2}
+                    as="h4"
+                    sx={{ fontSize: 3 }}
+                  >
+                    Staff:
+                  </Text>
+                  <Grid columns={[1, null, 2, 3]} gap={3}>
+                    {team.current
+                      ?.filter(member => member.department === 'HCB' && member.staff)
+                      .map(member => (
+                        <Bio
+                          img={member.avatar}
+                          name={member.name}
+                          teamRole={member.role}
+                          text={member.bio}
+                          pronouns={member.pronouns}
+                          email={member.email}
+                          href={member.website}
+                          key={member.name}
+                        />
+                      ))}
+                  </Grid>
+                </>
+              )}
+              {team.current?.filter(member => member.department === 'HCB' && !member.staff).length > 0 && (
+                <>
+                  <Text
+                    variant="headline"
+                    mt={3}
+                    mb={2}
+                    as="h4"
+                    sx={{ fontSize: 3 }}
+                  >
+                    Contributors:
+                  </Text>
+                  <Grid columns={[1, null, 2, 3]} gap={3}>
+                    {team.current
+                      ?.filter(member => member.department === 'HCB' && !member.staff)
+                      .map(member => (
+                        <Bio
+                          img={member.avatar}
+                          name={member.name}
+                          teamRole={member.role}
+                          text={member.bio}
+                          pronouns={member.pronouns}
+                          email={member.email}
+                          href={member.website}
+                          key={member.name}
+                        />
+                      ))}
+                  </Grid>
+                </>
+              )}
+            </Box>
+            <Box
+              sx={{
+                bg: 'rgb(166 51 214 / 40%)',
+                p: 3,
+                borderRadius: '20px'
+              }}
+            >
+              <Text
+                variant="headline"
+                mt={2}
+                mb={3}
+                as="h3"
+                sx={{ textAlign: 'center', fontSize: 5 }}
               >
                 Community Team
               </Text>
               <Grid columns={[1, null, 2]} gap={3}>
                 <CommunityTeamBox title="Moderation">
-                  <Grid columns={[1, null, 2]} gap={2} m={10}>
+                  <Grid columns={[1, null, 2]} gap={3} m={10}>
                     {team.current
                       ?.filter(member => member.department === 'Moderation')
                       .map(member => (
@@ -263,7 +356,7 @@ export default function Team({ team }) {
                   </Grid>
                 </CommunityTeamBox>
                 <CommunityTeamBox title="Welcomers">
-                  <Grid columns={[1, null, 2]} gap={2} m={10}>
+                  <Grid columns={[1, null, 2]} gap={3} m={10}>
                     {team.current
                       ?.filter(member => member.department === 'Welcoming')
                       .map(member => (
@@ -281,7 +374,7 @@ export default function Team({ team }) {
                   </Grid>
                 </CommunityTeamBox>
                 <CommunityTeamBox title="Virtual Events">
-                  <Grid columns={[1, null, 2]} gap={2} m={10}>
+                  <Grid columns={[1, null, 2]} gap={3} m={10}>
                     {team.current
                       ?.filter(member => member.department === 'Events')
                       .map(member => (
@@ -299,7 +392,7 @@ export default function Team({ team }) {
                   </Grid>
                 </CommunityTeamBox>
                 <CommunityTeamBox title="Newspaper">
-                  <Grid columns={[1, null, 2]} gap={2} m={10}>
+                  <Grid columns={[1, null, 2]} gap={3} m={10}>
                     {team.current
                       ?.filter(member => member.department === 'Newspaper')
                       .map(member => (
@@ -319,46 +412,23 @@ export default function Team({ team }) {
               </Grid>
             </Box>
             <br />
-            <Box sx={{ textAlign: 'center', mt: 100, mb: [3, 4] }}>
+            <Box sx={{ fontWeight: 'bold', textAlign: 'center' }}>
-              <Text
+              <Link href="/acknowledged/">
-                variant="title"
+                <Box sx={{ cursor: 'pointer' }}>
-                color="orange"
+                  <Text
-                sx={{ lineHeight: '1em', fontSize: [4, 5, 6] }}
+                    variant="title"
-                as="h2"
+                    color="orange"
-              >
+                    sx={{ lineHeight: '1em', fontSize: [4, 5, 6], textAlign: 'center', textDecoration: 'underline' }}
-                Acknowledgements
+                    as="h2"
-              </Text>
+                  >
-              <Text
+                    Acknowledgements
-                variant="title"
+                  </Text>
-                color="text"
+                  <Text sx={{ color: 'muted', fontSize: 2, mt: 2 }}>
-                sx={{
+                    Thank you to everyone who helped shape Hack Club into what it is today...
-                  lineHeight: '1.2',
+                  </Text>
-                  fontSize: [1, 3, 4],
+                </Box>
-                  my: [3, 0, 0],
+              </Link>
-                  fontWeight: 400,
-                  maxWidth: '600px',
-                  width: '100%',
-                  margin: 'auto'
-                }}
-                as="h2"
-              >
-                Thank you to everyone who helped shape Hack Club into what it is
-                today...
-              </Text>
             </Box>
-            <Grid columns={[1, null, 2, 4]} gap={2}>
-              {team.acknowledged?.map(member => (
-                <Bio
-                  img={member.avatar}
-                  name={member.name}
-                  teamRole={member.role}
-                  text={member.bio}
-                  pronouns={member.pronouns}
-                  key={member.name}
-                  href={member.website}
-                />
-              ))}
-            </Grid>
           </Container>
         </Box>
       </Box>