Redesign Slack page (#37)

* Redesign Slack page * Fix homepage * Add subtle arrow animation * Continue polishing
2026-05-01 10:45:23 +00:00 · 2020-07-25 23:18:49 -04:00
parent 64e4b7a9c3
commit eed9d5eb2d
10 changed files with 442 additions and 129 deletions
--- a/components/home/announcement.js
+++ b/components/home/announcement.js
@@ -1,6 +1,6 @@
 import { Card, Text } from 'theme-ui'
 import { keyframes } from '@emotion/core'
-import Icon from '../icon'
+import Icon from './icon'

 const unfold = keyframes({
  from: { transform: 'scaleY(0)' },
@@ -13,6 +13,7 @@ const Announcement = ({
  iconLeft,
  iconRight = 'info',
  color = 'accent',
+  sx = {},
  ...props
 }) => (
  <Card
@@ -36,7 +37,8 @@ const Announcement = ({
      '@media (prefers-reduced-motion: no-preference)': {
        animation: `${unfold} 0.5s ease-out`
      },
-      svg: { flexShrink: 'none' }
+      svg: { flexShrink: 'none' },
+      ...sx
    }}
    {...props}
  >
--- a/components/slack/header.js
+++ b/components/slack/header.js
@@ -0,0 +1,141 @@
+import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
+import SlideUp from '../slide-up'
+import Announcement from '../announcement'
+import Icon from '../icon'
+import Stat from '../stat'
+import JoinForm from './join-form'
+import usePrefersMotion from '../../lib/use-prefers-motion'
+import useHasMounted from '../../lib/use-has-mounted'
+
+const Content = () => (
+  <Grid
+    columns={[null, '2fr 3fr']}
+    gap={4}
+    pt={[5, 6]}
+    pb={[4, 5]}
+    variant="layout.container"
+  >
+    <Box
+      sx={{
+        position: 'relative',
+        zIndex: 1,
+        textShadow: 'text',
+        textAlign: ['center', 'left']
+      }}
+    >
+      <Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
+        Hack Club
+      </Text>
+      <Heading
+        as="h1"
+        variant="title"
+        sx={{
+          color: 'white',
+          fontSize: [7, 8, 9],
+          lineHeight: 'limit',
+          mb: [3, 4]
+        }}
+      >
+        Slack
+      </Heading>
+      <Button
+        as="a"
+        href="https://hackclub.slack.com"
+        variant="outline"
+        color="smoke"
+      >
+        <Icon glyph="door-enter" size={24} />
+        Sign back in
+      </Button>
+    </Box>
+    <SlideUp>
+      <JoinForm sx={{ variant: 'cards.translucent' }} />
+    </SlideUp>
+  </Grid>
+)
+
+const Cover = () => (
+  <Box
+    sx={{
+      position: 'absolute',
+      bottom: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+      backgroundImage: t => t.util.gx('cyan', 'purple'),
+      opacity: 0.625,
+      zIndex: 0
+    }}
+  />
+)
+
+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/components/slack/join-form.js
+++ b/components/slack/join-form.js
--- a/components/slack/slack-events.js
+++ b/components/slack/slack-events.js
@@ -30,8 +30,8 @@ const whitelistedChannels = new Set(
  us-politics welcome westborough wip workshops writing
 `
    .split(/\s+/gi)
-    .filter((i) => i.length > 0)
-    .map((i) => '#' + i)
+    .filter(i => i.length > 0)
+    .map(i => '#' + i)
 )

 const generateEvent = () => ({
@@ -46,7 +46,7 @@ const SlackEvents = ({ sx, ...props }) => {
  const [events, setEvents] = useState([])
  useEffect(() => {
    setEvents([generateEvent(), generateEvent()])
-    setTimeout(() => setEvents((e) => [generateEvent(), ...e]), 5000)
+    setTimeout(() => setEvents(e => [generateEvent(), ...e]), 5000)
  }, [])

  const STATIC_OPTIONS = useMemo(
@@ -66,15 +66,14 @@ const SlackEvents = ({ sx, ...props }) => {
    if (e) {
      try {
        e = JSON.parse(e)
-        console.log(e)
        if (
-          Object.keys(types).includes(e.type)
-          && whitelistedChannels.has(e.channel)
+          Object.keys(types).includes(e.type) &&
+          whitelistedChannels.has(e.channel)
        ) {
          e.type = types[e.type]
          e.color = sample(colors)
          if (e.type === 'reaction') e.emoji = sample(emoji)
-          setEvents((prev) => [e, ...prev])
+          setEvents(prev => [e, ...prev])
        }
      } catch (err) {
        true
@@ -111,7 +110,7 @@ const SlackEvents = ({ sx, ...props }) => {
          right: 0,
          display: 'block',
          height: '2em',
-          backgroundImage: (theme) =>
+          backgroundImage: theme =>
            `linear-gradient(rgba(255,255,255,0), ${theme.colors.white})`
        },
        div: { mb: [1, 2] },
@@ -136,7 +135,7 @@ const SlackEvents = ({ sx, ...props }) => {
            )}
            {type === 'reaction' && (
              <>
-                Reaction in <Channel {...channel} />: {emoji}
+                <Channel {...channel} /> reaction: {emoji}
              </>
            )}
          </>
--- a/components/stat.js
+++ b/components/stat.js
@@ -18,11 +18,6 @@ const Stat = ({
    sx={{
      fontFamily: 'heading',
      flexDirection: reversed ? 'column-reverse' : 'column',
-      gridColumn: lg
-        ? ['initial', 'span 1']
-        : half
-          ? 'span 1 !important'
-          : 'initial',
      lineHeight: 1,
      ...props.sx
    }}
--- a/lib/use-has-mounted.js
+++ b/lib/use-has-mounted.js
@@ -0,0 +1,12 @@
+// Full credit to https://joshwcomeau.com/snippets/react-hooks/use-has-mounted
+import React from 'react'
+
+function useHasMounted() {
+  const [hasMounted, setHasMounted] = React.useState(false)
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+  return hasMounted
+}
+
+export default useHasMounted
--- a/lib/use-prefers-motion.js
+++ b/lib/use-prefers-motion.js
@@ -0,0 +1,30 @@
+// Inspired by https://joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion
+import React from 'react'
+
+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
+}
+
+function usePrefersMotion() {
+  const [prefersMotion, setPrefersMotion] = React.useState(getInitialState)
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(QUERY)
+    const listener = event => {
+      setPrefersMotion(!event.matches)
+    }
+    mediaQueryList.addListener(listener)
+    return () => {
+      mediaQueryList.removeListener(listener)
+    }
+  }, [])
+  return prefersMotion
+}
+
+export default usePrefersMotion
--- a/pages/index.js
+++ b/pages/index.js
@@ -17,9 +17,9 @@ import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
 import Footer from '../components/footer'
-import Announcement from '../components/home/announcement'
-import SlackEvents from '../components/home/slack-events'
-import JoinForm from '../components/home/join-form'
+// import Announcement from '../components/announcement'
+import SlackEvents from '../components/slack/slack-events'
+import JoinForm from '../components/slack/join-form'
 // import { timeSince } from '../lib/dates'

 const slide = keyframes({
--- a/pages/night.js
+++ b/pages/night.js
@@ -42,7 +42,7 @@ export default () => (
      as={Head}
      title="Hack Night"
      description="Every Saturday night, the Hack Club community gathers on Zoom to show off what we’re working on & hang out."
-      image="https://cloud-lomgv8fgv.vercel.app/2020-07-24_night.jpeg"
+      image="https://cloud-9h1w4lj4d.vercel.app/2020-07-25_52g0nw40p2b00dh39mt93xq5ubku6yaj.jpeg"
    />
    <Nav color={color} dark />
    <Box
--- a/pages/slack.js
+++ b/pages/slack.js
@@ -14,11 +14,17 @@ import NextLink from 'next/link'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
 import ForceTheme from '../components/force-theme'
+import Icon from '../components/icon'
+import Stat from '../components/stat'
 import Footer from '../components/footer'
 import SlideUp from '../components/slide-up'
-import SlackEvents from '../components/home/slack-events'
-import Announcement from '../components/home/announcement'
-import JoinForm from '../components/home/join-form'
+import Header from '../components/slack/header'
+import SlackEvents from '../components/slack/slack-events'
+
+const zoomSlide = keyframes({
+  from: { backgroundPosition: '-32px bottom' },
+  to: { backgroundPosition: '32px bottom' }
+})

 export default () => (
  <>
@@ -26,95 +32,91 @@ export default () => (
      as={Head}
      name="Join our Slack"
      description="Hack Club’s Slack is a community of 10k+ high school hackers around the world. Chat, meet new friends, code together, share your work."
-      image="https://hackclub.com/cards/community.png"
+      image="https://cloud-ls9rh3hok.vercel.app/2020-07-25_d2dd4egb1th5k71w4uj0abbfkvvtnc01.jpeg"
    />
    <ForceTheme theme="light" />
    <Nav />
-    <Box
-      as="header"
-      sx={{
-        bg: 'dark',
-        pt: [5, 6],
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundImage:
-          'url(https://assets.hackclub.com/log/2020-05-24_meme_team.jpg)',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-        '@media (hover: hover)': { backgroundAttachment: 'fixed' }
-      }}
-    >
-      <Container pt={[3, 4]} pb={[5, 6]}>
-        <Announcement
-          copy="Already have an account?"
-          href="https://hackclub.slack.com"
-          iconRight="door-enter"
-          color="red"
-        />
-        <Heading
-          as="h1"
-          variant="title"
-          sx={{
-            mt: 0,
-            mb: [3, 4, 5],
-            fontSize: [6, 7, 8],
-            textAlign: 'center',
-            color: 'white',
-            lineHeight: [0.875, 0.8],
-            position: 'relative',
-            zIndex: 1,
-            textShadow: 'text'
-          }}
-        >
-          Hack Club Slack
-        </Heading>
-        <SlideUp>
-          <JoinForm sx={{ variant: 'cards.translucent' }} />
-        </SlideUp>
-      </Container>
-    </Box>
+    <Header />
    <Container sx={{ py: [4, 5] }}>
-      <Heading
-        as="h2"
-        variant="title"
-        sx={{ color: 'black', maxWidth: 'copyUltra' }}
+      <Grid
+        columns={[2, 5]}
+        gap={2}
+        sx={{ maxWidth: 'copyPlus', alignItems: 'end' }}
+      >
+        <Stat
+          value="10k+"
+          label="total members"
+          color="red"
+          lg
+          sx={{ gridColumn: 'span 2' }}
+        />
+        <Stat value={6} label="continents" />
+        <Stat value="1M+" label="messages/yr" />
+      </Grid>
+      <Text
+        variant="subtitle"
+        as="p"
+        sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3, mb: [3, 4] }}
      >
-        A{' '}
-        <Text as="span" color="red">
-          24/7
-        </Text>{' '}
-        high schooler community. Get coding help, share projects, meet your
-        closest friends.
-      </Heading>
-      <Text as="p" sx={{ maxWidth: 'copy', fontSize: [2, 3], mt: 3 }}>
        Have a coding question? Looking for project feedback? You’ll find some
        fabulous people to talk to in our global Slack (Discord-style online
        groupchat) with 10,000+ members, active at all hours.
      </Text>
+      <Heading
+        as="h2"
+        variant="title"
+        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 }}
+      >
+        Across 1,000 public channels, find the community for your favorite
+        programming language, ask for advice, or just hang out.
+      </Text>
      <Grid
-        columns={[2, 15]}
+        columns={[2, 9, 15]}
        gap={3}
        sx={{
          py: [3, 4],
          h3: { my: 0 },
          '> div': {
            px: [2, 3],
-            py: [4, 4],
+            py: 4,
            display: 'flex',
            flexDirection: 'column',
-            gridColumn: ['span 1', 'span 3'],
-            position: 'relative'
+            justifyContent: 'center',
+            gridColumn: ['span 1', 'span 3']
+          },
+          a: {
+            position: 'relative',
+            ':hover,:focus': {
+              svg: {
+                transform: 'translateX(28px) translateY(-28px)',
+                opacity: 0
+              }
+            }
+          },
+          svg: {
+            position: 'absolute',
+            top: 2,
+            right: 2,
+            fill: 'white',
+            transition: 'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
          },
          h3: {
            variant: 'text.headline',
            color: 'white',
            lineHeight: 'title',
-            my: 0,
+            m: 0,
            '+ p': {
+              mt: 2,
              color: 'white',
              opacity: 0.75,
              fontSize: 2,
-              mt: 1,
              lineHeight: 'caption'
            }
          }
@@ -149,78 +151,65 @@ export default () => (
            variant="interactive"
            sx={{
              gridColumn: ['span 2', 'span 6'],
-              textDecoration: 'none',
              bg: 'blue',
              backgroundImage: t => t.util.gx('cyan', 'blue')
            }}
          >
+            <Icon glyph="external" size={24} />
            <Heading as="h3" variant="headline">
              #ship
            </Heading>
-            <Text as="p">Share your latest projects & get feedback</Text>
+            <Text as="p">Launch your latest projects & get feedback</Text>
          </Card>
        </NextLink>
        <Card
          as="a"
+          href="https://scrapbook.hackclub.com/"
          variant="interactive"
-          href="https://hackclub.com/night/"
          sx={{
            gridColumn: ['span 2', 'span 6'],
-            textDecoration: 'none',
            bg: 'dark',
-            backgroundImage:
-              'url(https://assets.hackclub.com/log/2020-06-29_night.jpg)',
-            backgroundPosition: 'top center',
-            backgroundSize: 'cover',
-            p: { color: 'smoke', fontSize: 2, mt: 1, lineHeight: 'caption' }
+            backgroundImage: t => t.util.gx('yellow', 'orange')
          }}
        >
+          <Icon glyph="external" size={24} />
          <Heading as="h3" variant="headline">
-            #hack-night
+            #scrapbook
          </Heading>
-          <Text as="p">Biweekly mini-hackathon & video call hangout</Text>
+          <Text as="p">A daily diary of project updates</Text>
        </Card>
        <Card bg="cyan">
          <h3>#lounge</h3>
        </Card>
-        <Card bg="orange">
-          <h3>#support</h3>
+        <Card
+          sx={{
+            backgroundImage:
+              'url(https://cloud-dfzi9msk3.vercel.app/2020-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="blue">
+        <Card
+          bg="dark"
+          sx={{ h3: { color: 'green', textShadow: '0 0 4px currentColor' } }}
+        >
          <h3>#code</h3>
        </Card>
        <Card
          bg="red"
          sx={{
-            backgroundImage: ({ colors }) =>
-              `linear-gradient(${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%, #8067C3 83.3333%, #8067C3 100%)`
+            gridColumn: ['span 1 !important', 'span 2 !important'],
+            gridRow: 'span 2 !important',
+            writingMode: 'tb-rl'
          }}
        >
-          <h3>#lgbtq</h3>
-        </Card>
-        <NextLink href="/minecraft" passHref>
-          <Card
-            as="a"
-            variant="interactive"
-            sx={{
-              gridColumn: ['span 2', 'span 6'],
-              textDecoration: 'none',
-              bg: '#759B40',
-              backgroundImage: t => t.util.gx('#759B40', '#4F6728')
-            }}
-          >
-            <Heading as="h3" variant="headline">
-              #minecraft
-            </Heading>
-            <Text as="p">Play on our server, build OSS plugins, compete</Text>
-          </Card>
-        </NextLink>
-        <Card bg="dark">
-          <h3>
-            #photo-
-            <br />
-            graphy
-          </h3>
+          <h3>#confessions</h3>
        </Card>
        <Card
          bg="yellow"
@@ -229,13 +218,158 @@ export default () => (
              'url(https://assets.hackclub.com/log/2020-06-29_dog.jpg)',
            backgroundSize: '100%',
            backgroundPosition: 'center',
-            textShadow: 'text'
+            textShadow: 'text',
+            gridColumn: ['span 2', 'span 3 !important']
          }}
        >
          <h3>#dogs</h3>
        </Card>
-        <Card bg="red">
-          <h3>#design</h3>
+        <Card bg="purple">
+          <h3>#support</h3>
+        </Card>
+        <Card
+          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%)`
+          }}
+        >
+          <h3>#lgbtq</h3>
+        </Card>
+        <Card
+          sx={{
+            bg: 'dark',
+            backgroundImage:
+              'url(https://cloud-ds22ysgb0.vercel.app/2020-07-25_r6thfxwv1u0c71uw0qk94juv6fxxjygf.png)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            textShadow: 'text',
+            gridColumn: ['span 2 !important', 'span 4 !important']
+          }}
+        >
+          <h3>#photography</h3>
+        </Card>
+      </Grid>
+      <Heading
+        as="h2"
+        variant="title"
+        sx={{ mt: [4, 5], color: 'black', maxWidth: 'copyUltra' }}
+      >
+        Events on Zoom that don’t suck.
+      </Heading>
+      <Grid
+        columns={[null, 2]}
+        gap={[3, 4]}
+        sx={{
+          py: [3, 4],
+          mx: [null, null, null, -4],
+          h3: {
+            variant: 'text.title',
+            color: 'white',
+            my: 0
+          },
+          p: {
+            color: 'white',
+            opacity: 0.875,
+            fontSize: [2, 3],
+            lineHeight: 'caption',
+            mt: 2
+          },
+          a: {
+            position: 'relative',
+            pb: [4, 5],
+            ':hover,:focus': {
+              svg: {
+                transform: 'translateX(28px) translateY(-28px)',
+                opacity: 0
+              }
+            }
+          },
+          svg: {
+            position: 'absolute',
+            top: 2,
+            right: 2,
+            fill: 'white',
+            transition: 'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
+          }
+        }}
+      >
+        <NextLink href="/amas" passHref>
+          <Card
+            as="a"
+            variant="interactive"
+            sx={{
+              bg: '#000',
+              backgroundImage:
+                'linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.375)), url(https://cloud-qivhneg5o.vercel.app/2020-07-25_hz5hy2bw5x70ped8akzwtrj4hzuex3vw.jpeg)',
+              backgroundSize: '100% auto',
+              textShadow: 'text'
+            }}
+          >
+            <Icon glyph="external" size={24} />
+            <h3>AMAs</h3>
+            <p>Every 2 weeks, Zoom with someone remarkable</p>
+          </Card>
+        </NextLink>
+        <NextLink href="/night" passHref>
+          <Card
+            as="a"
+            variant="interactive"
+            sx={{
+              bg: 'dark',
+              backgroundImage:
+                'url(https://cloud-58v67k4qk.vercel.app/2020-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)`
+              }
+            }}
+          >
+            <Icon glyph="external" size={24} />
+            <h3>Hack Night</h3>
+            <p>Weekly live coding & hangout on Zoom</p>
+          </Card>
+        </NextLink>
+        <NextLink href="/minecraft" passHref>
+          <Card
+            as="a"
+            variant="interactive"
+            sx={{
+              bg: '#759B40',
+              backgroundImage:
+                'url(https://cloud-mvq23w0hk.vercel.app/2020-07-25_56ygmzej7r9kjrrudmnb0t0cmg0m3gtg.jpeg)',
+              backgroundSize: 'cover',
+              textShadow: 'text'
+            }}
+          >
+            <Icon glyph="external" size={24} />
+            <h3>Minecraft Monday</h3>
+            <p>Play on our server, build OSS plugins, compete</p>
+          </Card>
+        </NextLink>
+        <Card
+          as="a"
+          href="https://events.hackclub.com/"
+          variant="interactive"
+          sx={{
+            bg: '#3b6fce',
+            backgroundImage:
+              'url(https://cloud-1k2khgx4q.vercel.app/2020-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} />
+          <h3>Community fun</h3>
+          <p>Members run their own events—all with Zoom Pro</p>
        </Card>
      </Grid>
    </Container>