Add Slack page (#19)

* Fix Flag animation * Make cards translucent * Add Slack page * Update link on Ship page
2026-04-19 15:18:18 +00:00 · 2020-05-24 12:57:12 -04:00 · 2020-05-24 12:57:12 -04:00 · 7a40b360b2
commit 7a40b360b2
parent c08a421a11
9 changed files with 261 additions and 37 deletions
--- a/components/flag.js
+++ b/components/flag.js
@ -14,14 +14,14 @@ const waveFlag = keyframes`

 const waveFlagScaled = keyframes`
  from {
-    transform: scale(.75) rotate(0deg);
+    transform: scale(.875) rotate(0deg);
  }
  to {
-    transform: scale(.75) rotate(-5deg);
+    transform: scale(.875) rotate(-5deg);
  }
 `

-const scrolled = (props) =>
+const scrolled = props =>
  props.scrolled &&
  css`
    transform: scale(0.875);
@ -57,7 +57,7 @@ const Base = styled('a')`
  ${scrolled};
 `

-const Flag = (props) => (
+const Flag = props => (
  <Link href="/" passHref>
    <Base title="Homepage" {...props} />
  </Link>
--- a/components/home/announcement.js
+++ b/components/home/announcement.js
@ -10,7 +10,7 @@ const unfold = keyframes({
 const Announcement = ({
  caption,
  copy,
-  iconLeft = 'announcement',
+  iconLeft,
  iconRight = 'info',
  color = 'accent',
  ...props
@ -19,22 +19,23 @@ const Announcement = ({
    as={props.href ? 'a' : 'div'}
    variant="interactive"
    sx={{
+      variant: 'cards.translucent',
      mx: 'auto',
      maxWidth: 'narrow',
      width: '100%',
-      bg: 'rgba(255, 255, 255, 0.98)',
      textAlign: 'left',
      textDecoration: 'none',
      lineHeight: 'caption',
      display: 'flex',
      alignItems: 'center',
-      p: [2, 3],
+      p: [2, 2],
+      px: 3,
      mb: [3, 4],
-      mt: [null, -3, -5],
+      mt: [null, -3, -5, -84],
      transform: 'scale(1)',
-      willChange: 'transform',
-      animation: `${unfold} 0.5s ease-out`,
-      '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+      '@media (prefers-reduced-motion: no-preference)': {
+        animation: `${unfold} 0.5s ease-out`
+      },
      svg: { flexShrink: 'none' }
    }}
    {...props}
--- a/components/home/join-form.js
+++ b/components/home/join-form.js
@ -8,7 +8,7 @@ const JoinForm = () => {
  return (
    <Card
      sx={{
-        bg: 'rgba(255,255,255,0.875)',
+        variant: 'cards.translucent',
        maxWidth: 'narrow',
        mx: 'auto',
        label: {
--- a/components/nav.js
+++ b/components/nav.js
@ -15,7 +15,7 @@ const rgbaBgColor = (props, opacity) =>
    ${opacity}
  )`

-const unfixed = (props) =>
+const unfixed = props =>
  !props.unfixed &&
  css`
    position: absolute;
@ -31,7 +31,7 @@ const unfixed = (props) =>
 //         -webkit-backdrop-filter: saturate(180%) blur(20px);
 //         backdrop-filter: saturate(180%) blur(20px);
 //       `
-const fixed = (props) =>
+const fixed = props =>
  (props.scrolled || props.toggled || props.fixed) &&
  css`
    position: fixed;
@ -69,7 +69,7 @@ export const Content = styled(Container)`
  }
 `

-const hoverColor = (name) =>
+const hoverColor = name =>
  ({
    white: 'smoke',
    smoke: 'muted',
@ -84,7 +84,7 @@ const slide = keyframes({
  to: { transform: 'translateY(0)', opacity: 1 }
 })

-const layout = (props) =>
+const layout = props =>
  props.isMobile
    ? css`
        display: ${props.toggled ? 'flex' : 'none'};
@ -135,12 +135,12 @@ const NavBar = styled(Box)`
    padding: ${theme.space[3]}px;
    text-decoration: none;
    @media (min-width: 56em) {
-      color: ${(props) => theme.colors[props.color] || color};
+      color: ${props => theme.colors[props.color] || color};
    }
  }
 `

-const Navigation = (props) => (
+const Navigation = props => (
  <NavBar role="navigation" {...props}>
    <Link href="https://hackclub.com/clubs/" children="Clubs" />
    <Link href="https://workshops.hackclub.com/" children="Workshops" />
@ -188,7 +188,7 @@ class Header extends Component {
    this.bindScroll(false)
  }

-  bindScroll = (add) => {
+  bindScroll = add => {
    if (typeof window !== 'undefined' && !this.props.unfixed) {
      window[add ? 'addEventListener' : 'removeEventListener'](
        'scroll',
@ -209,7 +209,7 @@ class Header extends Component {
  }

  handleToggleMenu = () => {
-    this.setState((state) => ({
+    this.setState(state => ({
      toggled: !state.toggled
    }))
  }
@ -220,13 +220,13 @@ class Header extends Component {
    const baseColor = dark
      ? color || 'white'
      : color === 'white' && scrolled
-      ? 'black'
-      : color
+        ? 'black'
+        : color
    const toggleColor = dark
      ? color || 'snow'
      : toggled || (color === 'white' && scrolled)
-      ? 'slate'
-      : color
+        ? 'slate'
+        : color

    return (
      <Root
--- a/lib/theme.js
+++ b/lib/theme.js
@ -54,8 +54,7 @@ theme.buttons.cta = {
  fontSize: 3,
  px: 4,
  py: 3,
-  backgroundImage: theme =>
-    `linear-gradient(${theme.colors.orange}, ${theme.colors.red})`
+  backgroundImage: t => t.util.gradient('orange', 'red')
 }

 theme.cards.translucent = {
--- a/pages/index.js
+++ b/pages/index.js
@ -131,6 +131,7 @@ export default () => (
          <Announcement
            copy="Elon Musk has donated $500K!"
            href="/elon"
+            iconLeft="announcement"
            color="green"
          />
        </NextLink>
--- a/pages/ship.js
+++ b/pages/ship.js
@ -259,9 +259,9 @@ export default ({ ships, stats }) => (
          Hack&nbsp;Club Slack, where 9k teenagers from around the world share
          what they’re working on & help each other.
        </Text>
-        <NextLink href="/" passHref>
-          <Button bg="red" as="a">
-            Learn more
+        <NextLink href="/slack" passHref>
+          <Button variant="cta" sx={{ py: 2, px: 3, fontSize: 2 }} as="a">
+            Join our Slack
          </Button>
        </NextLink>
      </Container>
--- a/pages/slack.js
+++ b/pages/slack.js
@ -0,0 +1,228 @@
+import {
+  Box,
+  Card,
+  Container,
+  Grid,
+  Heading,
+  Image,
+  Link,
+  Text
+} from 'theme-ui'
+import { keyframes } from '@emotion/core'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import Nav from '../components/nav'
+import ForceTheme from '../components/force-theme'
+import Footer from '../components/footer'
+import 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'
+
+export default () => (
+  <>
+    <Meta
+      as={Head}
+      name="Join our Slack"
+      description="Hack Club’s Slack is a community of 9k high school hackers around the world. Chat, meet new friends, code together, share your work."
+      image="https://hackclub.com/cards/community.png"
+    />
+    <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, 8, 9],
+            textAlign: 'center',
+            color: 'white',
+            lineHeight: [0.875, 0.8],
+            position: 'relative',
+            zIndex: 1,
+            textShadow: 'text'
+          }}
+        >
+          Hack Club Slack
+        </Heading>
+        <SlideUp>
+          <JoinForm />
+        </SlideUp>
+      </Container>
+    </Box>
+    <Container sx={{ py: [4, 5] }}>
+      <Heading
+        as="h2"
+        variant="title"
+        sx={{ color: 'black', maxWidth: 'copyUltra' }}
+      >
+        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 8,000+ members, active at all hours.
+      </Text>
+      <Grid
+        columns={[2, 15]}
+        gap={3}
+        sx={{
+          py: [3, 4],
+          h3: { my: 0 },
+          '> div': {
+            px: [2, 3],
+            py: [4, 4],
+            display: 'flex',
+            flexDirection: 'column',
+            gridColumn: ['span 1', 'span 3'],
+            position: 'relative'
+          },
+          h3: {
+            variant: 'text.headline',
+            color: 'white',
+            lineHeight: 'title',
+            my: 0
+          }
+        }}
+      >
+        <Box
+          as="aside"
+          sx={{
+            gridRow: [null, 'span 2'],
+            gridColumn: ['span 2', 'span 3']
+          }}
+        >
+          <Heading
+            as="h2"
+            variant="subheadline"
+            sx={{
+              mt: 0,
+              color: 'red',
+              textTransform: 'uppercase',
+              letterSpacing: 'headline'
+            }}
+          >
+            Live from our&nbsp;Slack
+          </Heading>
+          <SlackEvents />
+        </Box>
+        <Card
+          as="aside"
+          sx={{
+            gridColumn: ['span 2', 'span 6'],
+            bg: 'blue',
+            backgroundImage: theme => `radial-gradient(
+	ellipse farthest-corner at top left, ${theme.colors.cyan}, ${
+              theme.colors.blue
+            })`,
+            p: { color: 'smoke', fontSize: 2, mt: 1, lineHeight: 'caption' }
+          }}
+        >
+          <Heading as="h3" variant="headline">
+            #ship
+          </Heading>
+          <Text as="p">Share your latest projects & get feedback</Text>
+        </Card>
+        <Card
+          as="aside"
+          sx={{
+            gridColumn: ['span 2', 'span 6'],
+            bg: 'dark',
+            backgroundImage:
+              'url(https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%2Fnight.jpg?v=1587692925213)',
+            backgroundPosition: 'top center',
+            backgroundSize: 'cover',
+            p: { color: 'smoke', fontSize: 2, mt: 1, lineHeight: 'caption' }
+          }}
+        >
+          <Heading as="h3" variant="headline">
+            #hack-night
+          </Heading>
+          <Text as="p">Biweekly mini-hackathon & video call hangout</Text>
+        </Card>
+        <Card bg="cyan">
+          <h3>#lounge</h3>
+        </Card>
+        <Card bg="orange">
+          <h3>#support</h3>
+        </Card>
+        <Card bg="blue">
+          <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%)`
+          }}
+        >
+          <h3>#lgbtq</h3>
+        </Card>
+        <Card bg="dark">
+          <h3>#gamedev</h3>
+        </Card>
+        <Card bg="red">
+          <h3>#design</h3>
+        </Card>
+        <Card bg="green">
+          <h3>
+            #photo-
+            <br />
+            graphy
+          </h3>
+        </Card>
+        <Card
+          bg="yellow"
+          sx={{
+            backgroundImage:
+              'url(https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%2FImage%20from%20iOS%202.jpg?v=1587695033603)',
+            backgroundSize: '100%',
+            backgroundPosition: 'center',
+            textShadow: 'text'
+          }}
+        >
+          <h3>#dogs</h3>
+        </Card>
+        <Card bg="green">
+          <h3>#music</h3>
+        </Card>
+      </Grid>
+    </Container>
+    <Footer />
+  </>
+)
--- a/vercel.json
+++ b/vercel.json
@ -1,9 +1,7 @@
 {
  "public": true,
  "trailingSlash": true,
-  "github": {
-    "silent": true
-  },
+  "github": { "silent": true },
  "env": {
    "SLACK_BOT_TOKEN": "@slack-bot-token-production-8avf"
  },
@ -11,11 +9,8 @@
    {
      "source": "/api/join",
      "headers": [
-        {
-          "key": "Access-Control-Allow-Origin",
-          "value": "*"
-        }
+        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ]
-}
+}