Fall 21 Intermediary Changes (for GitHub Edu Newsletter Soft Launch) (#170)

* Import from Alt Home * Update with Leo's OG Copy Changes + Fixes to Ship Page * Change default <a> colour * fixed typos Co-authored-by: leomcelroy <leomcelroy@gmail.com>
2026-04-19 19:45:07 +00:00 · 2021-08-16 09:35:57 +08:00 · 2021-08-16 09:35:57 +08:00 · e7b6f8e093
commit e7b6f8e093
parent f38b5580d3
6 changed files with 310 additions and 151 deletions
--- a/components/announcement.js
+++ b/components/announcement.js
@ -45,7 +45,7 @@ const Announcement = ({
    {iconLeft && (
      <Icon
        glyph={iconLeft}
-        sx={{ mr: [2, 3], color, display: ['none', 'block'] }}
+        sx={{ mr: [2, 3], ml:2, color, display: ['none', 'block'] }}
      />
    )}
    <Text
--- a/components/posts/index.js
+++ b/components/posts/index.js
@ -114,16 +114,14 @@ const Post = ({
              bg: 'sunken',
              gridColumn: attachments.length === 1 ? 'span 2' : null
            },
-            img: { objectFit: 'cover' }
+            img: { objectFit: 'cover', width: '100%' }
          }}
        >
-            {filter(attachments, a => a.type.startsWith('image')).map(img => (
-              <Image
-                key={img.url}
-                alt={img.filename}
-                src={img.thumbnails?.large?.url || img.url}
-                width={img.thumbnails?.large?.width || 1920}
-                height={img.thumbnails?.large?.height || 1080}
+            {filter(attachments, a => ['jpg', 'jpeg', 'png'].includes(a.split('.')[a.split('.').length - 1])).map(img => (
+              <img
+                key={img}
+                alt={img}
+                src={img}
              />
            ))}
        </Grid>
--- a/components/slack.js
+++ b/components/slack.js
@ -0,0 +1,143 @@
+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'
+
+let Highlight = styled(Text)`
+  color: inherit;
+  border-radius: 1em 0 1em 0;
+  background: linear-gradient(
+    -100deg,
+    rgba(250, 247, 133, 0.33),
+    rgba(250, 247, 133, 0.66) 95%,
+    rgba(250, 247, 133, 0.1)
+  );
+`
+Highlight = Highlight.withComponent('mark')
+
+const Content = () => (
+  <Container
+    sx={{
+      textAlign: 'center',
+      zIndex: 999,
+      py: 6,
+      color: 'white',
+      'h2,p': { textShadow: 'text' },
+      textAlign: [null, 'center'],
+      position: 'relative',
+      overflow: 'hidden'
+    }}
+  >
+    <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' }}>
+      Coding is often seen as an isolating activity, whilst one may join a team
+      to play football or a club to play chess, the stereotype of a
+      programmer is a person alone in a dark room. But it doesn't have to be
+      that way, you’ll find some <Highlight>fabulous people to talk</Highlight>{' '}
+      to in our global Slack (Discord-style online groupchat) with 11,000+
+      members, active at all hours. For leaders, you'll be able to connect with
+      other leaders and support one another.
+    </Text>
+    <Button
+      as="a"
+      href="https://hackclub.com/slack/"
+      variant="ctaLg"
+      sx={{
+        background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
+      }}
+    >
+      Join our Slack →
+    </Button>
+  </Container>
+)
+
+const Cover = () => (
+  <Box
+    sx={{
+      position: 'absolute',
+      bottom: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      opacity: 0.825,
+      zIndex: 1
+    }}
+  />
+)
+
+const Static = ({
+  img = 'https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
+  // img="https://cloud-re5hkabx0.vercel.app/2020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
+}) => (
+  <Box
+    as="section"
+    id="slack"
+    sx={{
+      position: 'relative',
+      overflow: 'hidden',
+      backgroundImage: `url(${img})`,
+      backgroundSize: 'cover'
+    }}
+  >
+    <Cover />
+    <Content />
+  </Box>
+)
+
+const Slack = () => {
+  const hasMounted = useHasMounted()
+  const prefersMotion = usePrefersMotion()
+  if (hasMounted && prefersMotion) {
+    return (
+      <Box
+        as="section"
+        id="slack"
+        sx={{ overflow: 'hidden', position: 'relative' }}
+      >
+        <Box
+          as="video"
+          autoPlay
+          muted
+          loop
+          playsInline
+          poster="https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
+          duration={2000}
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            height: '100%',
+            zIndex: -1
+          }}
+        >
+          <source
+            src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.hecv.mp4?v=1590780967658"
+            type="video/mp4; codecs=hevc"
+          />
+          <source
+            src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.webm?v=1590781698834"
+            type="video/webm; codecs=vp9,opus"
+          />
+          <source
+            src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.mov?v=1590781491717"
+            type="video/quicktime"
+          />
+        </Box>
+        <Cover />
+        <Content />
+      </Box>
+    )
+  } else {
+    return <Static />
+  }
+}
+
+export default Slack
--- a/pages/index.js
+++ b/pages/index.js
@ -23,6 +23,9 @@ 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 GoldenTrainImgFile from '../public/home/golden-train.png'
+import Slack from '../components/slack'

 import Announcement from '../components/announcement'
 // import { timeSince } from '../lib/dates'
@ -39,7 +42,59 @@ let Highlight = styled(Text)`
 `
 Highlight = Highlight.withComponent('mark')

-const Feature = ({ icon, color, name, desc, children, ...props }) => (
+const Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
+  <Box
+    sx={{
+      display: 'grid',
+      gridGap: [0, 4],
+      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
+    }}
+  >
+    {children || (
+      <Box
+        as="span"
+        sx={{
+          width: 'fit-content',
+          bg: color,
+          borderRadius: 18,
+          lineHeight: 0,
+          p: 2,
+          mb: 1,
+          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)'
+        }}
+      >
+        <Icon glyph={icon} size={48} />
+      </Box>
+    )}
+    <Box>
+      <Heading as="h3" variant="headline" mb={2} mt={0}>
+        {name}
+      </Heading>
+      <Text
+        as="p"
+        variant="subtitle"
+        sx={{ mt: 0, pb: 2, a: { variant: 'styles.a', color: 'blue' } }}
+      >
+        {desc}
+      </Text>
+    </Box>
+  </Box>
+)
+
+const Stage = ({ icon, color, name, desc, children, ...props }) => (
  <Box {...props}>
    {children || (
      <Box
@ -111,15 +166,17 @@ const Page = () => (
        alt="Hack Clubbers gather at the Flagship 2019 conference"
        priority
      />
-      
-          {/*<Announcement
-          copy="It's almost back to school!"
-          caption="Exciting new things for our clubs program coming soon..."
+
+     { 
+       /* <Announcement
+          copy="Applications are now open"
+          caption="Apply now to bring a Hack Club to your community this fall!"
          href="https://apply.hackclub.com"
          iconLeft="clubs"
-          color="blue"
-        />*/}
-      
+          color="primary"
+        /> */
+      }
+
      <SlideDown duration={768}>
        <Heading
          as="h1"
@ -192,7 +249,7 @@ const Page = () => (
          The rundown
        </Text>
        <Heading as="h2" variant="title">
-          High school clubs for{' '}
+          Clubs discovering the{' '}
          <Text
            as="span"
            sx={{
@ -204,18 +261,19 @@ const Page = () => (
              bg: 'rgb(255, 212, 64)'
            }}
          >
-            creative coding
+            joy of code
          </Text>
          .
        </Heading>
        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus' }}>
-          Hack Clubs at high schools meet weekly (this year, via Zoom),
-          typically for 1.5hrs after school. As a club leader, you get members
-          (mostly beginners) started on something to learn/create, then members
-          work at their own pace, building websites, apps, & games, and
-          presenting them at the end.
+          Hack Clubs typically meet for 1.5 hours 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
+          beginners) started on something to learn/create, then members work at
+          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, 4]}>
+        <Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 3]}>
          <Photo
            src="https://dl.airtable.com/.attachmentThumbnails/904cf56ceac6b0921eceae02958dcd29/5851864a"
            alt="Summer Creek Hack Club meeting, February 2020"
@ -247,7 +305,7 @@ const Page = () => (
            </Text>
            <Text as="p" variant="subtitle">
              <strong>
-                A group of students—many beginners—gather to start coding.
+                A group of teens, many beginners, gather to start coding.
              </strong>
              The leader (that’s you!) presents for a few minutes, getting the
              group started building something new.
@ -257,7 +315,8 @@ const Page = () => (
            </Text>
            <Text as="p" variant="subtitle">
              <strong>Everyone gets hacking, individually.</strong> Not hacking
-              bank accounts—being creative & making something awesome with code.
+              bank accounts, being creative and{' '}
+              <NextLink href="/ship">making something awesome</NextLink>.
            </Text>
            <Text as="span" color="blue">
              3
@ -289,8 +348,10 @@ const Page = () => (
              Hack the Fog
            </a>
            , 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{' '}
+            <a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
+              Hack Camp
+            </a>
+            , and compete in events like the{' '}
            <a href="http://www.congressionalappchallenge.us">
              Congressional App Challenge
            </a>
@ -312,24 +373,24 @@ const Page = () => (
      }}
    >
      <BGImg
-        gradient="linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.625))"
-        src="https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%2F2020-05-16_screenshot.jpeg?v=1589633885855"
+        src={GoldenTrainImgFile}
+        placeholder="blur"
        width={2048}
        height={1170}
-        alt="Hack Clubbers gather at the Elon Musk AMA in 2020"
+        alt="Hack Clubbers on the 2021 Hacker Zephyr"
      />
      <Container>
        <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
-          ~ Philosophy ~
+          ~ The Hackerverse ~
        </Text>
        <Heading as="h2" variant="title">
          By the students, for the students.
        </Heading>
        <Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
-          Learning to code is uniquely like gaining a superpower—turning you
-          from a consumer of technology into a creator. So it shouldn’t be
-          taught like a class—it should be a creative, inclusive space. To
-          foster this environment,{' '}
+          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,{' '}
          <Highlight>every&nbsp;Hack&nbsp;Club is student-led</Highlight> &
          members make self-directed projects.
        </Text>
@ -376,82 +437,39 @@ const Page = () => (
          </Heading>
        </Box>
        <Grid
-          columns={[null, 2]}
-          gap={[2, 4]}
+          columns={[null, 1]}
+          gap={[2, 3]}
          sx={{ alignItems: 'end', span: { color: 'white' } }}
        >
          <Feature
-            icon="sam"
-            color="blue"
-            name="Free Zoom Pro"
-            desc="24/7 access to Zoom Pro enabled meeting rooms for your club (that means no time limit)."
-          />
-          <Feature
-            name="Stickers"
+            icon="slack-fill"
+            color="#5d114c"
+            name="Chats with 100s of club leaders"
            desc={
              <>
-                Get{' '}
-                <Link href="/stickers">
-                  <a>amazing stickers </a>
-                </Link>{' '}
-                for marketing your club shipped directly to you & your
-                club members.
+                In our{' '}
+                <Link href="/slack" passHref>
+                  <a>Slack community</a>
+                </Link>
+                , you’ll join a private space for Hack&nbsp;Club leaders to ask
+                questions & chat, share projects, & attend weekly live events.
              </>
            }
-            sx={{
-              img: { mr: 4, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))' }
-            }}
-          >
-            <Image
-              src="https://hackclub.com/stickers/macintosh.svg"
-              alt="Macintosh sticker"
-              sx={{
-                transform: 'rotate(-12deg)',
-                width: '4.5rem',
-                height: '6rem'
-              }}
-            />
-            <Image
-              src="https://hackclub.com/stickers/2020_progress.png"
-              alt="Pride sticker"
-              sx={{
-                transform: 'rotate(3deg)',
-                width: ['4rem', '6rem'],
-                height: ['4rem', '6rem'],
-                borderRadius: 'extra'
-              }}
-            />
-            <Image
-              src="https://hackclub.com/stickers/enjoy.svg"
-              alt="Enjoy Hack Club Coca-Cola sticker"
-              sx={{
-                transform: 'rotate(-12deg)',
-                width: ['6rem', '7.5rem'],
-                height: ['4rem', '5rem']
-              }}
-            />
-          </Feature>
+          />
          <Feature
            icon="docs"
            color="red"
-            name="Curriculum"
+            name="Meeting content"
            desc={
              <>
                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.
+                <a href="https://workshops.hackclub.com">workshops</a> (3 years’
+                worth!) that guide your club members through making fun,
+                creative projects.
              </>
            }
-          >
-            <Photo
-              src="/home/flagship_megan.png"
-              alt="Megan presenting a workshop at Flagship 2019"
-              width={980}
-              height={653}
-              sx={{ maxWidth: [null, 332] }}
-            />
-          </Feature>
-          <Feature
+          ></Feature>
+          {/* <Feature
            name="A comprehensive leader guide"
            desc={
              <>
@ -468,37 +486,25 @@ const Page = () => (
              height={653}
              sx={{ maxWidth: [null, 332] }}
            />
-          </Feature>
+          </Feature> */}
          <Feature
-            icon="slack-fill"
-            color="#5d114c"
-            name="Talk to 100s of club leaders"
+            name="Stickers"
            desc={
              <>
-                In our{' '}
-                <Link href="/slack" passHref>
-                  <a>Slack community</a>
+                Get{' '}
+                <Link href="/stickers">
+                  <a>amazing stickers </a>
                </Link>{' '}
-                of 10k+ teen hackers, you’ll join a private space for
-                Hack&nbsp;Club leaders to ask questions & chat, share projects,
-                & attend weekly live events.
+                for marketing your club shipped directly to you & your club
+                members.
              </>
            }
-          />
-          <Feature
-            icon="purse"
-            color="orange"
-            name="A basket of free tools"
-            desc={
-              <>
-                Free subscriptions to Notion Pro, Figma Pro, repl.it and more
-                for running a great club.
-              </>
-            }
-          />
+            color="green"
+            icon="sticker"
+          ></Feature>
          <Feature
            icon="bank-account"
-            color="muted"
+            color="black"
            name="A nonprofit bank account"
            desc={
              <>
@ -507,14 +513,7 @@ const Page = () => (
                Fundraise, accept donations, buy things!
              </>
            }
-          >
-            <Image
-              src="/home/hackClubBank.png"
-              alt="Screenshot of Hack Club Bank on a MacBook"
-              width={256}
-              loading="lazy"
-            />
-          </Feature>
+          />
          <Feature
            name="Weekly events"
            desc={
@ -535,15 +534,26 @@ const Page = () => (
                alike every week.
              </>
            }
-          >
-            <Photo
-              src="/home/workshops.jpg"
-              alt="Students going wild on a Zoom call"
-              width={768}
-              height={463}
-              sx={{ maxWidth: [null, 332] }}
-            />
-          </Feature>
+            icon="event-code"
+            color="blue"
+          ></Feature>
+          <Feature
+            icon="purse"
+            color="orange"
+            name="A basket of free tools"
+            desc={
+              <>
+                Free subscriptions to Notion Pro, Figma Pro, repl.it and more
+                for running a great club.
+              </>
+            }
+          />
+          {/* <Feature
+            icon="sam"
+            color="blue"
+            name="Free Zoom Pro"
+            desc="24/7 access to Zoom Pro enabled meeting rooms for your club (that means no time limit)."
+          /> */}
        </Grid>
        <Feature
          icon="welcome"
@ -566,8 +576,8 @@ const Page = () => (
            alignItems: 'start',
            justifyContent: 'start',
            bg: 'rgba(255,88,88,0.125)',
-            mt: [4, 5],
            p: [3, 4],
+            mt: [3, 4],
            borderRadius: 'extra',
            span: { transform: 'none', width: 'min-intrinsic' },
            svg: { color: 'white' }
@ -575,6 +585,7 @@ const Page = () => (
        />
      </Container>
    </Box>
+    <Slack />
    <Box bg="snow" color="black" py={[5, 6]}>
      <Container sx={{ textAlign: ['left', 'center'] }}>
        <Text as="p" variant="eyebrow">
@ -589,7 +600,7 @@ const Page = () => (
              px: 2,
              ml: [-2, 0],
              whiteSpace: 'nowrap',
-              color: '#fb558e',
+              color: 'white',
              bg: '#6f31b7'
            }}
          >
@ -626,11 +637,12 @@ const Page = () => (
            variant="interactive"
            sx={{
              background:
-                'linear-gradient(32deg, rgba(24, 218, 255, 0.9) 0%, rgba(91, 255, 205, 0.9) 100%)',
-              color: '#095365'
+                '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)' }
            }}
          >
-            <Feature
+            <Stage
              icon="send"
              color="white"
              name="1. Application"
@ -640,12 +652,12 @@ const Page = () => (
          <Card
            sx={{
              background:
-                'linear-gradient(to bottom, rgba(255, 212, 64, 0.9) 0%, rgba(255, 88, 88, 0.9) 100%)',
-              color: '#5d114c',
-              svg: { color: 'rgb(255,88,88)' }
+                '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)' }
            }}
          >
-            <Feature
+            <Stage
              icon="emoji"
              color="white"
              name="2. Onboarding call"
@ -659,7 +671,7 @@ const Page = () => (
              svg: { color: '#fb558e' }
            }}
          >
-            <Feature
+            <Stage
              icon="event-check"
              color="white"
              name="3. First meeting"
@ -697,9 +709,15 @@ const Page = () => (
        width={2544}
        height={2048}
        gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
-        src="/home/footer.png"
+        src={FooterImgFile}
+        placeholder="blur"
        alt="Globe with hundreds of Hack Clubs"
      />
+      <style>
+        {`a{
+          color: #338eda
+        }`}
+      </style>
    </Footer>
  </>
 )
--- a/pages/ship.js
+++ b/pages/ship.js
@ -159,8 +159,8 @@ export const getStaticProps = async () => {
    .then(r => r.json())
    .then(posts =>
      filter(posts, p =>
-        ['image/jpg', 'image/jpeg', 'image/png'].includes(
-          p.attachments?.[0]?.type
+        ['jpg', 'jpeg', 'png'].includes(
+          p.attachments[0]?.split('.')[p.attachments[0]?.split('.').length - 1]
        )
      )
    )
--- a/public/home/golden-train.png
+++ b/public/home/golden-train.png