System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 19:45:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new copy

Browse source
This commit is contained in:
Belle 2022-12-15 09:16:41 -05:00
parent 92c01aecfb
commit 02bf71c62e
28 changed files with 955 additions and 654 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/comma.js Normal file
View file

@ -0,0 +1,3 @@
export default function Comma({ children }) {
return(children.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','))
}

17
components/footer.js
View file

@ -85,15 +85,6 @@ const Footer = ({ dark = false, children, ...props }) => (
<Heading as="h2" variant="subheadline" mb={3}>
Hack Club
</Heading>
<NextLink href="/slack" passHref>
<Link>Slack</Link>
</NextLink>
<NextLink href="/hackathons" passHref>
<Link>Hackathons</Link>
</NextLink>
<NextLink href="/opensource" passHref>
<Link>Open Source</Link>
</NextLink>
<NextLink href="/philosophy" passHref>
<Link>Philosophy</Link>
</NextLink>
@ -117,14 +108,6 @@ const Footer = ({ dark = false, children, ...props }) => (
<Heading as="h2" variant="subheadline" mb={3}>
Resources
</Heading>
<Link href="https://workshops.hackclub.com/">Workshops</Link>
<NextLink href="/bank" passHref>
<Link>Fiscal Sponsorship</Link>
</NextLink>
<Link href="https://sprig.hackclub.com/">Sprig</Link>
<Link href="https://hackathons.hackclub.com/">
Upcoming Hackathons
</Link>
<Link href="https://events.hackclub.com/">Community Events</Link>
<Link href="https://toolbox.hackclub.com/">Toolbox</Link>
<Link href="https://hackclub.com/map">Clubs Map</Link>

61
components/index/cards/bank.js
View file

@ -21,7 +21,7 @@ export default function Bank({ data }) {
return (
<Box sx={{ position: 'relative' }}>
{/* <Fade spy={data} bottom delay={500} appear> */}
<Badge
{/* <Badge
variant="pill"
sx={{
position: 'absolute',
@ -32,24 +32,47 @@ export default function Bank({ data }) {
}}
>
{data[0]}
</Badge>
</Badge> */}
<Box
sx={{
position: 'absolute',
right: 3,
top: 3,
zIndex: 3,
px: 2,
py: 1,
background: 'red',
borderRadius: 'extra',
fontWeight: 'bold',
color: 'white'
}}
>
{data[0]}
</Box>
{/* </Fade> */}
<CardModel
color="white"
sx={{
backgroundColor: 'dark',
minHeight: ['300px', '400px','300px']
minHeight: ['300px', '400px','300px'],
backgroundColor: 'darkless',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x291829/glyph:bank-account.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%',
color: 'snow',
}}
>
<Text variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5] }}>
Hack Club Bank
</Text>
<Grid columns={[1, 1, '1fr 0.6fr']}>
<Grid columns={[1, 1, 2]}>
<Box>
<Text as="p" variant="subtitle">
Tool developed to make organising easier: a fiscal sponsor and
banking platform in one to help you organize clubs, hackathons,
and more!
Become a 501(c)3 nonprofit and join 700+ teams using Hack Club Bank to run world-class events.
</Text>
<Text as="p" variant="subtitle">
This platform is built and maintained by the Hack Club team.
</Text>
<Box sx={{ position: 'relative', width: '100%', display: [null, 'none', 'none'], mb: '-50px', mt: 3}}>
{' '}
@ -90,16 +113,18 @@ export default function Bank({ data }) {
></Box>
</Box>
</Box>
<Button
variant="primary"
as="a"
href="/bank"
mt={3}
target="_blank"
rel="noopener"
<Text sx={{ fontSize: ['18px', '20px', 3],
display: 'block', fontWeight: 'bold', mt: 2 }}>
Get involved
</Text>
<Buttons
id="27"
icon="bank-account"
link="/bank"
primary="red"
>
Start bankin!
</Button>
Start banking!
</Buttons>
</Box>
</Grid>
</CardModel>
@ -107,7 +132,7 @@ export default function Bank({ data }) {
sx={{
position: 'absolute',
right: [0 ,0,'-100px'],
bottom: [0 ,'-120px','-100px'],
bottom: [0 ,'-120px','-120px'],
display: ['none', 'block', 'block']
}}
>
@ -135,7 +160,7 @@ export default function Bank({ data }) {
<Box
sx={{
backgroundImage:
'url("https://cloud-i4x0iu63l-hack-club-bot.vercel.app/0bank.gif")',
'url("https://cloud-f1orvtxst-hack-club-bot.vercel.app/0bank_vid.gif")',
zIndex: 2,
position: 'absolute',
margin: 'auto',

18
components/index/cards/button.js
View file

@ -15,29 +15,20 @@ import ReactTooltip from 'react-tooltip'
import Icon from '@hackclub/icons'
/** @jsxImportSource theme-ui */
export default function Buttons({ children, icon, id, content, link, ...props }) {
export default function Buttons({ children, icon, id, content, link, primary, ...props }) {
let fontWeight = primary != null ? '700' : '400'
return (
<Box
py={1}
// onClick={() => {
// if (toggle) {
// setToggle(false)
// console.log(toggle)
// } else {
// setToggle(true)
// console.log(toggle)
// }
// }}
>
<Button
// ref={ref => (fooRef = ref)}
data-place="right"
data-for={id}
data-effect="solid"
data-tip
// data-event="click"
sx={{
background: 'rgb(255, 255, 255, 0.3)',
background: primary || 'rgb(255, 255, 255, 0.3)',
borderRadius: '100px',
border: 'none',
display: 'flex',
@ -50,6 +41,7 @@ export default function Buttons({ children, icon, id, content, link, ...props })
fontWeight: '400',
fontSize: [1, '14px', '16px'],
backdropFilter: 'blur(2px)',
fontWeight: fontWeight
}}
as={"a"}
href={link || '/'}

54
components/index/cards/card-model.js
View file

@ -1,5 +1,5 @@
import Tilt from './tilt'
import Icon from '@hackclub/icons'
import Icon from '../../icon'
import {
Box,
Button,
@ -15,6 +15,7 @@ import {
} from 'theme-ui'
import { Zoom } from 'react-reveal'
import ReactTooltip from 'react-tooltip'
import Comma from '../../comma'
/** @jsxImportSource theme-ui */
@ -22,6 +23,7 @@ const CardModel = ({
background,
children,
link,
highlight,
github_link,
color,
stars,
@ -35,13 +37,13 @@ const CardModel = ({
position: 'relative',
width: '100%',
color: color,
my: 4,
my: [3, 4, 5],
p: 3,
backgroundSize: 'cover',
backgroundImage: `url(${background})` || '',
backgroundPosition: 'center bottom',
backgroundRepeat: 'no-repeat',
p: {
'& p': {
fontSize: [1, '16px', '20px']
}
}}
@ -55,7 +57,8 @@ const CardModel = ({
position: 'absolute',
left: 3,
bottom: 2,
alignItems: 'center'
alignItems: 'center',
zIndex: 2
}}
>
<Link
@ -64,9 +67,25 @@ const CardModel = ({
target="_blank"
rel="noopener"
>
<Icon glyph="github" size={42} color={color} />
<Icon
glyph="github"
size={42}
color="#2351fs"
sx={{
color: '#000',
'&:hover': {
color: highlight || color
}
}}
/>
</Link>
{stars != null ? <Text as="h2">{stars} ⭐️</Text> : <></>}
{stars != null ? (
<Text as="h2">
⭐️ <Comma>{stars}</Comma>
</Text>
) : (
<></>
)}
</Flex>
) : (
<Flex
@ -74,12 +93,29 @@ const CardModel = ({
position: 'absolute',
right: 2,
top: 2,
alignItems: 'center'
alignItems: 'center',
zIndex: 2
}}
>
{stars != null ? <Text as="h2">{stars} ⭐️</Text> : <></>}
{stars != null ? (
<Text as="h2">
⭐️ <Comma>{stars}</Comma>
</Text>
) : (
<></>
)}
<Link href={github_link} sx={{ ml: 2 }}>
<Icon glyph="github" size={42} color={color} />
<Icon
glyph="github"
size={42}
sx={{
color: color,
transition: '0.4s',
'&:hover': {
color: highlight || color
}
}}
/>
</Link>
</Flex>
)}

82
components/index/cards/clubs.js
View file

@ -18,6 +18,22 @@ import ReactTooltip from 'react-tooltip'
/** @jsxImportSource theme-ui */
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5))',
opacity: 0.8,
zIndex: 1
}}
/>
)
export default function Clubs() {
// let [fooRef, setFooRef] = useState('')
// let [toggle, setToggle] = useState(true)
@ -26,14 +42,22 @@ export default function Clubs() {
<CardModel
color="white"
sx={{
backgroundColor: 'elevated',
background:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.47) 50%, rgba(0, 0, 0, 0.5) 100%), url("https://cloud-flzg18ipb-hack-club-bot.vercel.app/0screenshot_2022-12-05_at_9.44.11_pm.png")',
backgroundPositon: 'center center',
backgroundSize: ['cover', '100% auto', '100% auto'],
backgroundRepeat: 'no-repeat'
backgroundColor: 'red'
}}
>
<Image
src="https://cloud-flzg18ipb-hack-club-bot.vercel.app/0screenshot_2022-12-05_at_9.44.11_pm.png"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<Cover />
<Text
variant="title"
sx={{
@ -43,12 +67,14 @@ export default function Clubs() {
whiteSpace: [null, 'nowrap', 'nowrap'],
color: ['white', 'red', 'red'],
bg: ['transparent', 'white', 'white'],
fontSize: ['36px', 4, 5]
fontSize: ['36px', 4, 5],
position: 'relative',
zIndex: 2
}}
>
Network of coding clubs
Network of 400+ coding clubs
</Text>
<Grid columns={[1]}>
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Box>
<Text
as="p"
@ -57,8 +83,15 @@ export default function Clubs() {
>
Join or start a Hack Club and be part of a network of high quality
coding clubs where you learn to code entirely through building
things. You can start with no experience and build and ship a
project every meeting.
things.
</Text>
<Text
as="p"
variant="subtitle"
sx={{ textShadow: '1px 1px 5px black' }}
>
You can start with no experience and build and ship a project every
meeting.
</Text>
<Text
sx={{
@ -71,6 +104,15 @@ export default function Clubs() {
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons
content="we'll support you with meeting content, stickers, and more"
id="2"
icon="welcome"
link="/clubs"
primary="red"
>
Start a club
</Buttons>
<Buttons
content="click for our clubs map and reach out to team@hackclub.com to be connected"
id="1"
@ -79,25 +121,7 @@ export default function Clubs() {
>
Join a Hack Club near you
</Buttons>
<Buttons
content="we'll support you with meeting content, stickers, and more"
id="2"
icon="welcome"
link="/clubs"
>
Start a club
</Buttons>
</Flex>
<Button
variant="primary"
sx={{ mt: 3, backgroundColor: 'red' }}
as="a"
href="/clubs"
target="_blank"
rel="noopener"
>
Learn more
</Button>
</Box>
</Grid>
</CardModel>

21
components/index/cards/epoch.js
View file

@ -130,19 +130,6 @@ export default function Epoch() {
)
})
return (
<Box sx={{position: 'relative'}}>
<Badge
variant="pill"
sx={{
position: 'absolute',
right: -3,
top: -1,
transform: 'rotate(7deg)',
zIndex: 3
}}
>
Happening Now <Dot />
</Badge>
<CardModel
id="epoch"
color="white"
@ -154,7 +141,7 @@ export default function Epoch() {
src="https://cloud-ox8syzbet-hack-club-bot.vercel.app/0ep0ch.svg"
sx={{ width: ['150px', '180px', '220px'] }}
/>
<Grid columns={[1, 1, '0.8fr 1fr']} mt={[0, 3, 3]}>
<Grid columns={[1, 1, 2]} mt={[0, 3, 3]}>
<Box>
{timer.length ? (
<Grid
@ -192,6 +179,7 @@ export default function Epoch() {
id="17"
link="https://epoch.hackclub.com"
icon="post"
primary="#FF4794"
>
Sign up and attend Epoch
</Buttons>
@ -204,7 +192,7 @@ export default function Epoch() {
Help plan the hackathon
</Buttons>
</Flex>
<Button
{/* <Button
variant="primary"
as="a"
href="https://epoch.hackclub.com/"
@ -218,10 +206,9 @@ export default function Epoch() {
}}
>
Sign up for Epoch
</Button>
</Button> */}
</Box>
</Grid>
</CardModel>
</Box>
)
}

131
components/index/cards/hackathons.js
View file

@ -14,34 +14,75 @@ import {
} from 'theme-ui'
import Buttons from './button'
import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
import Dot from '../../dot'
/** @jsxImportSource theme-ui */
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))',
opacity: 0.8,
zIndex: 1
}}
/>
)
export default function Hackathons({ data, stars }) {
return (
<CardModel
color="white"
sx={{
backgroundColor: 'elevated',
background:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.4) 25%,rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%), url("https://hackclub.com/bank/bg.webp")',
backgroundPositon: 'center center',
backgroundSize: '100% auto'
backgroundColor: 'dark'
// background:
// 'linear-gradient(to bottom,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.4) 25%,rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%), url("https://hackclub.com/bank/bg.webp")',
// backgroundPositon: 'center center',
// backgroundSize: '100% auto'
}}
stars={stars}
github_link="https://github.com/hackclub/hackathons"
highlight="blue"
// background="https://hackclub.com/bank/bg.webp"
>
<Text variant="title" sx={{fontSize: ['36px', 4, 5]}}>High School Hackathons</Text>
<Grid columns={[1, 2]}>
<Image
src="https://hackclub.com/bank/bg.webp"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<Cover />
<Text
variant="title"
sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
>
High school hackathons
</Text>
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Box>
<Text as="p" variant="subtitle">
We support the largest network of high school hackathons in the
world. From an online community of organizers to free stickers and
more!{' '}
</Text>
<Text sx={{ fontSize: ['18px', '20px', 3],
display: 'block', fontWeight: 'bold', mt: 2 }}>
<Text
sx={{
fontSize: ['18px', '20px', 3],
display: 'block',
fontWeight: 'bold',
mt: 2
}}
>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
@ -49,8 +90,9 @@ export default function Hackathons({ data, stars }) {
id="19"
icon="event-code"
link="https://hackathons.hackclub.com"
primary="blue"
>
Find a high school hackathon near you
Find a high school hackathon
</Buttons>
<Buttons
content="learn more about available resources"
@ -61,7 +103,7 @@ export default function Hackathons({ data, stars }) {
Organize a hackthon in your community
</Buttons>
</Flex>
<Button
{/* <Button
variant="primary"
sx={{ bg: 'blue' }}
mt={3}
@ -71,15 +113,76 @@ export default function Hackathons({ data, stars }) {
rel="noopener"
>
Find a hackathon
</Button>
</Button> */}
</Box>
<Box
<Flex
sx={{
flexDirection: 'column',
alignItems: 'flex-end',
alignSelf: 'flex-end'
}}
>
<Text sx={{ fontSize: 'small' }}>
Upcoming hackathons <Dot />
</Text>
<Box>
{data.slice(0, 5).map(data => (
<Box
sx={{
zIndex: '1',
// bg: 'rgb(255, 255, 255, 0.3)',
color: 'white',
textDecoration: 'none',
fontWeight: 'normal',
width: 'fit-content',
display: 'flex',
alignItems: 'center',
fontSize: 'small',
my: 2,
a: {
textDecoration: 'none',
color: 'white'
}
}}
>
{data.logo && (
<Box
sx={{
backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${data.banner}')`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'circle',
height: ['20px', '25px', '30px'],
width: ['20px', '25px', '30px']
}}
>
<Image
src={data.logo}
alt={`${data.name} logo`}
loading="lazy"
sx={{
height: '70%',
width: '70%',
objectFit: 'contain',
borderRadius: 'default'
}}
/>
</Box>
)}
<Link href={data.website}>{data.name}</Link>
</Box>
))}
</Box>
</Flex>
{/* <Box
sx={{
transform: [null,'translateY(25%)' ,'translateY(25%)']
}}
>
<ScrollingHackathons eventData={data} mode="await" />
</Box>
</Box> */}
</Grid>
</CardModel>
)

58
components/index/cards/sinerider.js
View file

@ -25,42 +25,64 @@ export default function Sinerider({ stars }) {
color="white"
sx={{
backgroundSize: 'cover',
backgroundImage:
'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
// backgroundImage:
// 'url(https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png)',
// backgroundPosition: 'center -60px',
// backgroundRepeat: 'no-repeat',
backgroundColor: '#271932'
}}
position={[null, "bottom", "bottom"]}
position={[null, 'bottom', 'bottom']}
highlight="#271932"
>
<Image
src="https://cloud-pwqxgzqdg-hack-club-bot.vercel.app/0initial-bg__1_.png"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<img
src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
sx={{ width: ['200px', '250px', '300px'] }}
sx={{ width: ['200px', '250px', '300px'], mt: '-20px', position: 'relative', zIndex: 2 }}
/>
<Grid columns={[1, 1, '0.4fr 0.6fr']}>
<Grid columns={[1, 1, 2]} sx={{position: 'relative', zIndex: 2}}>
<Box></Box>
<Box sx={{ mt: ['-40px', '-40px', '-180px'] }}>
<Box sx={{ mt: ['-40px', '-40px', '-150px'] }}>
<Text as="p" variant="subtitle">
A game about love and graphing, coming 2023! This project is powered
by teenage hackers of all kinds: artists, musicians, programmers,
storytellers… so if that's you, come join us; we need your help to
storytellers… so if that’s you, come join us; we need your help to
make this thing real!
</Text>
<Text sx={{ fontSize: ['18px', '20px', 3],
display: 'block',fontWeight: 'bold', mt: 2 }}>
<Text
sx={{
fontSize: ['18px', '20px', 3],
display: 'block',
fontWeight: 'bold',
mt: 2
}}
>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
<Buttons
// content="join #gamedev in Slack to get started"
content="you could create the art, be a scene maker, or write graphics rendering code"
id="4"
icon="rainbow"
// href="/slack"
href="https://github.com/hackclub/sinerider/#readme"
target="_blank"
rel="noopener"
primary="#CAB4D4"
sx={{ color: '#271932' }}
>
Create art for the game
Join the development
</Buttons>
<Buttons
{/* <Buttons
// content="DM @cwalker in Slack to learn more"
id="5"
icon="view"
@ -69,7 +91,7 @@ export default function Sinerider({ stars }) {
rel="noopener"
>
Be a scene maker
</Buttons>
</Buttons> */}
<Buttons
// content="DM @cwalker in Slack to learn more"
id="26"
@ -81,7 +103,7 @@ export default function Sinerider({ stars }) {
View a game preview
</Buttons>
</Flex>
<Button
{/* <Button
variant="primary"
sx={{
backgroundColor: '#CAB4D4',
@ -92,7 +114,7 @@ export default function Sinerider({ stars }) {
href="https://github.com/hackclub/sinerider/#readme"
>
Join the development
</Button>
</Button> */}
</Box>
</Grid>
</CardModel>

134
components/index/cards/slack.js
View file

@ -19,6 +19,7 @@ import { keyframes } from '@emotion/react'
import SlackEvents from '../../slack/slack-events'
import Event from '../events'
import Dot from '../../dot'
import Comma from '../../comma'
/** @jsxImportSource theme-ui */
// const Cover = () => (
@ -87,7 +88,8 @@ const Cover = () => (
top: 0,
left: 0,
right: 0,
backgroundImage: t => t.util.gx('cyan', 'purple'),
backgroundImage:
'linear-gradient(to bottom,rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.85))',
opacity: 0.8,
zIndex: 1
}}
@ -103,10 +105,27 @@ export default function Slack({ data, slackKey, events }) {
color="white"
sx={{
position: 'relative',
overflow: 'hidden'
overflow: 'hidden',
backgroundImage: t => t.util.gx('cyan', 'purple')
// background:
// 'linear-gradient(to bottom,rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.6) 25%,rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%), url("https://hackclub.com/_next/image/?url=https://cdn.glitch.com/a7605379-7582-4aac-8f44-45bbdfca0cfa%252F2020-05-16_screenshot.jpeg?v%3D1589633885855&w=2048&q=75")',
// backgroundPositon: 'center center',
// backgroundSize: '100% auto'
}}
>
<Box
<Image
src="/home/slack_ama.webp"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4
}}
/>
<Cover />
{/* <Box
as="video"
autoPlay
muted
@ -138,8 +157,7 @@ export default function Slack({ data, slackKey, events }) {
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.mov?v=1590781491717"
type="video/quicktime"
/>
</Box>
<Cover />
</Box> */}
<Grid sx={{ zIndex: 2 }}>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
Our online community
@ -157,57 +175,15 @@ export default function Slack({ data, slackKey, events }) {
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Coding doesn't have to be a solidary activity. At Hack Club, we make
things together and in our Slack (similar to Discord, but better),
you'll find a group of{' '}
<Box sx={{ display: 'inline', fontWeight: '700' }}>
{data.total_members_count}{' '}
</Box>
fabulous people to talk to, active at all hours. You could launch
your latest project and get feedback or discuss a cool article you
read, alongside other Hack Clubbers.
Coding doesn’t have to be a solidary activity. At Hack Club, we make
things together and in our Slack, you'll find awesome people to
hangout with to. Across 2,000 public channels, find the community
for your favorite programming language, ask for advice, or just hang
out.
</Text>
<Text as="p" variant="subtitle">
Sometimes, we also invite someone we really want to speak to (like{' '}
<Link
href="https://www.youtube.com/watch?v=qiLiyQ_2gho"
target="_blank"
rel="noopener"
sx={{
color: 'inherit',
fontStyle: 'italic',
textDecoration: 'none'
}}
>
Sal Khan
</Link>
,{' '}
<Link
href="https://www.youtube.com/watch?v=h3nAdaz5fOg"
target="_blank"
rel="noopener"
sx={{
color: 'inherit',
fontStyle: 'italic',
textDecoration: 'none'
}}
>
George Hotz
</Link>
, and{' '}
<Link
href="https://www.youtube.com/watch?v=IWFtj9cCaB0"
target="_blank"
rel="noopener"
sx={{
color: 'inherit',
fontStyle: 'italic',
textDecoration: 'none'
}}
>
Lady Ada
</Link>
) and host an{' '}
Sometimes, we also invite someone we really want to speak to (like
Sal Khan, George Hotz, and Lady Ada) and host an{' '}
<Link
href="/amas"
target="_blank"
@ -220,24 +196,19 @@ export default function Slack({ data, slackKey, events }) {
</Text>
<Event events={events} />
<Button
variant="primary"
sx={{
backgroundColor: 'white',
color: 'purple',
mt: 3
}}
as="a"
href="/slack"
target="_blank"
rel="noopener"
<Buttons
content="click to learn more about how to submit a workshop"
id="13"
link="/slack"
icon="slack"
primary="purple"
>
Join our community
</Button>
Join our Slack
</Buttons>
<Grid sx={{ zIndex: 2 }}>
<Box
sx={{
background: 'rgb(0,0,0,0.3)',
background: 'rgb(0,0,0,0.6)',
height: ['170px', '100%', '100%'],
position: ['relative', 'absolute', 'absolute'],
zIndex: 3,
@ -254,15 +225,24 @@ export default function Slack({ data, slackKey, events }) {
<Dot />
Live from Slack
</Text>
<Box sx={{ py: 2, fontWeight: '400' }}>
Total members: {data.total_members_count}
</Box>
<Box sx={{ py: 2, fontWeight: '400' }}>
Daily messages: {data.messages_count_1d}
</Box>
<Box sx={{ py: 2, fontWeight: '400' }}>
Online today: {data.readers_count_1d}
</Box>
<Heading variant="headline" sx={{ mb: 0, pt: 2 }}>
<Comma>{data.readers_count_1d}</Comma>
</Heading>
<Text sx={{ textTransform: 'uppercase', color: 'muted' }}>
Online today
</Text>
<Heading variant="headline" sx={{ mb: 0, pt: 2 }}>
<Comma>{data.messages_count_1d}</Comma>
</Heading>
<Text sx={{ textTransform: 'uppercase', color: 'muted' }}>
Daily messages
</Text>
<Heading variant="headline" sx={{ mb: 0, pt: 2 }}>
<Comma>{data.total_members_count}</Comma>
</Heading>
<Text sx={{ textTransform: 'uppercase', color: 'muted' }}>
Total members
</Text>
</Box>
</Grid>
</Box>

71
components/index/cards/sprig-console.js
View file

@ -17,17 +17,7 @@ import useSWR from 'swr'
import fetcher from '../../../lib/fetcher'
/** @jsxImportSource theme-ui */
export default function SprigConsole({ stars }) {
const { data: consoles } = useSWR(
'https://airbridge.hackclub.com/v0.1/Sprig%20Waitlist/Requests',
fetcher,
{ refreshInterval: 10000 }
)
const consoleCount = consoles
? consoles.filter(console => console.fields.Status === 'Pending').length
: 100 // arbitrary fallback number
export default function SprigConsole({ stars, consoleCount }) {
return (
<Box sx={{ position: 'relative' }}>
<CardModel
@ -37,15 +27,32 @@ export default function SprigConsole({ stars }) {
color="white"
sx={{
backgroundSize: 'cover',
backgroundColor: '#016535',
backgroundImage: 'url(https://sprig.hackclub.com/pcb.svg)',
backgroundColor: '#2E5626',
// backgroundImage: 'linear-gradient(to bottom,rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://sprig.hackclub.com/pcb.svg")',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
highlight="#427A43"
>
<Image
src="https://sprig.hackclub.com/pcb.svg"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<img
src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
sx={{ width: ['250px', '450px', '500px'] }}
sx={{
width: ['250px', '450px', '500px'],
position: 'relative',
zIndex: 2
}}
/>
<Text
as="p"
@ -56,28 +63,37 @@ export default function SprigConsole({ stars }) {
py: 1,
width: 'fit-content',
borderRadius: 'extra',
color: '#016535'
color: '#016535',
zIndex: 2,
position: 'relative'
}}
>
{450 - consoleCount} consoles left
{420 - consoleCount} consoles left
</Text>
<Grid columns={[1, '1.2fr 1fr']}>
<Grid columns={[1, '1.2fr 1fr']} sx={{zIndex: 2, position: 'relative'}}>
<Box>
<img
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
sx={{
width: '120%',
ml: '-10%',
display: [null, 'none', 'none']
display: [null, 'none', 'none'],
}}
/>
<Text as="p" variant="subtitle" mt={[0, null, null]}>
Play your own Sprig games on this console, which you can assemble and disassemble. Each kit includes
parts needed for getting started with hardware engineering and
embedded systems programming.{' '}
Play your own Sprig games on this console, which you can assemble
and disassemble. Each kit includes parts needed for getting
started with hardware engineering and embedded systems
programming.{' '}
</Text>
<Text sx={{ fontSize: ['18px', '20px', 3],
display: 'block', fontWeight: 'bold', mt: 2 }}>
<Text
sx={{
fontSize: ['18px', '20px', 3],
display: 'block',
fontWeight: 'bold',
mt: 2
}}
>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
@ -85,9 +101,10 @@ export default function SprigConsole({ stars }) {
content="click here to get started in our editor"
id="6"
icon="emoji"
link="https://editor.sprig.hackclub.com"
link="https://github.com/hackclub/sprig/blob/main/docs/GET_A_SPRIG.md"
primary="#427A43"
>
Make a game and share it in the gallery
Build a game and get your console
</Buttons>
{/* <Buttons
content="make a PR to our website, click for more instructions"
@ -97,7 +114,7 @@ export default function SprigConsole({ stars }) {
Share it in the gallery
</Buttons> */}
</Flex>
<Button
{/* <Button
as="a"
variant="primary"
sx={{
@ -110,7 +127,7 @@ export default function SprigConsole({ stars }) {
rel="noopener"
>
Get your console
</Button>
</Button> */}
</Box>
<Box></Box>
</Grid>

87
components/index/cards/sprig.js
View file

@ -62,7 +62,7 @@ function Game({ game, gameImage, gameImage1, ...props }) {
textDecoration: 'none'
}}
>
<Box
{/* <Box
sx={{
width: '100%',
height: '65%',
@ -123,7 +123,7 @@ function Game({ game, gameImage, gameImage1, ...props }) {
background: 'white'
}}
/>
</Box>
</Box> */}
<Box sx={{ display: 'flex', flex: '60% 40%', flexWrap: 'wrap' }}>
<Text
as="h3"
@ -137,8 +137,8 @@ function Game({ game, gameImage, gameImage1, ...props }) {
margin: '0.8rem 0 0.8rem 0',
fontSize: '1.4rem',
fontWeight: '400',
mt: 1,
mb: 0
my: 0,
lineHeight: '1.4rem'
}}
>
{game.title}
@ -167,8 +167,8 @@ function Game({ game, gameImage, gameImage1, ...props }) {
fontSize: '0.8rem',
color: 'snow',
padding: 0,
my: 0,
opacity: 0.3
opacity: 0.3,
mb: 1,
}}
>
<RelativeTime value={game.addedOn} titleFormat="YYYY-MM-DD" />
@ -184,21 +184,49 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
<CardModel
github_link="https://github.com/hackclub/sprig/"
color="white"
background="https://sprig.hackclub.com/background.jpg"
// background="https://sprig.hackclub.com/background.jpg"
stars={stars}
highlight="#FFDE4D"
sx={{ backgroundColor: '#0C0C16' }}
>
<img
<Image
src="https://sprig.hackclub.com/background.jpg"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<Image
src="https://sprig.hackclub.com/spriglogotext.png"
sx={{ width: ['150px', '180px', '220px'] }}
sx={{
width: ['150px', '180px', '220px'],
zIndex: 3,
position: 'relative'
}}
/>
<Grid columns={[1, 2]}>
<Box>
<Text as="p" variant="subtitle">
<Text
as="p"
variant="subtitle"
sx={{ zIndex: 2, position: 'relative' }}
>
Draw, make music, and craft games in our web-based JavaScript game
editor.
editor, which has been used by 7k+ makers around the world.
</Text>
<Text sx={{ fontSize: ['18px', '20px', 3],
display: 'block', fontWeight: 'bold', mt: 3 }}>
<Text
sx={{
fontSize: ['18px', '20px', 3],
display: 'block',
fontWeight: 'bold',
mt: 3
}}
>
Get involved
</Text>
<Flex sx={{ flexDirection: 'column' }}>
@ -207,8 +235,10 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
id="6"
icon="emoji"
link="https://editor.sprig.hackclub.com"
primary="#FFDE4D"
sx={{ color: 'black' }}
>
Build a Sprig game
Build a Sprig game
</Buttons>
{/* <Buttons
content="DM @leo in Slack to join"
@ -234,7 +264,7 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
Connect with other Sprig game developers
</Buttons>
</Flex>
<Button
{/* <Button
as="a"
variant="primary"
sx={{
@ -247,9 +277,9 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
rel="noopener"
>
Make a game
</Button>
</Button> */}
</Box>
<Box sx={{mt: [0, -4, -4]}}>
<Box sx={{ mt: [0, -4, -4] }}>
<Text sx={{ fontStyle: 'italic', fontSize: [1, '14px', '16px'] }}>
New from{' '}
<Link
@ -260,10 +290,27 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
</Link>
...
</Text>
<Flex sx={{ height: ['250px', '80%', '80%'], gap: '20px', mt: 3, width: ['100%', '90%', '90%'] }}>
<Grid
columns={[1, 1, 2]}
sx={{
// height: ['250px', '80%', '80%'],
gap: '20px',
mt: 3,
width: ['100%', '90%', '90%']
}}
>
<Game game={game[0]} gameImage={gameImage} />
<Game game={game[1]} gameImage1={gameImage1} sx={{display: ['flex', 'none', 'flex']}} />
</Flex>
<Game
game={game[1]}
gameImage1={gameImage1}
/>
<Game game={game[0]} gameImage={gameImage} sx={{ display: ['flex', 'none', 'flex'] }} />
<Game
game={game[1]}
gameImage1={gameImage1}
sx={{ display: ['flex', 'none', 'flex'] }}
/>
</Grid>
</Box>
</Grid>
</CardModel>

91
components/index/cards/winter.js
View file

@ -35,7 +35,8 @@ function BreakdownBox({
height: '100%',
cursor: `${href ? 'pointer' : 'default'}`,
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
zIndex: 2
// justifyContent: 'flex-end'
}}
variant="interactive"
@ -57,7 +58,7 @@ function BreakdownBox({
sx={{
width: 'fit-content',
bg: bg || 'white',
borderRadius: 18,
borderRadius: 10,
lineHeight: 0,
p: 2,
mb: 1,
@ -68,12 +69,13 @@ function BreakdownBox({
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
}}
>
<Icon glyph={icon} size={48} color={color || 'white'} />
<Icon glyph={icon} size={32} color={color || 'white'} />
</Box>
)}
<Heading
sx={{
fontSize: [2, 3, 4]
fontSize: ['20px', '24px', '26px'],
pt: [1, 2, 3]
}}
>
{text}
@ -81,7 +83,8 @@ function BreakdownBox({
<Text
as="p"
sx={{
fontSize: [2, 3]
fontSize: [1, '16px', '20px'],
lineHeight: 1.25
}}
>
{description}
@ -92,37 +95,53 @@ function BreakdownBox({
export default function Winter() {
return (
<Box sx={{position: 'relative'}}>
<Badge
variant="pill"
sx={{
position: 'absolute',
left: -3,
top: -1,
transform: 'rotate(-7deg)',
zIndex: 3
}}
>
Happening Now <Dot />
</Badge>
<CardModel
// <Box sx={{position: 'relative'}}>
<CardModel
color="white"
sx={{
backgroundSize: 'cover',
backgroundImage:
'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png)',
backgroundPosition: 'center top',
backgroundRepeat: 'no-repeat',
// backgroundImage:
// 'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png)',
// backgroundPosition: 'center top',
// backgroundRepeat: 'no-repeat',
backgroundColor: '#3561A4'
}}
position={[null, 'bottom', 'bottom']}
>
<Image
src="https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png"
sx={{
objectFit: 'cover',
position: 'absolute',
width: '100%',
height: '100%',
ml: -4,
mt: -4,
zIndex: 0
}}
/>
<Box
sx={{
position: 'absolute',
right: 3,
top: 3,
zIndex: 3,
px: 3,
py: 2,
background: 'rgba(255,255,255,0.2)',
borderRadius: 'extra',
fontWeight: 'bold',
}}
>
Happening now
</Box>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Winter Hardware Wonderland
Winter hardware wonderland
</Text>
<Text as="p" variant="subtitle">
Build your own electronics projects alongside hundreds of other teenagers in the Hack Club community!
</Text>
Build your own electronics projects alongside hundreds of other
teenagers in the Hack Club community!
</Text>
<Box>
<Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} py={3}>
<BreakdownBox
@ -154,20 +173,18 @@ export default function Winter() {
href="/slack"
/>
</Grid>
<Button
variant="primary"
sx={{
backgroundColor: '#3561A4',
color: 'white',
mt: 3
}}
as="a"
href="/winter"
<Buttons
content="click to learn more about how to submit a workshop"
id="13"
link="/winter"
icon="freeze"
primary="white"
sx={{ color: 'blue' }}
>
RSVP
</Button>
</Buttons>
</Box>
</CardModel>
</Box>
// </Box>
)
}

88
components/index/cards/workshops.js
View file

@ -20,7 +20,7 @@ import Buttons from './button'
const WorkshopCard = ({ slug, name, description, img, height, section, ...props }) => (
<Link
href={`/${slug}`}
href={`https://workshops.hackclub.com/${slug}`}
passHref
sx={{ textDecoration: 'none' }}
target="_blank"
@ -36,7 +36,10 @@ const WorkshopCard = ({ slug, name, description, img, height, section, ...props
p: [0, 0],
lineHeight: 0,
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
'& span': {
lineHeight: 1.25
}
}}
>
<Box sx={{ p: 3, lineHeight: 'body' }}>
@ -49,39 +52,20 @@ const WorkshopCard = ({ slug, name, description, img, height, section, ...props
sx={{
width: '100%',
height: height || '120px',
mt: 'auto',
backgroundImage: `url('${img}')`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
// mt: 'auto',
// backgroundImage: `url('${img}')`,
// backgroundSize: 'cover',
// backgroundPosition: 'center center',
// backgroundRepeat: 'no-repeat'
}}
>
{/* <img alt={`${name} demo`} src={img} /> */}
<Image alt={`${name} demo`} src={img} sx={{width: '100%', height: 'auto'}} />
</Box>
</Card>
</Link>
)
export default function Workshops({ data, stars }) {
const [workshop, setWorkshop] = useState('Splatter Paintv')
const [workshopSlug, setWorkshopSlug] = useState('')
// function New() {
// let rand = Math.floor(Math.random() * data.length - 2)
// setWorkshop(
// data[rand].name
// .replace('.js', '')
// .replace(/[-]/g, ' ')
// .replace(/[_]/g, ' ')
// .replace('.', '')
// .replace(/(?:^|\s|[-"'([{])+\S/g, (c) => c.toUpperCase())
// )
// setWorkshopSlug(data[rand].name)
// }
// console.log(data[Math.floor(Math.random() * data[0].length)])
return (
<CardModel
color="white"
@ -92,20 +76,19 @@ export default function Workshops({ data, stars }) {
}}
github_link="https://github.com/hackclub/workshops"
stars={stars}
highlight="blue"
>
<Text variant="title" sx={{fontSize: ['36px', 4, 5]}}>Workshops</Text>
<Box>
<Text as="p" variant="subtitle">
A collection of community-contributed, self-guided coding tutorials +
ideas. Learn to code by building, one project at a time.
</Text>
<Grid columns={[1, '0.8fr 1fr']}>
<Grid columns={[1, 1, 2]}>
<Flex sx={{ flexDirection: 'column' }}>
<Text sx={{ fontSize: ['18px', '20px', 3], fontWeight: 'bold', mt: 4 }}>
<Text as="p" variant="subtitle">
100+ community-contributed, self-guided coding tutorials and ideas. Learn to code by building, one project at a time.
</Text>
<Text sx={{ fontSize: ['18px', '20px', 3], fontWeight: 'bold', mt: 3 }}>
Get involved
</Text>
<Buttons id="14" link="https://workshops.hackclub.com" icon="code">
Follow a workshop and build a project
<Buttons id="14" link="https://workshops.hackclub.com" icon="code" primary="white" sx={{color: 'blue'}}>
Find a workshop
</Buttons>
<Buttons
content="click to learn more about how to submit a workshop"
@ -115,42 +98,27 @@ export default function Workshops({ data, stars }) {
>
Write and submit a workshop
</Buttons>
<Button
variant="primary"
sx={{
background: 'white',
color: 'blue',
mt: 3,
width: 'fit-content'
}}
as="a"
href="https://workshops.hackclub.com"
target="_blank"
rel="noopener"
>
Find workshops
</Button>
</Flex>
<Grid sx={{ gap: 3 }} columns={[1, 1, 2]} mt={[0, 2, 0]}>
<Grid sx={{ gap: 3 }} columns={[1, 1, 2]}>
<WorkshopCard
key="personal_website"
slug="personal_website"
name="Personal Website"
description="Make your first website from scratch"
img="https://workshops.hackclub.com/_next/image/?url=/content/workshops/personal_website/img/demo.png&w=1080&q=75"
key="splatter_paint"
slug="splatter_paint"
name="Splatter Paint"
description="Crazy colorful splatter paint in your browser with Paper.js"
img="https://cloud-3aosybiuc-hack-club-bot.vercel.app/1final-demo.png"
/>
<WorkshopCard
key="particle_physics"
slug="particle_physics"
name="Particle Physics"
description="Creating a basic particle physics simulation and rendering using p5.js"
description="Create a particle physics simulation and with p5.js"
img="https://cloud-k50jkthdw.vercel.app/0particle-physics-summary.png"
height="100px"
sx={{display: ['block', 'none', 'block']}}
sx={{display: ['flex', 'none', 'flex']}}
/>
</Grid>
</Grid>
</Box>
{/* <Fade spy={workshop} bottom>
<Text
// onClick={New}

11
components/index/carousel-cards.js
View file

@ -44,9 +44,7 @@ export default function CarouselCards({
>
<img
src={img}
width={["30", "40", "40"]}
height={["30", "40", "40"]}
sx={{ position: 'absolute', top: '-20px', left: [3, 4, 4], zIndex: 2 }}
sx={{ position: 'absolute', top: ["-26px", "-30px", "-40px"], left: ["10px", "12px", "15px"], zIndex: 2, width: ["42px", "50px", "58px"], height: ["42px", "50px", "58px"] }}
/>
<Card
// variant="interactive"
@ -55,12 +53,14 @@ export default function CarouselCards({
backgroundColor: background,
position: 'relative',
color: 'white',
width: ['200px', '300px', '300px']
width: ['200px', '300px', '300px'],
padding: ['12px !important', '16px !important', '20px !important'],
height: '100%'
}}
>
<Text
as="h2"
sx={{ color: titleColor, fontSize: ['16px', '16px', '18px'] }}
sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
>
{title}
</Text>
@ -70,6 +70,7 @@ export default function CarouselCards({
<Icon
glyph="external"
size={32}
color="#E9E9E9"
sx={{ position: 'absolute', top: 2, right: 2, opacity: 0.3, fontSize: [1, '16px', '20px'] }}
/>
</Card>

49
components/index/carousel.js
View file

@ -18,13 +18,6 @@ import PageVisibility from 'react-page-visibility'
import { Fade } from 'react-reveal'
/** @jsxImportSource theme-ui */
// const noOfCards = 7
// const move = keyframes`
// 0% { transform: translateX(150vw); }
// 100% { transform: translateX(-50vw)}
// `
export default function Carousel() {
let [speed, setSpeed] = useState(5)
@ -35,24 +28,13 @@ export default function Carousel() {
}
return (
// <Box
// sx={{
// display: 'flex',
// animation: `${move} 10s linear infinite`,
// gap: '10px',
// width: '150vw',
// flexWrap: 'nowrap',
// transform: 'translateX(0)',
// animationPlayState: 'paused',
// '&:hover': {
// animationPlayState: 'paused'
// }
// }}
// >
<PageVisibility onChange={handleVisibilityChange}>
{pageIsVisible && (
<Box>
<Box sx={{ maxWidth: 'layout', margin: 'auto', pt: [3, 4, 5] }} as="div">
<Box
sx={{ maxWidth: 'layout', margin: 'auto', pt: [3, 4, 5] }}
as="div"
>
<Text variant="eyebrow" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
Here's a few projects you could get involved in:
</Text>
@ -61,7 +43,7 @@ export default function Carousel() {
{() => (
<Box
as="div"
sx={{ display: 'flex', py: 4 }}
sx={{ display: 'flex', py: [3, 4, 5] }}
onMouseOver={() => setSpeed(3)}
onMouseOut={() => setSpeed(6)}
>
@ -70,7 +52,7 @@ export default function Carousel() {
titleColor="yellow"
descriptionColor="white"
title="Sprig"
description="Learn to code by making games in a JavaScript game editor"
description="Join hundreds of teenagers making tile-based JavaScript games"
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="https://sprig.hackclub.com"
/>
@ -78,8 +60,8 @@ export default function Carousel() {
background="#000"
titleColor="#FF4794"
descriptionColor="white"
title="EPOCH"
description="The most epic high school hackathon this new years"
title="Epoch"
description="Attend the most epic high school hackathon this New Years"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
link="https://epoch.hackclub.com"
/>
@ -88,7 +70,7 @@ export default function Carousel() {
titleColor="white"
textColor="white"
title="Clubs network"
description="High school students come together to have fun and code, IRL"
description="Join one of 400+ coding clubs around the world"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png"
link="/clubs"
/>
@ -97,7 +79,7 @@ export default function Carousel() {
titleColor="red"
textColor="white"
title="Hack Club Bank"
description="Fiscal sponsor and banking platform to organize anything"
description="No. 1 fiscal sponsor for teenagers (we crossed $7 million in transactions)"
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
link="/bank"
/>
@ -106,7 +88,7 @@ export default function Carousel() {
titleColor="dark"
descriptionColor="black"
title="Some Assembly Required"
description="An approachable introduction to learning Assembly"
description="The 4th most starred Assembly repository on GitHub"
img="https://emoji.slack-edge.com/T0266FRGM/someassemblyrequired/cfacfacaaa2d8b1d.png"
link="https://github.com/hackclub/some-assembly-required"
/>
@ -115,7 +97,7 @@ export default function Carousel() {
titleColor="#CAB4D4"
textColor="#CAB4D4"
title="Sinerider"
description="💖 A game about love, math, and graphing built by teenagers"
description="Help build a game about love, math, and graphing 💖"
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
link="https://sinerider.hackclub.com"
/>
@ -124,8 +106,8 @@ export default function Carousel() {
titleColor="yellow"
textColor="white"
title="High school Hackathons"
description="🔍 A curated list of high school hackathons."
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
description="🔍 A curated list of high school hackathons with hundreds of events"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f469-200d-1f4bb@2x.png"
link="/hackathons"
/>
<CarouselCards
@ -133,7 +115,7 @@ export default function Carousel() {
titleColor="dark"
descriptionColor="black"
title="Workshops"
description="100+ short coding workshops to start building :)"
description="100+ coding workshops to build a project in under an hour"
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
link="https://workshops.hackclub.com"
/>
@ -143,6 +125,5 @@ export default function Carousel() {
</Box>
)}
</PageVisibility>
// </Box>
)
}

39
components/index/github.js
View file

@ -27,7 +27,26 @@ export default function GitHub({
...props
}) {
return (
<Box style={{ width: 'fit-content', display: 'inline' }}>
<Box
style={{
width: 'fit-content',
position: ['relative', 'absolute', 'absolute'],
display: 'block',
top: '-10px',
right: 0
}}
>
<Text
as="p"
sx={{
// transform: [null, null, 'rotate(3deg)'],
fontSize: ['8px', '8px', '10px'],
textAlign: ['left', 'left', 'right'],
width: '100%'
}}
>
Live from GitHub
</Text>
<Badge
variant="pill"
bg="black"
@ -35,11 +54,10 @@ export default function GitHub({
flexGrow: 1,
color: 'white',
fontWeight: '400 !important',
position: 'absolute',
top: 0,
right: 2,
textAlign: ['left', 'left', 'right'],
zIndex: 4,
transform: [null, null, 'rotate(3deg)']
// transform: [null, null, 'rotate(3deg)'],
float: ['left', 'left', 'right']
}}
{...props}
>
@ -62,7 +80,10 @@ export default function GitHub({
{user != null ? (
user != 'dependabot[bot]' ? (
user != 'github-actions[bot]' ? (
<img src={img} sx={{ borderRadius: '100%', height: '90%', mr: 2 }} />
<img
src={img}
sx={{ borderRadius: '100%', height: '90%', mr: 2 }}
/>
) : (
<></>
)
@ -113,7 +134,11 @@ export default function GitHub({
user != 'github-actions[bot]' ? (
<Text
as="span"
sx={{ fontSize: ['8px','8px','10px'], color: 'sunken', mx: 2 }}
sx={{
fontSize: ['8px', '8px', '10px'],
color: 'sunken',
mx: 2
}}
>
<RelativeTime value={time} titleformat="iso8601" />
</Text>

7
components/nav.js
View file

@ -52,10 +52,12 @@ const Root = styled(Box)`
}
`
export const Content = styled(Container)`
export const Content = styled(Box)`
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1024px;
margin: auto;
position: relative;
z-index: 2;
padding-left: ${theme.space[3]}px;
@ -110,9 +112,6 @@ const layout = props =>
@media (min-width: 56em) {
display: flex;
justify-content: flex-end;
position: absolute;
left: 65%;
transform: translateX(-50%);
}
a {
font-size: ${theme.fontSizes[1]}px;

3
components/photo.js
View file

@ -16,7 +16,7 @@ const Caption = styled(Text)`
z-index: 0;
`
const Photo = ({ src, width, height, alt, showAlt, dark, ...props }) => {
const Photo = ({ src, width, height, alt, showAlt, dark, loading, ...props }) => {
const [colorMode] = useColorMode()
const showCaption = showAlt && alt
return (
@ -41,6 +41,7 @@ const Photo = ({ src, width, height, alt, showAlt, dark, ...props }) => {
width={width}
height={height}
layout="responsive"
loading={loading || 'lazy'}
/>
{showCaption && (
<Caption

2
pages/api/games.js
View file

@ -2,7 +2,7 @@ export default async function getGames(req, res) {
let games = await fetch(
'https://editor.sprig.hackclub.com/metadata.json'
).then(res => res.json())
games = games.sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn)).slice(0, 2)
games = games.sort((a, b) => new Date(b.addedOn) - new Date(a.addedOn)).slice(0, 4)
return res.json(games)
}

47
pages/api/sprig-games.js Normal file
View file

@ -0,0 +1,47 @@
// export default async function getGames(req, res) {
// // let imgURL = undefined
// const decode = ({ data, width }) => {
// const decodedString = atob(data)
// const l = decodedString.length
// const buf = new Uint8ClampedArray(l)
// for (let i = 0; i < l; i++) {
// const char = decodedString[i]
// const byte = char.charCodeAt(0)
// buf[i] = byte
// }
// return new ImageData(buf, width)
// }
// async function load(title) {
// const res = await fetch(
// `https://editor.sprig.hackclub.com/api/thumbnail/${title}`
// )
// const json = await res.json()
// if (json.image.kind === 'png') {
// return `data:image/png;base64,${json.image.data}`
// } else {
// // Raw, hopefully
// // const imageData = decode(json.image)
// // const c = document.createElement('canvas')
// // c.width = imageData.width
// // c.height = imageData.height
// // c.getContext('2d').putImageData(imageData, 0, 0)
// // c.style['image-rendering'] = 'pixelated'
// // return c.toDataURL()
// return null
// }
// }
// // const fetcher = async function getImage() {
// // const thing0 = await load('Maze_Runner')
// // const thing1 = await load('randomworld')
// // setGameImage(thing0)
// // setGameImage1(thing1)
// // }
// let image = await load('Maze_Runner')
// res.json(image)
// // res.json(fetcher)
// }

535
pages/index.js
View file

@ -47,6 +47,8 @@ import GitHub from '../components/index/github'
import Photo from '../components/photo'
import ReactTooltip from 'react-tooltip'
import Winter from '../components/index/cards/winter'
import Comma from '../components/comma'
import CarouselCards from '../components/index/carousel-cards'
function Page({
hackathonsData,
@ -54,6 +56,7 @@ function Page({
slackData,
gitHubData,
gitHubDataLength,
consoleCount,
stars,
// githubData2,
dataPieces,
@ -69,68 +72,66 @@ function Page({
let [slackKey, setSlackKey] = useState(0)
let [key, setKey] = useState(0)
useEffect(() => {
function getNewGitHubActivity() {
setKey(Math.random())
setGithub(Math.floor(Math.random() * gitHubDataLength))
console.log(gitHubData[github])
}
setInterval(getNewGitHubActivity, 30000)
}, [])
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
// useEffect(() => {
// function getNewGitHubActivity() {
// setKey(Math.random())
// setGithub(Math.floor(Math.random() * gitHubDataLength))
// console.log(gitHubData[github])
// }
// setInterval(getNewGitHubActivity, 30000)
// }, [])
useEffect(() => {
window.kc = `In the days of old, when gaming was young \nA mysterious code was found among \nA sequence of buttons, pressed in a row \nIt unlocked something special, we all know \n\nUp, up, down, down, left, right, left, right \nB, A, Start, we all have heard it's plight \nIn the 8-bit days, it was all the rage \nAnd it still lives on, with time, it will never age \n\nKonami Code, it's a legend of days gone by \nIt's a reminder of the classics we still try \nNo matter the game, no matter the system \nThe code will live on, and still be with them \n\nSo the next time you play, take a moment to pause \nAnd remember the code, and the Konami cause \nIt's a part of gaming's history, and a part of our lives \nLet's keep it alive, and let the Konami Code thrive!\n`
}, [])
let imgURL = undefined
// let imgURL = undefined
const decode = ({ data, width }) => {
const decodedString = atob(data)
const l = decodedString.length
const buf = new Uint8ClampedArray(l)
for (let i = 0; i < l; i++) {
const char = decodedString[i]
const byte = char.charCodeAt(0)
buf[i] = byte
}
return new ImageData(buf, width)
}
// const decode = ({ data, width }) => {
// const decodedString = atob(data)
// const l = decodedString.length
// const buf = new Uint8ClampedArray(l)
// for (let i = 0; i < l; i++) {
// const char = decodedString[i]
// const byte = char.charCodeAt(0)
// buf[i] = byte
// }
// return new ImageData(buf, width)
// }
async function load(title) {
if (imgURL) return
try {
const res = await fetch(
`https://editor.sprig.hackclub.com/api/thumbnail/${title}`
)
const json = await res.json()
// async function load(title) {
// if (imgURL) return
// try {
// const res = await fetch(
// `https://editor.sprig.hackclub.com/api/thumbnail/${title}`
// )
// const json = await res.json()
if (json.image.kind === 'png') {
return `data:image/png;base64,${json.image.data}`
} else {
// Raw, hopefully
const imageData = decode(json.image)
const c = document.createElement('canvas')
c.width = imageData.width
c.height = imageData.height
c.getContext('2d').putImageData(imageData, 0, 0)
c.style['image-rendering'] = 'pixelated'
return c.toDataURL()
}
} catch (err) {
console.error(err)
}
}
// if (json.image.kind === 'png') {
// return `data:image/png;base64,${json.image.data}`
// } else {
// // Raw, hopefully
// const imageData = decode(json.image)
// const c = document.createElement('canvas')
// c.width = imageData.width
// c.height = imageData.height
// c.getContext('2d').putImageData(imageData, 0, 0)
// c.style['image-rendering'] = 'pixelated'
// return c.toDataURL()
// }
// } catch (err) {
// console.error(err)
// }
// }
const fetcher = async function getImage() {
const thing0 = await load(gameTitle[0])
const thing1 = await load(gameTitle[1])
setGameImage(thing0)
setGameImage1(thing1)
}
// const fetcher = async function getImage() {
// const thing0 = await load(gameTitle[0])
// const thing1 = await load(gameTitle[1])
// setGameImage(thing0)
// setGameImage1(thing1)
// }
const { data, error } = useSWR('/api/profile-data', fetcher)
// const { data, error } = useSWR('/api/profile-data', fetcher)
const easterEgg = () => {
alert('Hey, you typed the Konami Code!')
@ -149,25 +150,31 @@ function Page({
const [count, setCount] = useState(0)
let photos = [
'/home/hero.png',
'/home/golden-train.png',
'/home/flagship_4.jpg',
'/home/meetings.png',
'/home/flagship_megan.png',
'/hackathons/mahacks.jpeg'
let images = [
{
alt: '10 day cross-country hackathon with 42 hackers in 2020',
src: '/home/golden-train.png'
},
{ alt: 'Map of Hack Clubs around the world', src: '/home/map.png' },
{
alt: 'Hack Clubbers at Space X HQ in LA',
src: '/home/zephyr-spacex.jpeg'
},
{ alt: 'Hack Clubbers at Flagship, 2019', src: '/home/flagship_4.jpg' },
// {alt: 'Virtual Hack Club meeting, 2022', src: '/home/meetings.png'},
{
alt: 'Hacker reverse engineering a power extender!',
src: '/home/assemble-hardware.jpg'
},
{
alt: 'MA Hacks, Hack Clubber organized hackathon',
src: '/hackathons/mahacks.jpeg'
},
{ alt: 'AMA with Sal Khan', src: '/home/ama.png' }
// {alt: 'Hack Clubber giving a talk on sponsorship', src: '/home/flagship_megan.png'},
]
let alt = [
'Flagship meeting with club leaders, 2019',
'Hack Clubbers on cross country train trip, Zephyr',
'Hack Clubbers at Flagship, 2019',
'Virtual Hack Club meeting, 2022',
'Hack Clubber giving a talk on sponsorship',
'Hack Clubber organized MA Hacks'
]
if (count == photos.length) {
if (count == images.length - 1) {
setCount(0)
}
@ -175,7 +182,7 @@ function Page({
<>
<Meta
as={Head}
title="Don’t run your coding club alone"
title="A home for high school coders"
description="Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
image="https://cloud-epiki4yvg.vercel.app/2020-09-09_drbp62kayjuyyy0ek89mf9fwcp5t4kuz.jpeg"
/>
@ -224,7 +231,7 @@ function Page({
src={AssembleImgFile}
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
priority
gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5))"
gradient="linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.6))"
/>
<Box
sx={{
@ -235,33 +242,33 @@ function Page({
py: 4
}}
>
<GitHub
type={gitHubData[github].type}
img={gitHubData[github].userImage}
user={gitHubData[github].user}
time={gitHubData[github].time}
message={gitHubData[github].message}
key={key}
/>
<Fade>
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
Welcome to Hack Club
</Text>
</Fade>
<Fade bottom delay={200}>
<Heading
as="h1"
variant="title"
sx={{
color: 'white',
mb: [3, 4],
mx: 'auto',
zIndex: 1,
textAlign: 'left',
fontSize: ['36px', '48px', '64px']
}}
>
<Heading>
<Text
as="h1"
variant="title"
sx={{
color: 'white',
mb: [3, 4],
mx: 'auto',
zIndex: 1,
textAlign: 'left',
fontSize: ['36px', '48px', '64px'],
lineHeight: 1.1
}}
>
We are <Comma>{slackData.total_members_count}</Comma> high
schoolers from around the world that come together and code.
</Text>
<Button variant="ctaLg" as="a" href="/slack">
Join our community
</Button>
{/* <Text
as="span"
sx={{
lineHeight: 1.1,
@ -330,7 +337,7 @@ function Page({
hacker ethic{' '}
</Text>
by building things together.
</Text>
</Text> */}
</Heading>
</Fade>
<Box
@ -377,17 +384,30 @@ function Page({
The rundown
</Text>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Join us in discovering the joy of code
Join us in discovering the{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: 'red'
}}
>
joy of code
</Text>
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Hack Clubbers come together to code because it's fun.
Whether you’re a beginner
programmer or have years of experience, there’s a place for you at
Hack Club. Read about our{' '}
Every day, thousands of Hack Clubbers gather online and in-person
to make things with code. Whether you’re a beginner programmer or
have years of experience, there’s a place for you at Hack Club.
Read about our{' '}
<Link href="/philosophy" target="_blank" rel="noopener">
hacker ethic
</Link>
@ -428,14 +448,19 @@ function Page({
>
<Photo
src={
count == photos.length - 1
? photos[0]
: photos[count + 1]
count == images.length - 1
? images[0].src
: images[count + 1].src
}
alt={
count == images.length - 1
? images[0].alt
: images[count + 1].alt
}
alt={alt[count + 1]}
width={3000}
height={2550}
showAlt
// loading="eager"
/>
</Box>
</Box>
@ -464,11 +489,12 @@ function Page({
data-text-color="black"
>
<Photo
src={photos[count]}
alt={alt[count]}
src={images[count].src}
alt={images[count].alt}
width={3000}
height={2550}
showAlt
// loading="eager"
/>
</Box>
</Box>
@ -501,39 +527,35 @@ function Page({
color: 'inherit',
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra',
'&:hover': {
bg: 'purple',
color: 'white',
cursor: 'pointer'
},
'&:hover span': {
color: 'white'
}
borderRadius: 'extra'
// '&:hover': {
// bg: 'purple',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
as="a"
href="#community"
// as="a"
// href="#community"
// data-effect="solid"
// data-tip="learn more about our online community"
// data-delay-show="142"
>
<Text as="span" color="purple">
<Text as="span" color="red">
1
</Text>
<Text as="p" variant="subtitle">
<strong>Connect with other teenage coders</strong>
We're united by our love for coding but talk about everything else we do too.
Have a coding question? Looking for project feedback? You’ll
find <Comma>{slackData.total_members_count}</Comma> fabulous
people to talk to in our global{' '}
<Link href="/clubs" target="_blank" rel="noopener">
Slack{' '}
</Link>
(Discord, but better), active at all hours.
</Text>
<Icon
glyph="external"
size={32}
sx={{
position: 'absolute',
top: 1,
right: 2,
color: 'white'
}}
/>
</Grid>
<Grid
columns="auto 1fr"
@ -544,50 +566,37 @@ function Page({
color: 'inherit',
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra',
'&:hover': {
bg: 'cyan',
color: 'white',
cursor: 'pointer'
},
'&:hover span': {
color: 'white'
}
borderRadius: 'extra'
// '&:hover': {
// bg: 'cyan',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
as="a"
href="#irl"
// as="a"
// href="#irl"
// data-effect="solid"
// data-tip="check out clubs and hackathons at Hack Club"
// data-delay-show="142"
>
<Text as="span" color="cyan">
<Text as="span" color="orange">
2
</Text>
<Text
as="p"
variant="subtitle"
sx={{
mt: 0,
pb: 3
mt: 0
}}
>
<strong>Gather IRL with other makers</strong> Meet other
Hack Clubbers in your community to code and make things, be
it once a week after school (at{' '}
<Link href="/clubs">Hack Clubs</Link>), a one-time 48 hour
event (<Link href="/hackathons">hackathons</Link>), or
anything in-between!
<strong>Build open source learning tools</strong>
We build large open source projects together (3k+ PRs a
year) like this website, a game engine, daily streak system,
and more!
</Text>
<Icon
glyph="external"
size={32}
sx={{
position: 'absolute',
top: 1,
right: 2,
color: 'white'
}}
/>
</Grid>
<Grid
columns="auto 1fr"
@ -598,47 +607,64 @@ function Page({
color: 'inherit',
position: 'relative',
textDecoration: 'none',
borderRadius: 'extra',
'&:hover': {
bg: 'orange',
color: 'white',
cursor: 'pointer'
},
'&:hover span': {
color: 'white'
}
borderRadius: 'extra'
// '&:hover': {
// bg: 'orange',
// color: 'white',
// cursor: 'pointer'
// },
// '&:hover span': {
// color: 'white'
// }
}}
as="a"
href="#tools"
// as="a"
// href="#tools"
// data-tip="click to projects we're currently working on"
// data-effect="solid"
// data-delay-show="142"
>
<Text as="span" color="orange">
<Text as="span" color="yellow">
3
</Text>
<Text as="p" variant="subtitle">
<strong>Build open-source learning tools</strong>
Contribute to projects like a game engine, daily streak
system, graphing game, and more!
<strong>Gather IRL with other makers</strong>
Meet other Hack Clubbers in your community to build together
at one of the 400+{' '}
<Link href="/clubs" target="_blank" rel="noopener">
Hack Clubs
</Link>{' '}
and{' '}
<Link href="/hackathons" target="_blank" rel="noopener">
high school hackathons
</Link>
.
</Text>
<Icon
glyph="external"
size={32}
sx={{
position: 'absolute',
top: 1,
right: 2,
color: 'white'
}}
/>
</Grid>
</Grid>
</Grid>
</Box>
</Box>
{/* <CarouselCards
background="#000"
titleColor="yellow"
descriptionColor="white"
title="Sprig"
description="Learn to code by making games in a JavaScript game editor"
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
link="https://sprig.hackclub.com"
/> */}
<Carousel />
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
<Box
as="section"
sx={{
background: 'snow',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%',
py: [3, 4, 5]
}}
>
<Box
sx={{
position: 'relative',
@ -648,55 +674,46 @@ function Page({
}}
pb={4}
>
<Text
variant="eyebrow"
as="p"
sx={{ fontSize: [1, 2, 3], mt: 2 }}
id="community"
>
Hack Clubbers
</Text>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Connect with each other from around the world
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
We gather both online and in-person to share our love of code and
make things together!
</Text>
<Box>
<Winter />
<Epoch />
<Slack slackKey={slackKey} data={slackData} events={events}/>
<Box sx={{ maxWidth: 'copyPlus' }}>
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
We connect with each other from around the world
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
We gather both online and in-person to share our love of code
and make things together!
</Text>
</Box>
<Winter />
<Epoch />
<Slack slackKey={slackKey} data={slackData} events={events} />
</Box>
<Box
py={4}
sx={{
background: 'snow',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%'
}}
id="tools"
>
<Box py={4} id="tools">
<Box
sx={{
width: '90vw',
maxWidth: 'layout',
margin: 'auto'
margin: 'auto',
position: 'relative'
}}
>
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
{/* <Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
Hack Clubbers
</Text>
</Text> */}
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Build open source tools
We build open source tools
</Text>
<GitHub
type={gitHubData[github].type}
img={gitHubData[github].userImage}
user={gitHubData[github].user}
time={gitHubData[github].time}
message={gitHubData[github].message}
key={key}
/>
<Text
variant="subtitle"
as="p"
@ -717,12 +734,36 @@ function Page({
<SprigConsole
delay={300}
stars={stars.sprigHardware.stargazerCount}
consoleCount={consoleCount}
/>
<Sinerider delay={200} stars={stars.sinerider.stargazerCount} />
<Workshops delay={400} stars={stars.hackclub.stargazerCount} />
</Box>
</Box>
<Box>
<Box
sx={{ position: 'relative' }}
// sx={{
// background: 'sunken',
// backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
// backgroundSize: '40px 40px',
// backgroundRepeat: 'repeat',
// backgroundPosition: '10% 10%',
// '&:hover': {
// backgroundImage: `url('https://icons.hackclub.com/api/icons/0x000000/glyph:rep.svg')`
// }
// }}
>
<Box
sx={{
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0
}}
>
{}
</Box>
<Box
py={3}
sx={{
@ -732,20 +773,18 @@ function Page({
}}
id="irl"
>
<Text variant="eyebrow" as="p">
{/* <Text variant="eyebrow" as="p">
Hack Clubbers
</Text>
</Text> */}
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Create spaces to have fun with code
Join or run an IRL coding event
</Text>
<Text
variant="subtitle"
as="p"
sx={{ fontSize: [1, '16px', '20px'] }}
>
Meet other Hack Clubbers in your community to code and make
things, be it once a week after school, a one-time 48 hour
event, or anything in-between!
Hack Clubs are coding clubs that build something every meeting
</Text>
<Clubs />
<Hackathons
@ -769,7 +808,7 @@ function Page({
<Text as="p" variant="eyebrow">
Let's recap
</Text>
<Heading as="h2" variant="title" sx={{fontSize: ['36px', 4, 5]}}>
<Heading as="h2" variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
Find your place with{' '}
<Text
as="span"
@ -879,8 +918,8 @@ function Page({
<Stage
icon="github"
color="white"
name="Explore our open-sourced tools"
desc="We're currently building a game engine, daily streak system, graphing game, and more!"
name="Explore our open sourced tools"
desc="We’re currently building a game engine, daily streak system, graphing game, and more!"
sx={{
p: {
fontSize: [1, '16px', '20px']
@ -893,33 +932,32 @@ function Page({
</Card>
</Grid>
<MailingList />
</Box>
</Box>
</Box>
<Footer
dark
sx={{
backgroundColor: 'dark',
position: 'relative',
overflow: 'hidden',
textShadow: '0 1px 2px rgba(0,0,0,0.375)',
'h2,span,p,a': { color: 'white !important' },
'> div img': { objectPosition: ['left', 'center'] },
svg: {
fill: 'white',
filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
}
}}
// dark
// sx={{
// backgroundColor: 'dark',
// position: 'relative',
// overflow: 'hidden',
// textShadow: '0 1px 2px rgba(0,0,0,0.375)',
// 'h2,span,p,a': { color: 'white !important' },
// '> div img': { objectPosition: ['left', 'center'] },
// svg: {
// fill: 'white',
// filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))'
// }
// }}
>
<BGImg
{/* <BGImg
width={2544}
height={2048}
gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
src={FooterImgFile}
placeholder="blur"
alt="Globe with hundreds of Hack Clubs"
/>
/> */}
<style>
{`a{
color: #338eda
@ -975,6 +1013,10 @@ export async function getStaticProps() {
res => res.json()
)
const consoleCount = await fetch(
'https://site-git-v4.hackclub.dev/api/sprig-console'
).then(r => r.json())
let events = await fetch(
'https://events.hackclub.com/api/events/upcoming/'
).then(res => res.json())
@ -986,6 +1028,7 @@ export async function getStaticProps() {
gameTitle,
gitHubData,
gitHubDataLength,
consoleCount,
// githubData2,
hackathonsData,
bankData,

BIN
public/home/ama.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.9 MiB

BIN
public/home/assemble-group.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.6 MiB

BIN
public/home/assemble-hardware.JPG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
public/home/map.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/home/slack_ama.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
public/home/zephyr-spacex.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 463 KiB