mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
wahoo
This commit is contained in:
Belle
parent
0cdc61ae8e
commit
a2fbe047d9
20 changed files with 670 additions and 441 deletions
30
components/dot.js
Normal file
30
components/dot.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { Text } from "theme-ui"
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
||||
const flashing = keyframes({
|
||||
from: { opacity: 0 },
|
||||
'50%': { opacity: 1 },
|
||||
to: { opacity: 0 }
|
||||
})
|
||||
|
||||
export default function Dot() {
|
||||
return (
|
||||
<Text
|
||||
sx={{
|
||||
bg: 'green',
|
||||
color: 'white',
|
||||
borderRadius: 'circle',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
width: '.4em',
|
||||
height: '.4em',
|
||||
marginRight: '.4em',
|
||||
marginBottom: '.12em',
|
||||
animationName: `${flashing}`,
|
||||
animationDuration: '3s',
|
||||
animationTimingFunction: 'ease-in-out',
|
||||
animationIterationCount: 'infinite'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -37,31 +37,59 @@ export default function Bank({ data }) {
|
|||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundColor: 'dark'
|
||||
backgroundColor: 'dark',
|
||||
minHeight: ['300px', '400px','300px']
|
||||
}}
|
||||
>
|
||||
<Text variant="title" sx={{ color: 'red' }}>
|
||||
<Text variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5] }}>
|
||||
Hack Club Bank
|
||||
</Text>
|
||||
<Grid columns={[1, '1fr 0.6fr']}>
|
||||
<Grid columns={[1, 1, '1fr 0.6fr']}>
|
||||
<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!
|
||||
Tool developed to make organising easier: a fiscal sponsor and
|
||||
banking platform in one to help you organize clubs, hackathons,
|
||||
and more!
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Buttons
|
||||
content="501(c)3 status, custom dashboard, debit cards, free domains/google workspace, and more"
|
||||
id="15"
|
||||
icon="bank-account"
|
||||
link="/bank"
|
||||
<Box sx={{ position: 'relative', width: '100%', display: [null, 'none', 'none'], mb: '-50px', mt: 3}}>
|
||||
{' '}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '250px',
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
backgroundImage:
|
||||
'url("https://cloud-bubbgk6up-hack-club-bot.vercel.app/0gallery_hw__cc6xqmf7tbyq_medium_2x__1_.png")',
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
marginX: 'auto',
|
||||
display: 'block'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Run your event/organziation on Hack Club Bank
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundImage:
|
||||
'url("https://cloud-f1orvtxst-hack-club-bot.vercel.app/0bank_vid.gif")',
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
margin: 'auto',
|
||||
top: '13px',
|
||||
left: '45px',
|
||||
width: '75%',
|
||||
height: '80%',
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
></Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="primary"
|
||||
as="a"
|
||||
|
|
@ -75,7 +103,14 @@ export default function Bank({ data }) {
|
|||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
<Box sx={{ position: 'absolute', right: '-100px', top: 5 }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: [0 ,0,'-100px'],
|
||||
bottom: [0 ,'-120px','-100px'],
|
||||
display: ['none', 'block', 'block']
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -84,7 +119,6 @@ export default function Bank({ data }) {
|
|||
position: 'relative',
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
// zIndex: 2,
|
||||
'&:before': {
|
||||
content: '""',
|
||||
backgroundImage:
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import ReactTooltip from 'react-tooltip'
|
|||
import Icon from '@hackclub/icons'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Buttons({ children, icon, id, content, link }) {
|
||||
export default function Buttons({ children, icon, id, content, link, ...props }) {
|
||||
return (
|
||||
<Box
|
||||
py={1}
|
||||
|
|
@ -41,7 +41,7 @@ export default function Buttons({ children, icon, id, content, link }) {
|
|||
borderRadius: '100px',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'start',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
px: 3,
|
||||
py: 1,
|
||||
|
|
@ -49,12 +49,13 @@ export default function Buttons({ children, icon, id, content, link }) {
|
|||
textTransform: 'none',
|
||||
fontWeight: '400',
|
||||
fontSize: [1, '14px', '16px'],
|
||||
backdropFilter: 'blur(2px)'
|
||||
backdropFilter: 'blur(2px)',
|
||||
}}
|
||||
as="a"
|
||||
as={"a"}
|
||||
href={link || '/'}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
{...props}
|
||||
>
|
||||
<Icon
|
||||
glyph={icon || 'plus-fill'}
|
||||
|
|
@ -62,7 +63,7 @@ export default function Buttons({ children, icon, id, content, link }) {
|
|||
size={24}
|
||||
mr={2}
|
||||
/>
|
||||
<Text sx={{ fontFamily: 'Phantom Sans' }}>{children}</Text>
|
||||
<Text sx={{ fontFamily: 'Phantom Sans', textAlign: 'left' }}>{children}</Text>
|
||||
</Button>
|
||||
<ReactTooltip
|
||||
id={id}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const CardModel = ({
|
|||
width: '100%',
|
||||
color: color,
|
||||
my: 4,
|
||||
p: 3,
|
||||
backgroundSize: 'cover',
|
||||
backgroundImage: `url(${background})` || '',
|
||||
backgroundPosition: 'center bottom',
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ export default function Clubs() {
|
|||
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: '100% auto'
|
||||
backgroundSize: ['cover', '100% auto', '100% auto'],
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -39,9 +40,10 @@ export default function Clubs() {
|
|||
borderRadius: 'default',
|
||||
px: 2,
|
||||
mx: [-2, 0],
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'red',
|
||||
bg: 'white'
|
||||
whiteSpace: [null, 'nowrap', 'nowrap'],
|
||||
color: ['white', 'red', 'red'],
|
||||
bg: ['transparent', 'white', 'white'],
|
||||
fontSize: ['36px', 4, 5]
|
||||
}}
|
||||
>
|
||||
Network of coding clubs
|
||||
|
|
@ -58,12 +60,19 @@ export default function Clubs() {
|
|||
things. You can start with no experience and build and ship a
|
||||
project every meeting.
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], 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="scan our clubs map and reach out to team@hackclub.com to be connected"
|
||||
content="click for our clubs map and reach out to team@hackclub.com to be connected"
|
||||
id="1"
|
||||
icon="rep"
|
||||
link="/map"
|
||||
|
|
|
|||
|
|
@ -13,17 +13,11 @@ import {
|
|||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
|
||||
import Dot from '../../dot'
|
||||
/** @jsxImportSource theme-ui */
|
||||
import { useEffect, useState } from 'react'
|
||||
// import { fairyDustCursor } from 'cursor-effects'
|
||||
|
||||
export default function Epoch() {
|
||||
// if (typeof window !== 'undefined') {
|
||||
// const targetElement = document.querySelector("#epoch")
|
||||
// new fairyDustCursor({element: targetElement})
|
||||
// }
|
||||
|
||||
const calculateTimeLeft = () => {
|
||||
const difference = +new Date(`2022-12-30T23:00:00.000Z`) - +new Date()
|
||||
|
||||
|
|
@ -136,7 +130,20 @@ export default function Epoch() {
|
|||
)
|
||||
})
|
||||
return (
|
||||
<CardModel
|
||||
<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"
|
||||
sx={{
|
||||
|
|
@ -147,16 +154,14 @@ export default function Epoch() {
|
|||
src="https://cloud-ox8syzbet-hack-club-bot.vercel.app/0ep0ch.svg"
|
||||
sx={{ width: ['150px', '180px', '220px'] }}
|
||||
/>
|
||||
<Grid columns={[1, '0.8fr 1fr', '0.8fr 1fr']} mt={3}>
|
||||
<Grid columns={[1, 1, '0.8fr 1fr']} mt={[0, 3, 3]}>
|
||||
<Box>
|
||||
{timer.length ? (
|
||||
<Grid
|
||||
key="{e}"
|
||||
gap={[1, 2, '25px']}
|
||||
columns={[
|
||||
'1fr 1fr 1fr 1fr'
|
||||
]}
|
||||
sx={{mr: 2}}
|
||||
columns={['1fr 1fr 1fr 1fr']}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
{timer}
|
||||
</Grid>
|
||||
|
|
@ -164,19 +169,18 @@ export default function Epoch() {
|
|||
<></>
|
||||
)}
|
||||
</Box>
|
||||
<Box mt="-100px" ml={3}>
|
||||
<Box mt={['-60px', '-20px', '-100px']} ml={[0, 3, 3]}>
|
||||
<Text as="p" variant="subtitle">
|
||||
Join us this winter as 150+ teenage hackers from all around the world
|
||||
travel to Delhi, India for Epoch — Hack Club’s first hackathon
|
||||
outside the US! We’ll build the unexpected, share what we’ve learnt
|
||||
Join us this winter as 150+ teenage hackers from all around the
|
||||
world travel to Delhi, India for Epoch! Together, we’ll build the unexpected, share what we’ve learnt
|
||||
in 2022, and experience the thrill of being in-person together.
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: [2, 3],
|
||||
fontSize: ['18px', '20px', 3],
|
||||
display: 'block',
|
||||
fontWeight: 'bold',
|
||||
mt: 2,
|
||||
mt: [3, 3, 2],
|
||||
color: '#FF4794'
|
||||
}}
|
||||
>
|
||||
|
|
@ -189,7 +193,7 @@ export default function Epoch() {
|
|||
link="https://epoch.hackclub.com"
|
||||
icon="post"
|
||||
>
|
||||
Sign up and attend EPOCH
|
||||
Sign up and attend Epoch
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="join #epoch-bts on Slack"
|
||||
|
|
@ -197,7 +201,7 @@ export default function Epoch() {
|
|||
link="/slack"
|
||||
icon="idea"
|
||||
>
|
||||
Plan the hackathon
|
||||
Help plan the hackathon
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
|
|
@ -206,12 +210,18 @@ export default function Epoch() {
|
|||
href="https://epoch.hackclub.com/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{ background: '#FF4794', color: 'white', mt: 3 }}
|
||||
sx={{
|
||||
background: '#FF4794',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
mb: [3, null, null]
|
||||
}}
|
||||
>
|
||||
Sign up for Epoch
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import Event from '../events'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function Events({ data, stars, events }) {
|
||||
|
|
@ -28,7 +29,7 @@ export default function Events({ data, stars, events }) {
|
|||
backgroundSize: '100% auto'
|
||||
}}
|
||||
>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5], zIndex: 2 }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
|
||||
Virtual Events
|
||||
</Text>
|
||||
<Grid columns={[1, '0.6fr 1fr']}>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function Hackathons({ data, stars }) {
|
|||
github_link="https://github.com/hackclub/hackathons"
|
||||
// background="https://hackclub.com/bank/bg.webp"
|
||||
>
|
||||
<Text variant="title">High School Hackathons</Text>
|
||||
<Text variant="title" sx={{fontSize: ['36px', 4, 5]}}>High School Hackathons</Text>
|
||||
<Grid columns={[1, 2]}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
|
|
@ -40,7 +40,8 @@ export default function Hackathons({ data, stars }) {
|
|||
world. From an online community of organizers to free stickers and
|
||||
more!{' '}
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
<Text sx={{ fontSize: ['18px', '20px', 3],
|
||||
display: 'block', fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
|
|
@ -74,7 +75,7 @@ export default function Hackathons({ data, stars }) {
|
|||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
transform: 'translateY(25%)'
|
||||
transform: [null,'translateY(25%)' ,'translateY(25%)']
|
||||
}}
|
||||
>
|
||||
<ScrollingHackathons eventData={data} mode="await" />
|
||||
|
|
|
|||
|
|
@ -30,45 +30,56 @@ export default function Sinerider({ stars }) {
|
|||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
position="bottom"
|
||||
position={[null, "bottom", "bottom"]}
|
||||
>
|
||||
<img
|
||||
src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
|
||||
sx={{ width: ['200px', '250px', '300px'] }}
|
||||
/>
|
||||
<Grid columns={[1, '0.4fr 0.6fr']}>
|
||||
<Grid columns={[1, 1, '0.4fr 0.6fr']}>
|
||||
<Box></Box>
|
||||
<Box sx={{ mt: '-180px' }}>
|
||||
<Box sx={{ mt: ['-40px', '-40px', '-180px'] }}>
|
||||
<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
|
||||
make this thing real!
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], 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="join #gamedev in Slack to get started"
|
||||
id="4"
|
||||
icon="rainbow"
|
||||
href="/slack"
|
||||
// href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Create art for the game
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="DM @cwalker in Slack to learn more"
|
||||
// content="DM @cwalker in Slack to learn more"
|
||||
id="5"
|
||||
icon="view"
|
||||
href="/slack"
|
||||
// href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Be a scene maker
|
||||
</Buttons>
|
||||
<Buttons
|
||||
// content="DM @cwalker in Slack to learn more"
|
||||
id="26"
|
||||
icon="view"
|
||||
href="https://sinerider.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
View a game preview
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
variant="primary"
|
||||
|
|
@ -78,7 +89,7 @@ export default function Sinerider({ stars }) {
|
|||
mt: 3
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
href="https://github.com/hackclub/sinerider/#readme"
|
||||
>
|
||||
Join the development
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -17,37 +17,10 @@ import usePrefersMotion from '../../../lib/use-prefers-motion'
|
|||
import useHasMounted from '../../../lib/use-has-mounted'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import SlackEvents from '../../slack/slack-events'
|
||||
|
||||
import Event from '../events'
|
||||
import Dot from '../../dot'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const flashing = keyframes({
|
||||
from: { opacity: 0 },
|
||||
'50%': { opacity: 1 },
|
||||
to: { opacity: 0 }
|
||||
})
|
||||
|
||||
function Dot() {
|
||||
return (
|
||||
<Text
|
||||
sx={{
|
||||
bg: 'green',
|
||||
color: 'white',
|
||||
borderRadius: 'circle',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
width: '.4em',
|
||||
height: '.4em',
|
||||
marginRight: '.4em',
|
||||
marginBottom: '.12em',
|
||||
animationName: `${flashing}`,
|
||||
animationDuration: '3s',
|
||||
animationTimingFunction: 'ease-in-out',
|
||||
animationIterationCount: 'infinite'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// const Cover = () => (
|
||||
// <Box
|
||||
// sx={{
|
||||
|
|
@ -115,13 +88,13 @@ const Cover = () => (
|
|||
left: 0,
|
||||
right: 0,
|
||||
backgroundImage: t => t.util.gx('cyan', 'purple'),
|
||||
opacity: 0.9,
|
||||
opacity: 0.8,
|
||||
zIndex: 1
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
export default function Slack({ data, slackKey }) {
|
||||
export default function Slack({ data, slackKey, events }) {
|
||||
const hasMounted = useHasMounted()
|
||||
const prefersMotion = usePrefersMotion()
|
||||
|
||||
|
|
@ -168,101 +141,85 @@ export default function Slack({ data, slackKey }) {
|
|||
</Box>
|
||||
<Cover />
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
background: 'rgb(0,0,0,0.3)',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
zIndex: 3,
|
||||
width: '210px',
|
||||
right: 0,
|
||||
top: 0,
|
||||
p: 3
|
||||
}}
|
||||
>
|
||||
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
|
||||
<Dot />
|
||||
Live from Slack
|
||||
</Text>
|
||||
<Box sx={{py: 2}}>Total members: {data.total_members_count}</Box>
|
||||
<Box sx={{py: 2}}>Daily messages: {data.messages_count_1d}</Box>
|
||||
<Box sx={{py: 2}}>Online right now: {data.readers_count_1d}</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5], zIndex: 2 }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
|
||||
Our online community
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid columns={[1, 1]} sx={{ zIndex: 2 }}>
|
||||
<Box sx={{ zIndex: 2, width: 'calc(100% - 200px)' }}>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: 2,
|
||||
width: [null, 'calc(100% - 200px)', 'calc(100% - 200px)']
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Coding doesn't have to be a solidary activity. At Hack Club, it's a
|
||||
team sport and in our Slack (similar to Discord, but better), you'll
|
||||
find a group of{' '}
|
||||
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>
|
||||
{/* <Box
|
||||
as="div"
|
||||
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.
|
||||
</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: 'transparent',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
display: 'inline-block',
|
||||
mb: '-8px',
|
||||
mr: '2px'
|
||||
color: 'inherit',
|
||||
fontStyle: 'italic',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
key={slackKey}
|
||||
>
|
||||
{slackNum}{' '}
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
color: 'text',
|
||||
animation: `${rollout} 2s`,
|
||||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
{slackNum}
|
||||
</Text>
|
||||
<Text
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
color: 'white',
|
||||
animation: `${rollin} 2s`,
|
||||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
{slackNum}
|
||||
</Text>
|
||||
</Box> */}
|
||||
fabulous people to talk to, active at all hours.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
We're united by our love for coding but talk about everything else
|
||||
too. You could launch your latest project and get feedback or
|
||||
discuss a cool article you read, alongside other Hack Clubbers.
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Come for the skills, stay for the friends!
|
||||
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{' '}
|
||||
<Link
|
||||
href="/amas"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
sx={{ color: 'inherit' }}
|
||||
>
|
||||
AMA
|
||||
</Link>{' '}
|
||||
with them.{' '}
|
||||
</Text>
|
||||
<Event events={events} />
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
|
|
@ -277,22 +234,38 @@ export default function Slack({ data, slackKey }) {
|
|||
>
|
||||
Join our community
|
||||
</Button>
|
||||
</Box>
|
||||
{/* <Box sx={{py: 3, px: 4, borderRadius: 4, float: 'right', backgroundColor: 'rgb(255,255,255, 0.2)', backdropFilter: 'blur(8px)', mt: '-40px'}}>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="subheadline"
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
mt: 0,
|
||||
color: 'white',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 'headline'
|
||||
background: 'rgb(0,0,0,0.3)',
|
||||
height: ['170px', '100%', '100%'],
|
||||
position: ['relative', 'absolute', 'absolute'],
|
||||
zIndex: 3,
|
||||
width: ['120%', '210px', '210px'],
|
||||
right: 0,
|
||||
top: [null, 0, 0],
|
||||
mt: [3, 0, 0],
|
||||
ml: -3,
|
||||
mb: -3,
|
||||
p: 3
|
||||
}}
|
||||
>
|
||||
Live from our Slack
|
||||
</Heading>
|
||||
<SlackEvents color="transparent" textColor="white" />
|
||||
</Box> */}
|
||||
<Text variant="eyebrow" as="p" sx={{ color: 'white' }}>
|
||||
<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>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ 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,
|
||||
|
|
@ -32,6 +31,7 @@ export default function SprigConsole({ stars }) {
|
|||
<Box sx={{ position: 'relative' }}>
|
||||
<CardModel
|
||||
github_link="https://github.com/hackclub/sprig-hardware"
|
||||
stars={stars}
|
||||
// link="https://sprig.hackclub.com"
|
||||
color="white"
|
||||
sx={{
|
||||
|
|
@ -46,15 +46,37 @@ export default function SprigConsole({ stars }) {
|
|||
src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
|
||||
sx={{ width: ['250px', '450px', '500px'] }}
|
||||
/>
|
||||
<Text as="p" variant="subheadline" sx={{background: 'white', px: 2, py: 1, width: 'fit-content', borderRadius: 'extra', color: '#016535'}}>{450 - consoleCount} consoles left</Text>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
background: 'white',
|
||||
px: 2,
|
||||
py: 1,
|
||||
width: 'fit-content',
|
||||
borderRadius: 'extra',
|
||||
color: '#016535'
|
||||
}}
|
||||
>
|
||||
{450 - consoleCount} consoles left
|
||||
</Text>
|
||||
<Grid columns={[1, '1.2fr 1fr']}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
A console you can assemble and disassemble. Each kit includes
|
||||
<img
|
||||
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
|
||||
sx={{
|
||||
width: '120%',
|
||||
ml: '-10%',
|
||||
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.{' '}
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 2 }}>
|
||||
<Text sx={{ fontSize: ['18px', '20px', 3],
|
||||
display: 'block', fontWeight: 'bold', mt: 2 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
|
|
@ -64,23 +86,15 @@ export default function SprigConsole({ stars }) {
|
|||
icon="emoji"
|
||||
link="https://editor.sprig.hackclub.com"
|
||||
>
|
||||
Make a game
|
||||
Make a game and share it in the gallery
|
||||
</Buttons>
|
||||
<Buttons
|
||||
{/* <Buttons
|
||||
content="make a PR to our website, click for more instructions"
|
||||
id="11"
|
||||
link="https://sprig.hackclub.com/share"
|
||||
>
|
||||
Share it in the gallery
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="only teenagers (and younger) can get a console"
|
||||
id="12"
|
||||
icon="sam"
|
||||
link="https://sprig.hackclub.com/"
|
||||
>
|
||||
Get a console
|
||||
</Buttons>
|
||||
</Buttons> */}
|
||||
</Flex>
|
||||
<Button
|
||||
as="a"
|
||||
|
|
@ -90,11 +104,11 @@ export default function SprigConsole({ stars }) {
|
|||
color: '#fff',
|
||||
mt: 3
|
||||
}}
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
href="https://sprig.hackclub.com/shar"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Make a game
|
||||
Get your console
|
||||
</Button>
|
||||
</Box>
|
||||
<Box></Box>
|
||||
|
|
@ -104,11 +118,12 @@ export default function SprigConsole({ stars }) {
|
|||
src="https://cloud-7dokxtxhu-hack-club-bot.vercel.app/0sprig-light-top.png"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: '-120px',
|
||||
top: 5,
|
||||
width: '60%',
|
||||
right: ['', '-50%', '-20%'],
|
||||
top: ['', '25%', '15%'],
|
||||
width: ['', '100%', '70%'],
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none'
|
||||
userSelect: 'none',
|
||||
display: ['none', 'block', 'block']
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import RelativeTime from 'react-relative-time'
|
|||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Game({ game, gameImage, gameImage1 }) {
|
||||
function Game({ game, gameImage, gameImage1, ...props }) {
|
||||
return (
|
||||
<Box
|
||||
as="div"
|
||||
|
|
@ -42,6 +42,7 @@ function Game({ game, gameImage, gameImage1 }) {
|
|||
background: 'rgba(77, 90, 114, 0.8)'
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Box
|
||||
as="a"
|
||||
|
|
@ -137,7 +138,7 @@ function Game({ game, gameImage, gameImage1 }) {
|
|||
fontSize: '1.4rem',
|
||||
fontWeight: '400',
|
||||
mt: 1,
|
||||
mb: 0,
|
||||
mb: 0
|
||||
}}
|
||||
>
|
||||
{game.title}
|
||||
|
|
@ -196,7 +197,8 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
Draw, make music, and craft games in our web-based JavaScript game
|
||||
editor.
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 3 }}>
|
||||
<Text sx={{ fontSize: ['18px', '20px', 3],
|
||||
display: 'block', fontWeight: 'bold', mt: 3 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
|
|
@ -206,22 +208,22 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
icon="emoji"
|
||||
link="https://editor.sprig.hackclub.com"
|
||||
>
|
||||
Make a game
|
||||
Build a Sprig game
|
||||
</Buttons>
|
||||
<Buttons
|
||||
{/* <Buttons
|
||||
content="DM @leo in Slack to join"
|
||||
id="7"
|
||||
icon="friend"
|
||||
link="/slack"
|
||||
>
|
||||
Help review games
|
||||
</Buttons>
|
||||
</Buttons> */}
|
||||
<Buttons
|
||||
content="make a PR to our engine repo"
|
||||
content="learn more on our github"
|
||||
id="8"
|
||||
link="https://github.com/hackclub/kaluma"
|
||||
link="https://github.com/hackclub/sprig"
|
||||
>
|
||||
Work on the engine
|
||||
Help review games or contribute to the engine
|
||||
</Buttons>
|
||||
<Buttons
|
||||
content="we're all hanging out in #sprig on Slack"
|
||||
|
|
@ -229,7 +231,7 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
icon="friend"
|
||||
link="/slack"
|
||||
>
|
||||
Answer questions in slack
|
||||
Connect with other Sprig game developers
|
||||
</Buttons>
|
||||
</Flex>
|
||||
<Button
|
||||
|
|
@ -247,7 +249,7 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
Make a game
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box sx={{mt: [0, -4, -4]}}>
|
||||
<Text sx={{ fontStyle: 'italic', fontSize: [1, '14px', '16px'] }}>
|
||||
New from{' '}
|
||||
<Link
|
||||
|
|
@ -258,9 +260,9 @@ export default function Sprig({ stars, game, gameImage, gameImage1 }) {
|
|||
</Link>
|
||||
...
|
||||
</Text>
|
||||
<Flex sx={{ height: '80%', gap: '20px', mt: 3, width: '90%' }}>
|
||||
<Flex 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} />
|
||||
<Game game={game[1]} gameImage1={gameImage1} sx={{display: ['flex', 'none', 'flex']}} />
|
||||
</Flex>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
|
|||
173
components/index/cards/winter.js
Normal file
173
components/index/cards/winter.js
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
import Icon from '@hackclub/icons'
|
||||
import Dot from '../../dot'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function BreakdownBox({
|
||||
subtitle,
|
||||
icon,
|
||||
text,
|
||||
description,
|
||||
delay,
|
||||
href,
|
||||
color,
|
||||
bg
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
color: 'white',
|
||||
background: 'rgba(54,98,166,0.4)',
|
||||
height: '100%',
|
||||
cursor: `${href ? 'pointer' : 'default'}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
// justifyContent: 'flex-end'
|
||||
}}
|
||||
variant="interactive"
|
||||
as={href ? 'a' : 'div'}
|
||||
href={href}
|
||||
>
|
||||
{subtitle ? (
|
||||
<Text
|
||||
as="h1"
|
||||
sx={{
|
||||
fontSize: [2, 3, 4]
|
||||
}}
|
||||
>
|
||||
{subtitle}
|
||||
</Text>
|
||||
) : (
|
||||
<Box
|
||||
as="span"
|
||||
sx={{
|
||||
width: 'fit-content',
|
||||
bg: bg || 'white',
|
||||
borderRadius: 18,
|
||||
lineHeight: 0,
|
||||
p: 2,
|
||||
mb: 1,
|
||||
display: 'inline-block',
|
||||
transform: ['scale(0.75)', 'none'],
|
||||
transformOrigin: 'bottom left',
|
||||
boxShadow:
|
||||
'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'} />
|
||||
</Box>
|
||||
)}
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: [2, 3, 4]
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Heading>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: [2, 3]
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
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
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
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']}
|
||||
>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
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>
|
||||
<Box>
|
||||
<Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} py={3}>
|
||||
<BreakdownBox
|
||||
icon="settings"
|
||||
color="#5bc0de"
|
||||
text="Free hardware"
|
||||
description="We'll pay for up to $250 of your hardware to build your project."
|
||||
delay="200"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="event-code"
|
||||
color="#5bc0de"
|
||||
text="Daily progress"
|
||||
description={
|
||||
<>
|
||||
From <strong>Feb 15-25</strong>, work on your project, share
|
||||
short photo/video updates each day.
|
||||
</>
|
||||
}
|
||||
delay="100"
|
||||
href="https://scrapbook.hackclub.com/r/10daysinpublic"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="friend"
|
||||
color="#5bc0de"
|
||||
text="Friends"
|
||||
description="Find support from our community of 20k+ teenagers in the Hack Club Slack."
|
||||
delay="300"
|
||||
href="/slack"
|
||||
/>
|
||||
</Grid>
|
||||
<Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#3561A4',
|
||||
color: 'white',
|
||||
mt: 3
|
||||
}}
|
||||
as="a"
|
||||
href="/winter"
|
||||
>
|
||||
RSVP
|
||||
</Button>
|
||||
</Box>
|
||||
</CardModel>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,13 +18,14 @@ import Buttons from './button'
|
|||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const WorkshopCard = ({ slug, name, description, img, height, section }) => (
|
||||
const WorkshopCard = ({ slug, name, description, img, height, section, ...props }) => (
|
||||
<Link
|
||||
href={`/${slug}`}
|
||||
passHref
|
||||
sx={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
{...props}
|
||||
>
|
||||
<Card
|
||||
as="a"
|
||||
|
|
@ -92,7 +93,7 @@ export default function Workshops({ data, stars }) {
|
|||
github_link="https://github.com/hackclub/workshops"
|
||||
stars={stars}
|
||||
>
|
||||
<Text variant="title">Workshops</Text>
|
||||
<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 +
|
||||
|
|
@ -100,7 +101,7 @@ export default function Workshops({ data, stars }) {
|
|||
</Text>
|
||||
<Grid columns={[1, '0.8fr 1fr']}>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Text as="p" sx={{ fontSize: [2, 3], fontWeight: 'bold', mt: 4 }}>
|
||||
<Text sx={{ fontSize: ['18px', '20px', 3], fontWeight: 'bold', mt: 4 }}>
|
||||
Get involved
|
||||
</Text>
|
||||
<Buttons id="14" link="https://workshops.hackclub.com" icon="code">
|
||||
|
|
@ -130,7 +131,7 @@ export default function Workshops({ data, stars }) {
|
|||
Find workshops
|
||||
</Button>
|
||||
</Flex>
|
||||
<Grid sx={{ gap: 3 }} columns={[1, 2]}>
|
||||
<Grid sx={{ gap: 3 }} columns={[1, 1, 2]} mt={[0, 2, 0]}>
|
||||
<WorkshopCard
|
||||
key="personal_website"
|
||||
slug="personal_website"
|
||||
|
|
@ -145,6 +146,7 @@ export default function Workshops({ data, stars }) {
|
|||
description="Creating a basic particle physics simulation and rendering using p5.js"
|
||||
img="https://cloud-k50jkthdw.vercel.app/0particle-physics-summary.png"
|
||||
height="100px"
|
||||
sx={{display: ['block', 'none', 'block']}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function CarouselCards({
|
|||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
|
||||
'&:hover': { transform: 'scale(1.0625)', boxShadow: 'elevated' }
|
||||
'&:hover': { transform: 'scale(1.0625)' }
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
|
|
@ -44,9 +44,9 @@ export default function CarouselCards({
|
|||
>
|
||||
<img
|
||||
src={img}
|
||||
width="40"
|
||||
height="40"
|
||||
sx={{ position: 'absolute', top: '-20px', left: 4, zIndex: 2 }}
|
||||
width={["30", "40", "40"]}
|
||||
height={["30", "40", "40"]}
|
||||
sx={{ position: 'absolute', top: '-20px', left: [3, 4, 4], zIndex: 2 }}
|
||||
/>
|
||||
<Card
|
||||
// variant="interactive"
|
||||
|
|
@ -55,12 +55,12 @@ export default function CarouselCards({
|
|||
backgroundColor: background,
|
||||
position: 'relative',
|
||||
color: 'white',
|
||||
width: '300px'
|
||||
width: ['200px', '300px', '300px']
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="h2"
|
||||
sx={{ color: titleColor, fontSize: ['12px', '16px', '18px'] }}
|
||||
sx={{ color: titleColor, fontSize: ['16px', '16px', '18px'] }}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
|
|
@ -70,7 +70,7 @@ export default function CarouselCards({
|
|||
<Icon
|
||||
glyph="external"
|
||||
size={32}
|
||||
sx={{ position: 'absolute', top: 2, right: 2, opacity: 0.3 }}
|
||||
sx={{ position: 'absolute', top: 2, right: 2, opacity: 0.3, fontSize: [1, '16px', '20px'] }}
|
||||
/>
|
||||
</Card>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default function Carousel() {
|
|||
titleColor="yellow"
|
||||
descriptionColor="white"
|
||||
title="Sprig"
|
||||
description="Learn to code by making games in a JavaScript game editor."
|
||||
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"
|
||||
/>
|
||||
|
|
@ -79,7 +79,7 @@ export default function Carousel() {
|
|||
titleColor="#FF4794"
|
||||
descriptionColor="white"
|
||||
title="EPOCH"
|
||||
description="The most epic high school hackathon this new years!"
|
||||
description="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"
|
||||
/>
|
||||
|
|
@ -97,16 +97,25 @@ export default function Carousel() {
|
|||
titleColor="red"
|
||||
textColor="white"
|
||||
title="Hack Club Bank"
|
||||
description="Fiscal sponsorship and banking platform to organize anything."
|
||||
description="Fiscal sponsor and banking platform to organize anything"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png"
|
||||
link="/bank"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="snow"
|
||||
titleColor="dark"
|
||||
descriptionColor="black"
|
||||
title="Some Assembly Required"
|
||||
description="An approachable introduction to learning Assembly"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/someassemblyrequired/cfacfacaaa2d8b1d.png"
|
||||
link="https://github.com/hackclub/some-assembly-required"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#271932"
|
||||
titleColor="#CAB4D4"
|
||||
textColor="#CAB4D4"
|
||||
title="Sinerider"
|
||||
description="💖 A game about love, math, and graphing built by teenagers!"
|
||||
description="💖 A game about love, math, and graphing built by teenagers"
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png"
|
||||
link="https://sinerider.hackclub.com"
|
||||
/>
|
||||
|
|
@ -116,7 +125,7 @@ export default function Carousel() {
|
|||
textColor="white"
|
||||
title="High school Hackathons"
|
||||
description="🔍 A curated list of high school hackathons."
|
||||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png"
|
||||
link="/hackathons"
|
||||
/>
|
||||
<CarouselCards
|
||||
|
|
|
|||
|
|
@ -137,9 +137,9 @@ export default function Events({ events }) {
|
|||
!past(event.end) ? <Event {...event} key={event.id} /> : <></>
|
||||
)}
|
||||
</Grid>
|
||||
<Text>
|
||||
<Text sx={{display: 'block'}}>
|
||||
We just had these events:{' '}
|
||||
{events.map(event =>
|
||||
{events.slice(0, 3).map(event =>
|
||||
past(event.end) ? (
|
||||
<Badge
|
||||
variant="pill"
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function GitHub({
|
|||
top: 0,
|
||||
right: 2,
|
||||
zIndex: 4,
|
||||
transform: 'rotate(3deg)'
|
||||
transform: [null, null, 'rotate(3deg)']
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
|
|
@ -51,8 +51,8 @@ export default function GitHub({
|
|||
color: 'inherit',
|
||||
fontWeight: '400 !important',
|
||||
display: 'flex',
|
||||
fontSize: '14px',
|
||||
height: '25px',
|
||||
fontSize: ['11px', '11px', '14px'],
|
||||
height: ['15px', '15px', '25px'],
|
||||
position: 'relative',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
|
|
@ -113,7 +113,7 @@ export default function GitHub({
|
|||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
as="span"
|
||||
sx={{ fontSize: 'small', color: 'sunken', mx: 2 }}
|
||||
sx={{ fontSize: ['8px','8px','10px'], color: 'sunken', mx: 2 }}
|
||||
>
|
||||
<RelativeTime value={time} titleformat="iso8601" />
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ const layout = props =>
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
left: 65%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
a {
|
||||
|
|
|
|||
345
pages/index.js
345
pages/index.js
|
|
@ -46,6 +46,7 @@ import Icon from '../components/icon'
|
|||
import GitHub from '../components/index/github'
|
||||
import Photo from '../components/photo'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
import Winter from '../components/index/cards/winter'
|
||||
|
||||
function Page({
|
||||
hackathonsData,
|
||||
|
|
@ -64,63 +65,21 @@ function Page({
|
|||
let [gameImage1, setGameImage1] = useState('')
|
||||
let [reveal, setReveal] = useState(false)
|
||||
const [hover, setHover] = useState(true)
|
||||
// let [slackNum, setSlackNum] = useState(22594)
|
||||
let [slack, setSlack] = useState(22594)
|
||||
let [github, setGithub] = useState(0)
|
||||
let [key1, setKey1] = useState(0)
|
||||
let [slackKey, setSlackKey] = useState(0)
|
||||
let [key, setKey] = useState(0)
|
||||
|
||||
// let gitHubDataLength = gitHubData.length
|
||||
|
||||
// console.log(gitHubDataLength)
|
||||
|
||||
useEffect(() => {
|
||||
function hehe() {
|
||||
setKey(Math.random())
|
||||
setGithub(Math.floor(Math.random() * gitHubDataLength))
|
||||
console.log(gitHubData[github])
|
||||
}
|
||||
setInterval(hehe, 30000)
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// function hehe() {
|
||||
// setKey(Math.random())
|
||||
// setGithub(Math.floor(Math.random() * gitHubDataLength))
|
||||
// console.log(gitHubData[github])
|
||||
// }
|
||||
// setInterval(hehe, 30000)
|
||||
// }, [])
|
||||
|
||||
const withCommas = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
// console.log(gitHubData)
|
||||
// console.log(slackData)
|
||||
// useEffect(() => {
|
||||
// setSlack(slackData.stats.sort((a, b) => a.ds - b.ds).reverse()[0]
|
||||
// .total_members_count)
|
||||
// })
|
||||
// useEffect(() => {
|
||||
|
||||
// const add = setTimeout(() => {
|
||||
// setSlack(x => x + 1)
|
||||
// setSlackNum(slack)
|
||||
// console.log(slackNum)
|
||||
// }, Math.floor((Math.random() * (5 - 2) + 1) * 10000))
|
||||
|
||||
// return () => clearTimeout(add)
|
||||
|
||||
// }, [slack])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (typeof window !== 'undefined') {
|
||||
// // Check if it's open
|
||||
// console.log('Is DevTools open:', devtools.isOpen)
|
||||
|
||||
// // Check it's orientation, `undefined` if not open
|
||||
// console.log('DevTools orientation:', devtools.orientation)
|
||||
|
||||
// // Get notified when it's opened/closed or orientation changes
|
||||
// window.addEventListener('devtoolschange', event => {
|
||||
// console.log('Is DevTools open:', event.detail.isOpen)
|
||||
// console.log('DevTools orientation:', event.detail.orientation)
|
||||
// })
|
||||
|
||||
// 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`
|
||||
// }
|
||||
// })
|
||||
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`
|
||||
}, [])
|
||||
|
|
@ -188,6 +147,30 @@ function Page({
|
|||
}
|
||||
}, [hover])
|
||||
|
||||
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 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) {
|
||||
setCount(0)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
|
|
@ -245,6 +228,7 @@ function Page({
|
|||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: [null, 'layout'],
|
||||
position: 'relative',
|
||||
mx: 'auto',
|
||||
|
|
@ -274,7 +258,7 @@ function Page({
|
|||
mx: 'auto',
|
||||
zIndex: 1,
|
||||
textAlign: 'left',
|
||||
fontSize: 'large'
|
||||
fontSize: ['36px', '48px', '64px']
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
|
|
@ -326,7 +310,7 @@ function Page({
|
|||
cursor: 'pointer'
|
||||
},
|
||||
svg: {
|
||||
mb: '20px',
|
||||
mb: [0, '20px', '20px'],
|
||||
opacity: 0.5,
|
||||
transition: '0.3s',
|
||||
mr: '-5px'
|
||||
|
|
@ -379,21 +363,20 @@ function Page({
|
|||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
{/* </SlideDown> */}
|
||||
</Box>
|
||||
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
// pb={4}
|
||||
>
|
||||
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3], mt: 4 }}>
|
||||
The rundown
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Join us in discovering the joy of code
|
||||
</Text>
|
||||
<Text
|
||||
|
|
@ -411,28 +394,84 @@ function Page({
|
|||
.
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[null, null, 2, '2.5fr 3fr']}
|
||||
gap={[3, 4]}
|
||||
columns={[1, 1, '2.5fr 3fr', '2.5fr 3fr']}
|
||||
gap={[0, 3, 4]}
|
||||
pt={[3, 4]}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
figure: {
|
||||
position: 'absolute',
|
||||
transform: 'rotate(-3deg)',
|
||||
height: '85%',
|
||||
width: '100%'
|
||||
}
|
||||
}}
|
||||
sx={{ position: 'relative', height: ['400px', '100%', '100%'] }}
|
||||
onClick={() => setCount(count + 1)}
|
||||
>
|
||||
<Photo
|
||||
src="https://dl.airtable.com/.attachmentThumbnails/904cf56ceac6b0921eceae02958dcd29/5851864a"
|
||||
alt="Summer Creek Hack Club meeting, February 2020"
|
||||
width={3000}
|
||||
height={2550}
|
||||
showAlt
|
||||
/>
|
||||
<Box
|
||||
sx={{ position: 'absolute', width: '100%', height: '100%' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: ['400px', '400px', '100%'],
|
||||
figure: {
|
||||
position: 'absolute',
|
||||
transform:
|
||||
count % 2 == 0 ? 'rotate(-3deg)' : 'rotate(3deg)',
|
||||
height: ['85%', '85%', '55%', '85%'],
|
||||
width: '100%'
|
||||
},
|
||||
zIndex: 3,
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}}
|
||||
data-tip="next"
|
||||
data-arrow-color="transparent"
|
||||
data-background-color="white"
|
||||
data-text-color="black"
|
||||
>
|
||||
<Photo
|
||||
src={
|
||||
count == photos.length - 1
|
||||
? photos[0]
|
||||
: photos[count + 1]
|
||||
}
|
||||
alt={alt[count + 1]}
|
||||
width={3000}
|
||||
height={2550}
|
||||
showAlt
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ position: 'absolute', width: '100%', height: '100%' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: ['400px', '100%', '100%'],
|
||||
figure: {
|
||||
position: 'absolute',
|
||||
transform:
|
||||
count % 2 == 0 ? 'rotate(3deg)' : 'rotate(-3deg)',
|
||||
height: ['85%', '85%', '55%', '85%'],
|
||||
width: '100%'
|
||||
},
|
||||
zIndex: 3,
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}}
|
||||
data-tip="next"
|
||||
data-arrow-color="transparent"
|
||||
data-background-color="white"
|
||||
data-text-color="black"
|
||||
>
|
||||
<Photo
|
||||
src={photos[count]}
|
||||
alt={alt[count]}
|
||||
width={3000}
|
||||
height={2550}
|
||||
showAlt
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Grid
|
||||
columns="1fr"
|
||||
|
|
@ -473,38 +512,18 @@ function Page({
|
|||
}
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
data-effect="solid"
|
||||
data-tip="learn more about our online community"
|
||||
data-delay-show="142"
|
||||
href="#community"
|
||||
// data-effect="solid"
|
||||
// data-tip="learn more about our online community"
|
||||
// data-delay-show="142"
|
||||
>
|
||||
<Text as="span" color="purple">
|
||||
1
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
<strong>Connect virtually with other teenagers</strong>
|
||||
<strong>Connect with other teenage coders</strong>
|
||||
We're united by our love for coding but talk about and do
|
||||
everything else too.
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'purple',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Join our community{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
|
|
@ -538,9 +557,9 @@ function Page({
|
|||
}}
|
||||
as="a"
|
||||
href="#irl"
|
||||
data-effect="solid"
|
||||
data-tip="check out clubs and hackathons at Hack Club"
|
||||
data-delay-show="142"
|
||||
// data-effect="solid"
|
||||
// data-tip="check out clubs and hackathons at Hack Club"
|
||||
// data-delay-show="142"
|
||||
>
|
||||
<Text as="span" color="cyan">
|
||||
2
|
||||
|
|
@ -559,26 +578,6 @@ function Page({
|
|||
<Link href="/clubs">Hack Clubs</Link>), a one-time 48 hour
|
||||
event (<Link href="/hackathons">hackathons</Link>), or
|
||||
anything in-between!
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'blue',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Start a club{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
|
|
@ -612,9 +611,9 @@ function Page({
|
|||
}}
|
||||
as="a"
|
||||
href="#tools"
|
||||
data-tip="click to projects we're currently working on"
|
||||
data-effect="solid"
|
||||
data-delay-show="142"
|
||||
// data-tip="click to projects we're currently working on"
|
||||
// data-effect="solid"
|
||||
// data-delay-show="142"
|
||||
>
|
||||
<Text as="span" color="orange">
|
||||
3
|
||||
|
|
@ -623,26 +622,6 @@ function Page({
|
|||
<strong>Build open-source learning tools</strong>
|
||||
Contribute to projects like a game engine, daily streak
|
||||
system, graphing game, and more!
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: 'orange',
|
||||
color: 'white',
|
||||
mt: 3,
|
||||
display: 'flex',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
as="a"
|
||||
href="/slack"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Find a hackathon{' '}
|
||||
<Icon
|
||||
glyph="slack"
|
||||
sx={{ ml: '4px !important', display: 'inline-block' }}
|
||||
/>
|
||||
</Button> */}
|
||||
</Text>
|
||||
<Icon
|
||||
glyph="external"
|
||||
|
|
@ -664,29 +643,12 @@ function Page({
|
|||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
pb={4}
|
||||
>
|
||||
{/* <Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
|
||||
A Hack Clubber is someone that
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
Discovers technology by building things for the joy of it
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: [1, '16px', '20px'] }}
|
||||
>
|
||||
Here, teenagers don't wait for permission to code. 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.
|
||||
</Text> */}
|
||||
{/* <Slack slackKey={slackKey} /> */}
|
||||
{/* <Events events={events} /> */}
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="p"
|
||||
|
|
@ -695,7 +657,7 @@ function Page({
|
|||
>
|
||||
Hack Clubbers
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Connect with each other from around the world
|
||||
</Text>
|
||||
<Text
|
||||
|
|
@ -707,11 +669,10 @@ function Page({
|
|||
make things together!
|
||||
</Text>
|
||||
<Box>
|
||||
<Epoch delay={300} />
|
||||
<Slack slackKey={slackKey} data={slackData} />
|
||||
{/* <MailingList /> */}
|
||||
<Winter />
|
||||
<Epoch />
|
||||
<Slack slackKey={slackKey} data={slackData} events={events}/>
|
||||
</Box>
|
||||
{/* <Inspect /> */}
|
||||
</Box>
|
||||
<Box
|
||||
py={4}
|
||||
|
|
@ -726,6 +687,7 @@ function Page({
|
|||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
|
|
@ -733,7 +695,7 @@ function Page({
|
|||
<Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
|
||||
Hack Clubbers
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Build open source tools
|
||||
</Text>
|
||||
<Text
|
||||
|
|
@ -765,6 +727,7 @@ function Page({
|
|||
<Box
|
||||
py={3}
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
|
|
@ -773,21 +736,8 @@ function Page({
|
|||
<Text variant="eyebrow" as="p">
|
||||
Hack Clubbers
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Create spaces to have fun with code
|
||||
{/* <Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
mx: [-2, 0],
|
||||
whiteSpace: 'nowrap',
|
||||
color: '#5d114c',
|
||||
bg: 'rgb(255, 212, 64)'
|
||||
}}
|
||||
>
|
||||
joy of code
|
||||
</Text> */}
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
|
|
@ -798,28 +748,29 @@ function Page({
|
|||
things, be it once a week after school, a one-time 48 hour
|
||||
event, or anything in-between!
|
||||
</Text>
|
||||
<Clubs delay={200} />
|
||||
<Clubs />
|
||||
<Hackathons
|
||||
delay={400}
|
||||
data={hackathonsData}
|
||||
stars={stars.hackathons.stargazerCount}
|
||||
/>
|
||||
<Events events={events} />
|
||||
<Bank data={bankData} delay={100} />
|
||||
{/* <Events events={events} /> */}
|
||||
<Bank data={bankData} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box bg="snow" color="black" py={[3, 4]}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
>
|
||||
<Text as="p" variant="eyebrow">
|
||||
Let's quickly review
|
||||
Let's recap
|
||||
</Text>
|
||||
<Heading as="h2" variant="title" sx={{ fontSize: [3, 4, 5] }}>
|
||||
<Heading as="h2" variant="title" sx={{fontSize: ['36px', 4, 5]}}>
|
||||
Find your place with{' '}
|
||||
<Text
|
||||
as="span"
|
||||
|
|
@ -840,7 +791,7 @@ function Page({
|
|||
pt={[3, 4]}
|
||||
pb={[4, 5]}
|
||||
gap={3}
|
||||
columns={[null, 4]}
|
||||
columns={[1, 2, 3]}
|
||||
sx={{
|
||||
textAlign: 'left',
|
||||
'> a, > div': {
|
||||
|
|
@ -900,7 +851,7 @@ function Page({
|
|||
<Stage
|
||||
icon="clubs"
|
||||
color="white"
|
||||
name="Start a Club"
|
||||
name="Start a club"
|
||||
desc="Build an in-person community of high school hackers, and we're here to help."
|
||||
sx={{
|
||||
p: {
|
||||
|
|
@ -941,7 +892,7 @@ function Page({
|
|||
}}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
{/* <Card
|
||||
sx={{
|
||||
background:
|
||||
'linear-gradient(to bottom, rgba(166, 51, 214, 0.9) 0%, rgba(51, 142, 218, 0.9) 100%)',
|
||||
|
|
@ -958,7 +909,7 @@ function Page({
|
|||
<Stage
|
||||
icon="event-code"
|
||||
color="white"
|
||||
name="Attend a Hackathon"
|
||||
name="Attend a hackathon"
|
||||
desc="Make friends, build cool stuff, have an adventure. Attend a hackathon."
|
||||
sx={{
|
||||
p: {
|
||||
|
|
@ -969,8 +920,10 @@ function Page({
|
|||
}
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Card> */}
|
||||
</Grid>
|
||||
<MailingList />
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
@ -1018,7 +971,9 @@ export async function getStaticProps() {
|
|||
|
||||
let raised = initialBankData.raised / 100
|
||||
|
||||
let slackData = await fetch('https://site-git-v4.hackclub.dev/api/slack').then(r => r.json())
|
||||
let slackData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/slack'
|
||||
).then(r => r.json())
|
||||
console.log(slackData)
|
||||
|
||||
bankData.push(
|
||||
|
|
@ -1043,7 +998,9 @@ export async function getStaticProps() {
|
|||
|
||||
gameTitle = game.map(r => r.title)
|
||||
|
||||
const hackathonsData = await fetch('https://hackathons.hackclub.com/api/events/upcoming').then(res => res.json())
|
||||
const hackathonsData = await fetch(
|
||||
'https://hackathons.hackclub.com/api/events/upcoming'
|
||||
).then(res => res.json())
|
||||
let stars = await fetch('https://site-git-v4.hackclub.dev/api/stars').then(
|
||||
res => res.json()
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue