Add Slack page (#19)

* Fix Flag animation

* Make cards translucent

* Add Slack page

* Update link on Ship page

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>

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',
+      '@media (prefers-reduced-motion: no-preference)': {
-      animation: `${unfold} 0.5s ease-out`,
+        animation: `${unfold} 0.5s ease-out`
-      '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
+      },
       svg: { flexShrink: 'none' }
     }}
     {...props}

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: {

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'
+        ? 'black'
-      : color
+        : color
     const toggleColor = dark
       ? color || 'snow'
       : toggled || (color === 'white' && scrolled)
-      ? 'slate'
+        ? 'slate'
-      : color
+        : color
 
     return (
       <Root

lib/theme.js

@@ -54,8 +54,7 @@ theme.buttons.cta = {
   fontSize: 3,
   px: 4,
   py: 3,
-  backgroundImage: theme =>
+  backgroundImage: t => t.util.gradient('orange', 'red')
-    `linear-gradient(${theme.colors.orange}, ${theme.colors.red})`
 }
 
 theme.cards.translucent = {

pages/index.js

@@ -131,6 +131,7 @@ export default () => (
           <Announcement
             copy="Elon Musk has donated $500K!"
             href="/elon"
+            iconLeft="announcement"
             color="green"
           />
         </NextLink>

pages/ship.js

@@ -259,9 +259,9 @@ export default ({ ships, stats }) => (
           Hack Club Slack, where 9k teenagers from around the world share
           what they’re working on & help each other.
         </Text>
-        <NextLink href="/" passHref>
+        <NextLink href="/slack" passHref>
-          <Button bg="red" as="a">
+          <Button variant="cta" sx={{ py: 2, px: 3, fontSize: 2 }} as="a">
-            Learn more
+            Join our Slack
           </Button>
         </NextLink>
       </Container>

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 />
+  </>
+)

vercel.json

@@ -1,9 +1,7 @@
 {
   "public": true,
   "trailingSlash": true,
-  "github": {
+  "github": { "silent": true },
-    "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": "*"
-        }
       ]
     }
   ]
-}
+}