import { Badge, Box, Button, Card, Container, Grid, Heading, Link, Text } from 'theme-ui'
import styled from '@emotion/styled'
import Head from 'next/head'
import NextLink from 'next/link'
import Meta from '@hackclub/meta'
import Nav from '../components/nav'
import Icon from '../components/icon'
import BGImg from '../components/background-image'
import ForceTheme from '../components/force-theme'
import SlideDown from '../components/slide-down'
import FadeIn from '../components/fade-in'
import Footer from '../components/footer'
import AssembleImgFile from '../public/home/assemble.jpg'
import Slack from '../components/slack'
import Stage from '../components/stage'
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 Feature = ({ icon, color, name, desc, children, sx, ...props }) => (
{children || (
)}
{name}
{desc}
)
const Page = () => (
<>
Don’t run your coding club alone.{' '}
Make it a{' '}
Hack Club
.
Hack Club is a nonprofit network of high school computer science clubs and
makers around the world.
Hackers at Assemble in SF
The rundown
Clubs discovering the{' '}
joy of code
.
Hack Clubs typically meet for 1 hour 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.
{/* */}
1
A group of teens, many beginners, gather to start coding.
The leader (that’s you!) presents for a few minutes, getting the
group started building something new.
2
Everyone gets hacking, individually. Not hacking
bank accounts, but rather being creative and{' '}
making something awesome.
3
To end, everyone demos their work.
As a leader, you’re cultivating a community of makers. Each member
showing off their work builds momentum & motivation.
Go beyond club meetings.
Hack Clubs attend and run{' '}
hackathons{' '}
like Daydream &{' '}
Scrapyard,
take part in year long programs like{' '}
Blueprint, and compete in events
like the{' '}
Congressional App Challenge
. The hack’s the limit.
~ Welcome to the club ~
By the students, for the students.
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,{' '}
every Hack Club is student-led &
members make self-directed projects.
Hit the ground running
Get your club{' '}
going & growing
with Hack Club.
In our Slack community, you’ll be
invited to a space for Hack Club leaders to ask questions &
chat, share projects, & attend weekly live events.
}
/>
We build tools, such as{' '}
Sprig, that your
members can use to make projects with in meetings! Build more of
them with us in our Slack community.
}
>
Come prepared to every meeting with over 100{' '}
workshops (3 years’
worth!) and 19 Jams that
guide your club members through making fun, creative projects.
}
>
{/*
Need help getting started? Watch real club leaders run meetings, and
learn how to run them in your own club, with{' '}
Hack Club Meetings.
}
>
*/}
Get amazing stickers and posters for marketing
your club shipped directly to you & your club members.
}
color="purple"
icon="sticker"
>
Use our 501(c)(3) status and a restricted fund with{' '}
HCB to fundraise, accept donations, and
buy things!
}
/>
From Lock-in calls to{' '}
AMAs
{' to '}
weirder events
, the Slack community has live events for leaders & members
alike every week.
}
icon="event-code"
color="blue"
>
We're always building new tools for leaders, such as the{' '}
Leaders Portal! A place to manage your club! We've also got
free subscriptions to Brilliant Premium, Code Crafters, and more for running a
great computer science club.
}
/>
When established Computer Science clubs join, they get all the Hack Club
benefits: Zoom Pro, stickers, our Slack community,{' '}
workshops, the
works. They’re welcome to use the “Hack Club” name or keep
their existing one.
}
as="aside"
sx={{
display: 'grid',
gridGap: [0, 4],
gridTemplateColumns: [null, 'auto 1fr'],
alignItems: 'start',
justifyContent: 'start',
bg: 'rgba(255,88,88,0.125)',
p: [3, 4],
mt: [3, 4],
borderRadius: 'extra',
span: { transform: 'none', width: 'min-intrinsic' },
svg: { color: 'white' }
}}
/>
Next steps
Apply today to{' '}
start your club
.
It’s all-online, free, & takes under an hour. We’ll help from there!
a, > div': {
borderRadius: 'extra',
boxShadow: 'elevated',
px: [3, null, 4],
py: [4, null, 5]
},
span: {
boxShadow:
'-2px -2px 6px rgba(255,255,255,0.125), inset 2px 2px 6px rgba(0,0,0,0.1), 2px 2px 8px rgba(0,0,0,0.0625)'
},
svg: { fill: 'currentColor' }
}}
>
)
export default Page