import {
Box,
Card,
Container,
Grid,
Heading,
Image,
Link,
Text
} from 'theme-ui'
import { keyframes } from '@emotion/core'
import { Slide } from 'react-reveal'
import NextLink from 'next/link'
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 Announcement from '../components/home/announcement'
import SlackEvents from '../components/home/slack-events'
import JoinForm from '../components/home/join-form'
// import { timeSince } from '../lib/dates'
const fade = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
const slide = keyframes({
from: { transform: 'translateY(-200%)' },
to: { transform: 'translateY(0)' }
})
const CardLink = props => (
)
const Event = ({ title, month, day }) => (
{month}
{day}
{title}
)
const Window = ({ title, children, ...props }) => (
`linear-gradient(${theme.colors.darkless}, ${theme.colors.darker})`,
p: 2,
lineHeight: 'body',
textAlign: 'center'
}}
>
{title}
{children}
)
export default () => (
<>
Stuck home? Join{' '}
theme.colors.white,
WebkitTextStrokeWidth: ['1px', '3px'],
WebkitTextFillColor: theme => theme.colors.red
}}
>
Hack Club
.
Join the global Hack Club high school
community chatroom, weekly AMAs,{' '}
online clubs
{' & '}
hackathons
. You’ve found your home.
During COVID
We’re making Hack Club the best place on the internet
to be a teenager into technology.
{/* */}
Weekly AMAs
{' '}
with the most interesting people in tech.
Watch our Elon Musk AMA
Clip from our Chris Cox AMA
Student-run workshops every week on coding, cooking, drawing,
everything.
Watch a recent live-code
Sharpen your coding skills in online hackathons like the{' '}
theme.colors.white,
textShadow: '0 0 4px currentColor'
}
}}
>
COVID-19 Global Hackathon
.
See upcoming hackathons
`linear-gradient(rgba(255,255,255,0), ${theme.colors.white})`
},
py: [4, 5]
}}
>
A{' '}
24/7
{' '}
high schooler community. Get coding help, share projects, meet your
closest friends.
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.
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
}
}}
>
Live from our Slack
`radial-gradient(
ellipse farthest-corner at top left, ${theme.colors.cyan}, ${theme.colors.blue})`,
p: { color: 'smoke', fontSize: 2, mt: 1, lineHeight: 'caption' }
}}
>
#ship
Share your latest projects & get feedback
#hack-night
Biweekly mini-hackathon & video call hangout
theme.util.gradient('yellow', 'orange'),
color: 'white',
py: [5, 6]
}}
>
Join our Slack
Due to a recent influx of new members, we’re temporarily pausing
automated Slack signups. But we still want to meet you! Add yourself
to the signup queue & you’ll receive an invitation shortly.
)