mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Belle
GitHub
parent
d33344f5cc
commit
6f6ce301ed
27 changed files with 687 additions and 785 deletions
|
|
@ -83,7 +83,7 @@ const Footer = ({ dark = false, children, ...props }) => (
|
|||
>
|
||||
<Box>
|
||||
<Heading as="h2" variant="subheadline" mb={3}>
|
||||
Hack Club
|
||||
Hack Club
|
||||
</Heading>
|
||||
<NextLink href="/philosophy" passHref>
|
||||
<Link>Philosophy</Link>
|
||||
|
|
@ -181,7 +181,7 @@ const Footer = ({ dark = false, children, ...props }) => (
|
|||
</Box>
|
||||
</Grid>
|
||||
<Text as="p" variant="caption" sx={{ mt: 3 }}>
|
||||
© {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
|
||||
© {new Date().getFullYear()} Hack Club. 501(c)(3) nonprofit (EIN:
|
||||
81-2908499)
|
||||
</Text>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Fade } from 'react-reveal'
|
||||
|
|
@ -26,7 +18,7 @@ export default function Bank({ data }) {
|
|||
backgroundColor: 'dark',
|
||||
minHeight: ['300px', '400px', '380px'],
|
||||
backgroundColor: 'darkless',
|
||||
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x29282C/glyph:bank-account.svg')`,
|
||||
backgroundImage: `url('https://icons.hackclub.com/api/icons/0x302F33/glyph:bank-account.svg')`,
|
||||
backgroundSize: '40px 40px',
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundPosition: '10% 10%',
|
||||
|
|
@ -36,17 +28,26 @@ export default function Bank({ data }) {
|
|||
text={data[0]}
|
||||
>
|
||||
<Text variant="title" sx={{ color: 'red', fontSize: ['36px', 4, 5] }}>
|
||||
Hack Club Bank
|
||||
Hack Club Bank
|
||||
</Text>
|
||||
<Grid columns={[1, '1.3fr 1fr', 2]}>
|
||||
<Box>
|
||||
<Text as="p" variant="subtitle">
|
||||
Become a 501(c)3 nonprofit and join 700+ teams using Hack Club
|
||||
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.
|
||||
This platform is built and maintained by the Hack Club team.
|
||||
</Text>
|
||||
<Buttons
|
||||
id="27"
|
||||
icon="bank-account"
|
||||
link="/bank"
|
||||
primary="red"
|
||||
sx={{ mt: [0, 3, 4] }}
|
||||
>
|
||||
Start banking!
|
||||
</Buttons>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
|
|
@ -65,7 +66,7 @@ export default function Bank({ data }) {
|
|||
textAlign: 'center',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
backgroundImage: 'url(/home/bank-computer.webp)',
|
||||
backgroundImage: 'url(/home/bank-mobile.webp)',
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
width: '100%',
|
||||
|
|
@ -75,7 +76,7 @@ export default function Bank({ data }) {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
{/* <Box
|
||||
sx={{
|
||||
backgroundImage: 'url(/home/bank-screen.webp)',
|
||||
zIndex: 2,
|
||||
|
|
@ -88,18 +89,9 @@ export default function Bank({ data }) {
|
|||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
></Box>
|
||||
></Box> */}
|
||||
</Box>
|
||||
</Box>
|
||||
<Buttons
|
||||
id="27"
|
||||
icon="bank-account"
|
||||
link="/bank"
|
||||
primary="red"
|
||||
sx={{ mt: [0, 3, 4] }}
|
||||
>
|
||||
Start banking!
|
||||
</Buttons>
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
|
|
@ -107,7 +99,7 @@ export default function Bank({ data }) {
|
|||
sx={{
|
||||
position: 'absolute',
|
||||
right: [0, '-120px', '-30px'],
|
||||
bottom: [0, '-30px', '-60px'],
|
||||
bottom: [0, '-30px', '-50px'],
|
||||
display: ['none', 'block', 'block'],
|
||||
zIndex: 3
|
||||
}}
|
||||
|
|
@ -122,7 +114,7 @@ export default function Bank({ data }) {
|
|||
textAlign: 'center',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
backgroundImage: 'url(/home/bank-computer.webp)',
|
||||
backgroundImage: 'url(/home/bank.webp)',
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
width: '100%',
|
||||
|
|
@ -132,7 +124,7 @@ export default function Bank({ data }) {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
{/* <Box
|
||||
sx={{
|
||||
backgroundImage: 'url(/home/bank-screen.webp)',
|
||||
zIndex: 2,
|
||||
|
|
@ -145,7 +137,7 @@ export default function Bank({ data }) {
|
|||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
></Box>
|
||||
></Box> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,6 @@ import React, { useState } from 'react'
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
|
|
@ -27,7 +20,7 @@ export default function Buttons({
|
|||
let fontWeight = primary != null ? '700' : '400'
|
||||
|
||||
return (
|
||||
<Box py={1}>
|
||||
<Box as="button" sx={{background: 'transparent', border: 'none', color: 'white'}}py={1}>
|
||||
<Button
|
||||
data-place="right"
|
||||
data-for={id}
|
||||
|
|
@ -77,7 +70,7 @@ export default function Buttons({
|
|||
}}
|
||||
className="custom-tooltip-radius custom-arrow-radius"
|
||||
arrowRadius="2"
|
||||
tooltipRadius="4"
|
||||
tooltipRadius="10"
|
||||
>
|
||||
{content}
|
||||
</ReactTooltip>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
import Tilt from './tilt'
|
||||
import Icon from '../../icon'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
@ -22,6 +16,7 @@ import Comma from '../../comma'
|
|||
const CardModel = ({
|
||||
background,
|
||||
children,
|
||||
image,
|
||||
link,
|
||||
highlight,
|
||||
github_link,
|
||||
|
|
@ -56,16 +51,16 @@ const CardModel = ({
|
|||
sx={{
|
||||
position: ['relative', 'relative', 'relative', 'absolute'],
|
||||
width: 'fit-content',
|
||||
// float: 'right',
|
||||
right: [0, 0, 0, 3],
|
||||
top: [0, 0, 0, 3],
|
||||
zIndex: 3,
|
||||
px: 3,
|
||||
py: 2,
|
||||
px: '12px',
|
||||
py: '4px',
|
||||
mb: 2,
|
||||
float: [null, 'right', null],
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
borderRadius: 'extra',
|
||||
// background: 'rgba(255,255,255,0.2)',
|
||||
border: 'rgba(255,255,255,0.2) dashed 1px',
|
||||
borderRadius: 'circle',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
|
|
@ -147,6 +142,21 @@ const CardModel = ({
|
|||
) : (
|
||||
<></>
|
||||
)}
|
||||
{image && (
|
||||
<Image
|
||||
src={image}
|
||||
draggable="false"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
ml: ['-24px', '-32px', '-32px', '-32px'],
|
||||
mt: ['-24px', '-32px', '-32px', '-32px'],
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
<ReactTooltip />
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,9 @@ import Buttons from './button'
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Flex,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import ReactTooltip from 'react-tooltip'
|
||||
|
|
@ -60,6 +54,7 @@ export default function Clubs() {
|
|||
<Cover />
|
||||
<Text
|
||||
variant="title"
|
||||
as="h3"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
|
|
@ -69,7 +64,8 @@ export default function Clubs() {
|
|||
bg: ['transparent', 'white', 'white'],
|
||||
fontSize: ['36px', 4, 5],
|
||||
position: 'relative',
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
width: 'fit-content'
|
||||
}}
|
||||
>
|
||||
Network of 400+ coding clubs
|
||||
|
|
@ -81,7 +77,7 @@ export default function Clubs() {
|
|||
variant="subtitle"
|
||||
sx={{ textShadow: '1px 1px 5px black' }}
|
||||
>
|
||||
Join or start a Hack Club and be part of a network of high quality
|
||||
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.
|
||||
</Text>
|
||||
|
|
@ -103,14 +99,6 @@ export default function Clubs() {
|
|||
>
|
||||
Start a club
|
||||
</Buttons>
|
||||
{/* <Buttons
|
||||
content="click for our clubs map and reach out to team@hackclub.com to be connected"
|
||||
id="1"
|
||||
icon="rep"
|
||||
link="/map"
|
||||
>
|
||||
Join a Hack Club near you
|
||||
</Buttons> */}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@ import CardModel from './card-model'
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
@ -36,31 +31,15 @@ const Cover = () => (
|
|||
)
|
||||
|
||||
export default function Hackathons({ data, stars }) {
|
||||
// let [count, setCount] = useState(0)
|
||||
// useEffect(() => {
|
||||
// function add() {
|
||||
// if (count < data.length) {
|
||||
// setCount(count + 1)
|
||||
// } else {
|
||||
// setCount(0)
|
||||
// }
|
||||
// }
|
||||
|
||||
// setInterval(add, 2000)
|
||||
// }, [count])
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
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'
|
||||
backgroundColor: 'dark'
|
||||
}}
|
||||
stars={stars}
|
||||
github_link="https://github.com/hackclub/hackathons"
|
||||
highlight="blue"
|
||||
// background="https://hackclub.com/bank/bg.webp"
|
||||
>
|
||||
<Image
|
||||
src="/home/hackathons-bg.webp"
|
||||
|
|
@ -77,6 +56,7 @@ export default function Hackathons({ data, stars }) {
|
|||
<Cover />
|
||||
<Text
|
||||
variant="title"
|
||||
as="h3"
|
||||
sx={{ fontSize: ['36px', 4, 5], position: 'relative', zIndex: 2 }}
|
||||
>
|
||||
High school hackathons
|
||||
|
|
@ -109,17 +89,6 @@ export default function Hackathons({ data, stars }) {
|
|||
Organizer? Learn more
|
||||
</Buttons>
|
||||
</Flex>
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{ bg: 'blue' }}
|
||||
mt={3}
|
||||
as="a"
|
||||
href="https://editor.sprig.hackclub.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Find a hackathon
|
||||
</Button> */}
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
|
|
@ -133,8 +102,8 @@ export default function Hackathons({ data, stars }) {
|
|||
}}
|
||||
>
|
||||
<Box sx={{ width: 'fit-content', float: 'right' }}>
|
||||
<Text sx={{ fontSize: 'small', width: 'fit-content' }}>
|
||||
Upcoming hackathons <Dot />
|
||||
<Text as="h4" sx={{ fontSize: 'small', width: 'fit-content' }}>
|
||||
<Dot /> Upcoming hackathons
|
||||
</Text>
|
||||
{data.slice(0, 5).map(data => (
|
||||
<Box
|
||||
|
|
@ -165,7 +134,8 @@ export default function Hackathons({ data, stars }) {
|
|||
justifyContent: 'center',
|
||||
borderRadius: 'circle',
|
||||
height: ['20px', '25px', '30px'],
|
||||
width: ['20px', '25px', '30px']
|
||||
width: ['20px', '25px', '30px'],
|
||||
mr: '10px'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
|
|
@ -181,9 +151,30 @@ export default function Hackathons({ data, stars }) {
|
|||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Link href={data.website}>
|
||||
{data.name} | {formatDate('mmmm d', new Date(data.start))}
|
||||
</Link>
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Link
|
||||
href={data.website}
|
||||
as="a"
|
||||
target="_blank"
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'bold'
|
||||
}}
|
||||
>
|
||||
{data.name}
|
||||
</Link>
|
||||
<Text
|
||||
as="h6"
|
||||
sx={{
|
||||
fontWeight: '400',
|
||||
fontSize: '0.8em',
|
||||
color: 'sunken'
|
||||
}}
|
||||
>
|
||||
{formatDate('mmmm d', new Date(data.start))}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
|
@ -199,8 +190,9 @@ export default function Hackathons({ data, stars }) {
|
|||
display: ['block', 'block', 'none']
|
||||
}}
|
||||
>
|
||||
<Text sx={{ fontSize: 'small' }}>Upcoming hackathon:</Text>
|
||||
{data.slice(0, 1).map(data => (
|
||||
<Text sx={{ fontSize: 'small' }}>Upcoming hackathons:</Text>
|
||||
<Flex sx={{gap: '10px'}}>
|
||||
{data.slice(0, 2).map(data => (
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
|
|
@ -229,7 +221,8 @@ export default function Hackathons({ data, stars }) {
|
|||
justifyContent: 'center',
|
||||
borderRadius: 'circle',
|
||||
height: ['20px', '25px', '30px'],
|
||||
width: ['20px', '25px', '30px']
|
||||
width: ['20px', '25px', '30px'],
|
||||
mr: '5px'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
|
|
@ -240,7 +233,8 @@ export default function Hackathons({ data, stars }) {
|
|||
height: '70%',
|
||||
width: '70%',
|
||||
objectFit: 'contain',
|
||||
borderRadius: 'default'
|
||||
borderRadius: 'default',
|
||||
fontSize: 'small'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
|
@ -248,6 +242,7 @@ export default function Hackathons({ data, stars }) {
|
|||
<Link href={data.website}>{data.name}</Link>
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</CardModel>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
Text,
|
||||
Alert,
|
||||
Card,
|
||||
Heading,
|
||||
Flex,
|
||||
Grid
|
||||
} from 'theme-ui'
|
||||
import CardModel from './card-model'
|
||||
|
|
@ -66,66 +66,77 @@ const MailingList = () => {
|
|||
return (
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 'narrowPlus',
|
||||
// maxWidth: 'narrowPlus',
|
||||
mx: 'auto',
|
||||
// mt: [3, 4],
|
||||
background: 'rgb(255,255,255, 0.45)',
|
||||
backdropFilter: 'blur(8px)'
|
||||
}}
|
||||
>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5], zIndex: 2 }}>
|
||||
Stay in touch
|
||||
</Text>
|
||||
<Text sx={{ color: 'muted' }} as="p">
|
||||
We’ll send you an email no more than once a month, when we work on
|
||||
something cool for you.
|
||||
</Text>
|
||||
<Grid
|
||||
as="form"
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
gap={[2, 3]}
|
||||
<Flex
|
||||
sx={{
|
||||
mt: [null, 3],
|
||||
gridTemplateColumns: [null, '1fr 1fr auto'],
|
||||
textAlign: 'left',
|
||||
alignItems: 'end',
|
||||
input: { bg: 'sunken' }
|
||||
justifyContent: 'space-between',
|
||||
alignItems: ['left', 'left', 'center'],
|
||||
flexDirection: ['column', 'column', 'row'],
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Label htmlFor="location">Name</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Fiona Hackworth"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="fiona@hackclub.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" sx={{ mt: [2, 0] }}>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loading />
|
||||
Subscribe
|
||||
</>
|
||||
) : (
|
||||
'Subscribe'
|
||||
)}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Text variant="title" sx={{ fontSize: [4, '36px', '42px', 5], zIndex: 2 }}>
|
||||
Stay in touch
|
||||
</Text>
|
||||
<Text sx={{ color: 'muted', mt: 2, maxWidth: ['40ch', '40ch', '28ch', '40ch'] }} as="p">
|
||||
We’ll send you an email no more than once a month, when we work on
|
||||
something cool for you.
|
||||
</Text>
|
||||
</Box>
|
||||
<Grid
|
||||
as="form"
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
gap={[2, 3]}
|
||||
sx={{
|
||||
mt: [null, 3],
|
||||
gridTemplateColumns: [null, '1fr 1fr auto'],
|
||||
textAlign: 'left',
|
||||
alignItems: 'end',
|
||||
input: { bg: 'sunken' }
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Label htmlFor="location">Name</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Fiona Hackworth"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="fiona@hackclub.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" sx={{ mt: [2, 0] }}>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loading />
|
||||
Subscribe
|
||||
</>
|
||||
) : (
|
||||
'Subscribe'
|
||||
)}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Flex>
|
||||
|
||||
{submitted && (
|
||||
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
|
||||
|
|
@ -137,4 +148,4 @@ const MailingList = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default MailingList
|
||||
export default MailingList
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
|
|
@ -33,27 +27,19 @@ export default function Sinerider({ stars }) {
|
|||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
highlight="#271932"
|
||||
image="/home/sinerider-bg.webp"
|
||||
>
|
||||
<Image
|
||||
src="/home/sinerider-bg.webp"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
ml: ['-24px', '-32px', '-32px', '-32px'],
|
||||
mt: ['-24px', '-32px', '-32px', '-32px'],
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src="https://cloud-9cei11221-hack-club-bot.vercel.app/0logo_text_2.png"
|
||||
sx={{
|
||||
width: ['200px', '250px', '300px'],
|
||||
mt: ['-10px', '-20px', '-20px'],
|
||||
position: 'relative',
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white'
|
||||
}}
|
||||
alt="Sinerider"
|
||||
/>
|
||||
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
|
||||
<Box></Box>
|
||||
|
|
@ -66,8 +52,6 @@ export default function Sinerider({ stars }) {
|
|||
</Text>
|
||||
<Flex sx={{ flexDirection: 'column', mt: [3, 3, 4] }}>
|
||||
<Buttons
|
||||
// content="you could create the art, be a scene maker, or write graphics rendering code"
|
||||
id="4"
|
||||
icon="rainbow"
|
||||
href="https://github.com/hackclub/sinerider/#readme"
|
||||
target="_blank"
|
||||
|
|
@ -77,19 +61,7 @@ export default function Sinerider({ stars }) {
|
|||
>
|
||||
Join the development
|
||||
</Buttons>
|
||||
{/* <Buttons
|
||||
// content="DM @cwalker in Slack to learn more"
|
||||
id="5"
|
||||
icon="view"
|
||||
// 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"
|
||||
|
|
@ -98,18 +70,6 @@ export default function Sinerider({ stars }) {
|
|||
View a game preview
|
||||
</Buttons>
|
||||
</Flex>
|
||||
{/* <Button
|
||||
variant="primary"
|
||||
sx={{
|
||||
backgroundColor: '#CAB4D4',
|
||||
color: '#271932',
|
||||
mt: 3
|
||||
}}
|
||||
as="a"
|
||||
href="https://github.com/hackclub/sinerider/#readme"
|
||||
>
|
||||
Join the development
|
||||
</Button> */}
|
||||
</Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,9 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { Box, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
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'
|
||||
import Comma from '../../comma'
|
||||
import RelativeTime from 'react-relative-time'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const Cover = () => (
|
||||
|
|
@ -38,22 +21,36 @@ const Cover = () => (
|
|||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
const Stats = ({ data, subheading }) => (
|
||||
<Box>
|
||||
<Heading
|
||||
variant="headline"
|
||||
as="h4"
|
||||
sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
|
||||
>
|
||||
<Comma>{data}</Comma>
|
||||
</Heading>
|
||||
<Text
|
||||
sx={{
|
||||
color: 'muted',
|
||||
fontSize: ['14px', '16px', '18px'],
|
||||
fontWeight: '400'
|
||||
}}
|
||||
as="h5"
|
||||
>
|
||||
{subheading}
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
export default function Slack({ data, slackKey, events }) {
|
||||
const hasMounted = useHasMounted()
|
||||
const prefersMotion = usePrefersMotion()
|
||||
|
||||
return (
|
||||
<CardModel
|
||||
color="white"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
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'
|
||||
backgroundImage: t => t.util.gx('cyan', 'purple'),
|
||||
minHeight: ['300px', '400px', '500px']
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
|
|
@ -70,6 +67,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
<Cover />
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
<Text
|
||||
as="h3"
|
||||
variant="title"
|
||||
sx={{
|
||||
fontSize: ['36px', 4, 5],
|
||||
|
|
@ -91,13 +89,13 @@ 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, you'll find awesome people to
|
||||
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 too. Code together, find your programming community, or
|
||||
just hang out.
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
Sometimes, we also invite someone we really want to speak to (like
|
||||
We also invite someone we really want to speak to (like
|
||||
Sal Khan, George Hotz, and Lady Ada) and host an{' '}
|
||||
<Link
|
||||
href="/amas"
|
||||
|
|
@ -110,14 +108,7 @@ export default function Slack({ data, slackKey, events }) {
|
|||
with them.{' '}
|
||||
</Text>
|
||||
<Event events={events} />
|
||||
|
||||
<Buttons
|
||||
id="13"
|
||||
link="/slack"
|
||||
icon="slack"
|
||||
primary="red"
|
||||
sx={{ mt: [3, 3, 4] }}
|
||||
>
|
||||
<Buttons id="13" link="/slack" icon="slack" primary="purple">
|
||||
Join our Slack
|
||||
</Buttons>
|
||||
<Grid sx={{ zIndex: 2 }}>
|
||||
|
|
@ -147,10 +138,6 @@ export default function Slack({ data, slackKey, events }) {
|
|||
<Dot />
|
||||
Live from Slack
|
||||
</Text>
|
||||
<Text sx={{ color: 'muted' }}>
|
||||
As of{' '}
|
||||
<RelativeTime value={data.ds} titleFormat="YYYY-MM-DD" />
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
|
|
@ -159,74 +146,19 @@ export default function Slack({ data, slackKey, events }) {
|
|||
flexWrap: 'wrap'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
|
||||
>
|
||||
<Comma>{data.readers_count_1d}</Comma>
|
||||
</Heading>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
color: 'muted',
|
||||
fontSize: ['14px', '16px', '18px']
|
||||
}}
|
||||
>
|
||||
Online
|
||||
</Text>
|
||||
</Box>
|
||||
<Box sx={{ display: ['none', 'block', 'block'] }}>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
|
||||
>
|
||||
<Comma>{data.chats_channels_count_1d}</Comma>
|
||||
</Heading>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
color: 'muted',
|
||||
fontSize: ['14px', '16px', '18px']
|
||||
}}
|
||||
>
|
||||
Total channels
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
|
||||
>
|
||||
<Comma>{data.messages_count_1d}</Comma>
|
||||
</Heading>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
color: 'muted',
|
||||
fontSize: ['14px', '16px', '18px']
|
||||
}}
|
||||
>
|
||||
Daily messages
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{ mb: 0, pt: 2, fontSize: ['28px', '36px', '38px'] }}
|
||||
>
|
||||
<Comma>{data.total_members_count}</Comma>
|
||||
</Heading>
|
||||
<Text
|
||||
sx={{
|
||||
textTransform: 'uppercase',
|
||||
color: 'muted',
|
||||
fontSize: ['14px', '16px', '18px']
|
||||
}}
|
||||
>
|
||||
Total members
|
||||
</Text>
|
||||
</Box>
|
||||
<Stats data={data.readers_count_1d} subheading="Online" />
|
||||
<Stats
|
||||
data={data.chats_channels_count_1d}
|
||||
subheading="Total channels"
|
||||
/>
|
||||
<Stats
|
||||
data={data.messages_count_1d}
|
||||
subheading="Daily messages"
|
||||
/>
|
||||
<Stats
|
||||
data={data.total_members_count}
|
||||
subheading="Total members"
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,12 @@
|
|||
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 useSWR from 'swr'
|
||||
import fetcher from '../../../lib/fetcher'
|
||||
import Tilt from './tilt'
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
export default function SprigConsole({ stars, consoleCount }) {
|
||||
|
|
@ -23,11 +15,10 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
<CardModel
|
||||
github_link="https://github.com/hackclub/sprig-hardware"
|
||||
stars={stars}
|
||||
// link="https://sprig.hackclub.com"
|
||||
color="white"
|
||||
sx={{
|
||||
backgroundSize: 'cover',
|
||||
backgroundColor: '#2E5626',
|
||||
backgroundColor: '#1A3C14',
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
minHeight: ['300px', '400px', '400px']
|
||||
|
|
@ -50,22 +41,25 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
<Image
|
||||
src="https://cloud-8u6hh0ho9-hack-club-bot.vercel.app/0sprig_console.svg"
|
||||
sx={{
|
||||
width: ['90%', '450px', '500px'],
|
||||
width: ['90%', '320px', '450px', '500px'],
|
||||
mt: ['42px', 0, 0],
|
||||
position: 'relative',
|
||||
zIndex: 2
|
||||
zIndex: 2,
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white'
|
||||
}}
|
||||
alt="Sprig console"
|
||||
/>
|
||||
<Text
|
||||
as="p"
|
||||
variant="subheadline"
|
||||
sx={{
|
||||
background: 'white',
|
||||
px: 2,
|
||||
py: 1,
|
||||
width: 'fit-content',
|
||||
borderRadius: 'extra',
|
||||
color: '#016535',
|
||||
color: 'white',
|
||||
border: 'rgba(255,255,255,0.2) dashed 1px',
|
||||
zIndex: 2,
|
||||
position: ['absolute', 'relative', 'relative'],
|
||||
top: ['24px', 0, '5px']
|
||||
|
|
@ -74,7 +68,7 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
{420 - consoleCount} consoles left
|
||||
</Text>
|
||||
<Grid
|
||||
columns={[1, '1.2fr 1fr']}
|
||||
columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}
|
||||
sx={{ zIndex: 2, position: 'relative' }}
|
||||
>
|
||||
<Box>
|
||||
|
|
@ -84,7 +78,9 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
width: ['120%', '', ''],
|
||||
maxWidth: ['120%', '', ''],
|
||||
ml: ['-10%', '', ''],
|
||||
display: [null, 'none', 'none']
|
||||
mt: ['-10px', '-30px', '', ''],
|
||||
mb: ['-15px', '-30px', '', ''],
|
||||
display: [null, null, 'none', 'none']
|
||||
}}
|
||||
/>
|
||||
<Text as="p" variant="subtitle" mt={[0, null, null]}>
|
||||
|
|
@ -106,18 +102,22 @@ export default function SprigConsole({ stars, consoleCount }) {
|
|||
<Box></Box>
|
||||
</Grid>
|
||||
</CardModel>
|
||||
<Image
|
||||
src="https://cloud-b8z9l7ihq-hack-club-bot.vercel.app/0sprig-light-top-min.png"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: ['', '-50%', '-35%', '-25%'],
|
||||
top: ['', '12%', '20%', '10%'],
|
||||
width: ['', '100%', '85%', '70%'],
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
display: ['none', 'block', 'block']
|
||||
}}
|
||||
/>
|
||||
<Tilt>
|
||||
<Image
|
||||
src="/home/sprig-console.webp"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: ['', '-50%', '-35%', '-25%'],
|
||||
top: ['', '15%', '15%', '10%'],
|
||||
width: ['', '100%', '85%', '70%'],
|
||||
display: ['none', 'none', 'block', 'block'],
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
},
|
||||
zIndex: 3
|
||||
}}
|
||||
/>
|
||||
</Tilt>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
@ -144,7 +139,7 @@ function Game({ game, gameImage, gameImage1, ...props }) {
|
|||
{game.title}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
as="h4"
|
||||
sx={{
|
||||
fontWeight: '300',
|
||||
fontSize: '1.1rem',
|
||||
|
|
@ -184,30 +179,21 @@ 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"
|
||||
stars={stars}
|
||||
highlight="#FFDE4D"
|
||||
sx={{ backgroundColor: '#0C0C16' }}
|
||||
image="/home/sprig-bg.webp"
|
||||
>
|
||||
<Image
|
||||
src="/home/sprig-bg.webp"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
ml: ['-24px', '-32px', '-32px', '-32px'],
|
||||
mt: ['-24px', '-32px', '-32px', '-32px'],
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src="/home/sprig-logo.webp"
|
||||
sx={{
|
||||
width: ['150px', '180px', '220px'],
|
||||
zIndex: 3,
|
||||
position: 'relative'
|
||||
position: 'relative',
|
||||
fontSize: ['36px', 4, 5],
|
||||
color: 'white'
|
||||
}}
|
||||
alt="Sprig"
|
||||
/>
|
||||
<Grid columns={[1, 2]}>
|
||||
<Box>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ const Tilt = ({ options = {}, children, ...props }) => {
|
|||
const root = useRef(null)
|
||||
useEffect(() => {
|
||||
VanillaTilt.init(root.current, {
|
||||
max: 2,
|
||||
max: 3,
|
||||
scale: 1.05,
|
||||
speed: 600,
|
||||
glare: false,
|
||||
glare: true,
|
||||
'max-glare': 0.25,
|
||||
gyroscope: false,
|
||||
...options
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Buttons from './button'
|
||||
|
|
@ -37,53 +32,28 @@ function BreakdownBox({
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: 2,
|
||||
p: [3, 3, 4]
|
||||
p: [2, 3, '24px']
|
||||
// justifyContent: 'flex-end'
|
||||
}}
|
||||
>
|
||||
{subtitle ? (
|
||||
<Text
|
||||
as="h1"
|
||||
<Flex sx={{ alignItems: 'center', gap: '10px' }}>
|
||||
<Icon glyph={icon} size={32} color={'white'} />
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: [2, 3, 4]
|
||||
fontSize: ['16px', '16px', '24px', '26px']
|
||||
}}
|
||||
as="h4"
|
||||
>
|
||||
{subtitle}
|
||||
</Text>
|
||||
) : (
|
||||
<Box
|
||||
as="span"
|
||||
sx={{
|
||||
width: 'fit-content',
|
||||
bg: bg || 'white',
|
||||
borderRadius: 10,
|
||||
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={32} color={color || 'white'} />
|
||||
</Box>
|
||||
)}
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: ['16px', '16px', '24px', '26px'],
|
||||
pt: [1, 2, 3]
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Heading>
|
||||
{text}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: ['18px', '20px', '22px'],
|
||||
fontSize: [1, '16px !important', '18px !important'],
|
||||
lineHeight: 1.25,
|
||||
display: ['none', 'none', 'block', 'block']
|
||||
display: ['none', 'none', 'block', 'block'],
|
||||
mt: [1, 2, 2]
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
|
|
@ -94,38 +64,22 @@ function BreakdownBox({
|
|||
|
||||
export default function Winter() {
|
||||
return (
|
||||
// <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',
|
||||
backgroundColor: '#3561A4'
|
||||
}}
|
||||
position={[null, 'bottom', 'bottom']}
|
||||
image="/home/winter-bg.webp"
|
||||
badge
|
||||
>
|
||||
<Image
|
||||
src="/home/winter-bg.webp"
|
||||
sx={{
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
ml: ['-24px', '-32px', '-32px', '-32px'],
|
||||
mt: ['-24px', '-32px', '-32px', '-32px'],
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Winter hardware wonderland
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
<Text as="p" variant="subtitle" sx={{ maxWidth: '45ch' }}>
|
||||
Get $250 to build your own electronics projects alongside hundreds of
|
||||
other teenagers in the Hack Club community!
|
||||
other teenagers in the Hack Club community!
|
||||
</Text>
|
||||
<Box>
|
||||
<Grid gap={[2, 2, 3]} columns={3} py={3}>
|
||||
|
|
@ -152,12 +106,11 @@ export default function Winter() {
|
|||
icon="friend"
|
||||
color="#5bc0de"
|
||||
text="Friends"
|
||||
description="Find support from our community of 20k+ teenagers in the Hack Club Slack."
|
||||
description="Find support from our community of 20k+ teenagers in the Slack."
|
||||
delay="300"
|
||||
/>
|
||||
</Grid>
|
||||
<Buttons
|
||||
// content="click to learn more about how to submit a workshop"
|
||||
id="13"
|
||||
link="/winter"
|
||||
icon="freeze"
|
||||
|
|
@ -168,6 +121,5 @@ export default function Winter() {
|
|||
</Buttons>
|
||||
</Box>
|
||||
</CardModel>
|
||||
// </Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
import CardModel from './card-model'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import { useState } from 'react'
|
||||
|
|
@ -49,7 +45,7 @@ const WorkshopCard = ({
|
|||
{...props}
|
||||
>
|
||||
<Box sx={{ p: 3, lineHeight: 'body' }}>
|
||||
<Heading as="h3" sx={{ my: 1 }}>
|
||||
<Heading as="h4" sx={{ my: 1 }}>
|
||||
{name}
|
||||
</Heading>
|
||||
<Text variant="caption">{description}</Text>
|
||||
|
|
@ -82,7 +78,7 @@ export default function Workshops({ data, stars }) {
|
|||
stars={stars}
|
||||
highlight="blue"
|
||||
>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
Workshops
|
||||
</Text>
|
||||
<Grid columns={[1, 2, 2]}>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
|
|
@ -29,7 +24,17 @@ 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)' }
|
||||
'&:hover': { transform: 'scale(1.0625)' },
|
||||
'.icon': {
|
||||
transition:
|
||||
'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
transform: 'translateX(28px) translateY(-28px)',
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
|
|
@ -46,7 +51,7 @@ export default function CarouselCards({
|
|||
src={img}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: ['-26px', '-30px', '-40px'],
|
||||
top: ['-26px', '-30px', '-35px'],
|
||||
left: ['10px', '12px', '15px'],
|
||||
zIndex: 2,
|
||||
width: ['42px', '50px', '58px'],
|
||||
|
|
@ -62,11 +67,12 @@ export default function CarouselCards({
|
|||
color: 'white',
|
||||
width: ['200px', '300px', '300px'],
|
||||
padding: ['12px !important', '16px !important', '20px !important'],
|
||||
paddingTop: ['14px !important', '20px !important', '24px !important'],
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="h2"
|
||||
as="h3"
|
||||
sx={{ color: titleColor, fontSize: ['20px', '21px', '22px'] }}
|
||||
>
|
||||
{title}
|
||||
|
|
@ -88,6 +94,7 @@ export default function CarouselCards({
|
|||
opacity: 0.3,
|
||||
fontSize: [1, '16px', '20px']
|
||||
}}
|
||||
className="icon"
|
||||
/>
|
||||
</Card>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import CarouselCards from './carousel-cards'
|
||||
|
|
@ -33,10 +25,10 @@ export default function Carousel() {
|
|||
<Box sx={{ mt: 4 }}>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="div"
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: ['22px', 2, 3],
|
||||
mt: 4,
|
||||
mt: [4, 4, 5],
|
||||
maxWidth: 'layout',
|
||||
width: '90vw',
|
||||
margin: 'auto'
|
||||
|
|
@ -49,7 +41,7 @@ export default function Carousel() {
|
|||
<Box
|
||||
as="div"
|
||||
sx={{ display: 'flex', py: [4, 5, 5] }}
|
||||
onMouseOver={() => setSpeed(3)}
|
||||
onMouseOver={() => setSpeed(2)}
|
||||
onMouseOut={() => setSpeed(6)}
|
||||
>
|
||||
<CarouselCards
|
||||
|
|
@ -61,15 +53,6 @@ export default function Carousel() {
|
|||
img="https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png"
|
||||
link="https://sprig.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="#000"
|
||||
titleColor="#FF4794"
|
||||
descriptionColor="white"
|
||||
title="Epoch"
|
||||
description="Attend the most epic high school hackathon this New Year's"
|
||||
img="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f386@2x.png"
|
||||
link="https://epoch.hackclub.com"
|
||||
/>
|
||||
<CarouselCards
|
||||
background="blue"
|
||||
titleColor="white"
|
||||
|
|
@ -83,7 +66,7 @@ export default function Carousel() {
|
|||
background="dark"
|
||||
titleColor="red"
|
||||
textColor="white"
|
||||
title="Hack Club Bank"
|
||||
title="Hack Club Bank"
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Card, Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
|
||||
import { Box, Text, Grid, Badge, Flex, Avatar, Heading } from 'theme-ui'
|
||||
import tt from 'tinytime'
|
||||
import Link from 'next/link'
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
|
@ -112,15 +112,6 @@ export default function Events({ events }) {
|
|||
console.log(events.length)
|
||||
return (
|
||||
<Box mb={3}>
|
||||
{/* <Heading>
|
||||
Come hangout, talk to cool people*, and hack together at one of our {' '}
|
||||
<Link href="https://events.hackclub.com" target="_blank">
|
||||
upcoming events
|
||||
</Link>
|
||||
</Heading> */}
|
||||
{/* <Text>
|
||||
{events.map(e => !past(e.end)) ? <>Upcoming events <Dot /></> : <></>}
|
||||
</Text> */}
|
||||
<Grid
|
||||
mt={3}
|
||||
mb={2}
|
||||
|
|
@ -137,41 +128,45 @@ export default function Events({ events }) {
|
|||
!past(event.end) ? <Event {...event} key={event.id} /> : <></>
|
||||
)}
|
||||
</Grid>
|
||||
<Text sx={{ display: 'block' }}>
|
||||
We just had these events:{' '}
|
||||
{events.slice(0, 3).map(event =>
|
||||
past(event.end) ? (
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
bg: 'rgb(255, 255, 255, 0.3)',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 'small',
|
||||
mr: 1,
|
||||
my: 1,
|
||||
':hover': { bg: 'rgb(255, 255, 255, 0.5)', cursor: 'pointer' },
|
||||
transition: '0.3s ease',
|
||||
a: {
|
||||
{events.length != 0 ? (
|
||||
<Text sx={{ display: 'block', mb: [3, 3, 4] }}>
|
||||
We just had these events:{' '}
|
||||
{events.slice(0, 3).map(event =>
|
||||
past(event.end) ? (
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
bg: 'rgb(255, 255, 255, 0.3)',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link href={`https://events.hackclub.com/${event.slug}`}>
|
||||
{event.title}
|
||||
</Link>
|
||||
</Badge>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)}{' '}
|
||||
</Text>
|
||||
{/* <Link href="/amas" target="_blank">
|
||||
*like George Hotz, Dylan Field, Sal Khan, and more
|
||||
</Link> */}
|
||||
fontWeight: 'normal',
|
||||
fontSize: 'small',
|
||||
mr: 1,
|
||||
my: 1,
|
||||
':hover': {
|
||||
bg: 'rgb(255, 255, 255, 0.5)',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
transition: '0.3s ease',
|
||||
a: {
|
||||
textDecoration: 'none',
|
||||
color: 'white'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link href={`https://events.hackclub.com/${event.slug}`}>
|
||||
{event.title}
|
||||
</Link>
|
||||
</Badge>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)}{' '}
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Image,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
|
|
@ -27,135 +19,124 @@ export default function GitHub({
|
|||
...props
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
<Badge
|
||||
variant="pill"
|
||||
bg="snow"
|
||||
sx={{
|
||||
width: 'fit-content',
|
||||
position: ['relative', 'relative', 'absolute'],
|
||||
display: 'block',
|
||||
top: [0, '-40px', '-55px'],
|
||||
right: [null, '-40px', '-10px'],
|
||||
// left: [0, null, null],
|
||||
pb: ['42px', 4, 0]
|
||||
color: 'black',
|
||||
fontWeight: '400 !important',
|
||||
zIndex: 4,
|
||||
px: '4px !important',
|
||||
py: '2px !important',
|
||||
// my: [1, 1, 2],
|
||||
height: 'fit-content',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
<Link
|
||||
href="https://github.com/hackclub"
|
||||
sx={{
|
||||
// transform: [null, null, 'rotate(3deg)'],
|
||||
fontSize: ['8px', '8px', '10px'],
|
||||
textAlign: ['left', 'right', 'right'],
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
Live from GitHub
|
||||
</Text>
|
||||
<Badge
|
||||
variant="pill"
|
||||
bg="snow"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
color: 'black',
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
fontWeight: '400 !important',
|
||||
textAlign: ['left', 'left', 'right'],
|
||||
zIndex: 4,
|
||||
// transform: [null, null, 'rotate(3deg)'],
|
||||
float: ['left', 'left', 'right']
|
||||
display: 'flex',
|
||||
fontSize: ['11px', '11px', '14px'],
|
||||
height: ['15px', '15px', '25px'],
|
||||
position: 'relative',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
{...props}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<Fade appear spy={key}>
|
||||
<Link
|
||||
href="https://github.com/hackclub"
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
fontWeight: '400 !important',
|
||||
display: 'flex',
|
||||
fontSize: ['11px', '11px', '14px'],
|
||||
height: ['15px', '15px', '25px'],
|
||||
position: 'relative',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<img
|
||||
src={img}
|
||||
sx={{ borderRadius: '100%', height: '90%', mr: 2 }}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<img
|
||||
src={img}
|
||||
sx={{ borderRadius: '100%', height: '90%', mr: 2 }}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text sx={{ mr: 2 }}>{user}</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
sx={{
|
||||
mr: 2,
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '80px',
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
display: ['none', 'inline-block', 'inline-block', 'inline-block']
|
||||
}}
|
||||
>
|
||||
{user}
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
sx={{
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '150px',
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
sx={{
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '150px',
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
fontSize: ['8px', '8px', '10px'],
|
||||
color: 'inherit',
|
||||
mx: 2
|
||||
}}
|
||||
>
|
||||
<RelativeTime value={time} titleformat="iso8601" />
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{user != null ? (
|
||||
user != 'dependabot[bot]' ? (
|
||||
user != 'github-actions[bot]' ? (
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
fontSize: ['8px', '8px', '10px'],
|
||||
color: 'inherit',
|
||||
mx: 2,
|
||||
float: 'right'
|
||||
}}
|
||||
>
|
||||
<RelativeTime value={time} titleformat="iso8601" />
|
||||
</Text>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Link>
|
||||
</Fade>
|
||||
</Badge>
|
||||
</Box>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Link>
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
"react-tooltip": "^4.5.1",
|
||||
"react-tsparticles": "^2.7.1",
|
||||
"react-use-websocket": "^4.2.0",
|
||||
"react-wrap-balancer": "^0.2.4",
|
||||
"recharts": "2.1.12",
|
||||
"styled-components": "^5.3.6",
|
||||
"swr": "^2.0.0",
|
||||
|
|
|
|||
394
pages/index.js
394
pages/index.js
|
|
@ -1,4 +1,14 @@
|
|||
import { Box, Button, Card, Grid, Heading, Badge, Link, Text } from 'theme-ui'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Heading,
|
||||
Flex,
|
||||
Badge,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
|
|
@ -27,6 +37,7 @@ import GitHub from '../components/index/github'
|
|||
import Photo from '../components/photo'
|
||||
import Winter from '../components/index/cards/winter'
|
||||
import Comma from '../components/comma'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
function Page({
|
||||
|
|
@ -96,6 +107,19 @@ function Page({
|
|||
setCount(0)
|
||||
}
|
||||
}, [count])
|
||||
|
||||
// const styles = `
|
||||
// ::selection {
|
||||
// background-color: #e42d42;
|
||||
// color: #ffffff;
|
||||
// text-shadow: none;
|
||||
// -webkit-background-clip: inherit;
|
||||
// -webkit-text-fill-color: initial;
|
||||
// },
|
||||
// input:-webkit-autofill {
|
||||
// -webkit-text-fill-color: white;
|
||||
// }
|
||||
// `
|
||||
return (
|
||||
<>
|
||||
<Meta
|
||||
|
|
@ -120,6 +144,7 @@ function Page({
|
|||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{/* <style>{styles}</style> */}
|
||||
<Secret
|
||||
reveal={reveal}
|
||||
onMouseEnter={() => {
|
||||
|
|
@ -149,7 +174,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.55), rgba(0,0,0,0.6))"
|
||||
gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
|
|
@ -157,11 +182,21 @@ function Page({
|
|||
maxWidth: [null, 'layout'],
|
||||
position: 'relative',
|
||||
mx: 'auto',
|
||||
py: [4, 4, 5]
|
||||
py: [4, 4, 5],
|
||||
textShadow: 'text'
|
||||
}}
|
||||
>
|
||||
<Text variant="eyebrow" sx={{ color: 'sunken' }}>
|
||||
Welcome to Hack Club
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
sx={{
|
||||
color: 'sunken',
|
||||
pb: 2,
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
}}
|
||||
as="h4"
|
||||
>
|
||||
Welcome to Hack Club
|
||||
</Text>
|
||||
<Heading>
|
||||
<Text
|
||||
|
|
@ -197,7 +232,7 @@ function Page({
|
|||
backgroundColor: 'red',
|
||||
position: 'absolute',
|
||||
borderRadius: 10,
|
||||
transform: 'rotate(-3deg)',
|
||||
transform: 'rotate(-3deg) translateY(-5px)',
|
||||
color: 'white',
|
||||
whiteSpace: 'nowrap',
|
||||
textDecoration: 'none',
|
||||
|
|
@ -205,6 +240,7 @@ function Page({
|
|||
cursor: 'pointer'
|
||||
}
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
teen hackers
|
||||
</Text>
|
||||
|
|
@ -213,42 +249,49 @@ function Page({
|
|||
<br sx={{ display: ['inline', 'none', 'none'] }} /> from around
|
||||
the world who code together
|
||||
</Text>
|
||||
<Button variant="ctaLg" as="a" href="/slack" mt={[3, 0, 0]}>
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
as="a"
|
||||
href="/slack"
|
||||
mt={[3, 0, 0]}
|
||||
sx={{ transformOrigin: 'center left' }}
|
||||
>
|
||||
Join our community
|
||||
</Button>
|
||||
</Heading>
|
||||
<Box
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: ['flex-start', 'flext-start', 'flex-end'],
|
||||
marginRight: 2,
|
||||
mt: [4, 3, 1]
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
as="a"
|
||||
href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
variant="pill"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: ['flex-start', 'flext-start', 'flex-end'],
|
||||
marginRight: 2,
|
||||
mt: [4, 3, 1]
|
||||
zIndex: '1',
|
||||
bg: 'black',
|
||||
color: 'white',
|
||||
opacity: 1,
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
':hover': { opacity: 1 },
|
||||
transition: '0.3s ease'
|
||||
// mixBlendMode: 'multiply'
|
||||
}}
|
||||
title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
|
||||
>
|
||||
<Badge
|
||||
as="a"
|
||||
href="https://www.youtube.com/watch?v=PnK4gzO6S3Q"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
variant="pill"
|
||||
sx={{
|
||||
zIndex: '1',
|
||||
bg: '#000',
|
||||
color: 'white',
|
||||
opacity: 0.5,
|
||||
textDecoration: 'none',
|
||||
fontWeight: 'normal',
|
||||
':hover': { opacity: 1 },
|
||||
transition: '0.3s ease'
|
||||
}}
|
||||
title="📸 Photo by Kunal Botla, Hack Clubber in MA!"
|
||||
>
|
||||
Hackers at Assemble in SF
|
||||
</Badge>
|
||||
</Box>
|
||||
Hackers at Assemble in SF
|
||||
</Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box as="section" sx={{ pt: [4, 5], color: 'black' }}>
|
||||
<Box as="section" sx={{ py: [4, 5, '82px'], color: 'black' }}>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
|
|
@ -259,18 +302,22 @@ function Page({
|
|||
>
|
||||
<Text
|
||||
variant="eyebrow"
|
||||
as="p"
|
||||
as="h4"
|
||||
sx={{ fontSize: ['22px', 2, 3], mt: 4 }}
|
||||
>
|
||||
The rundown
|
||||
</Text>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h1"
|
||||
sx={{ fontSize: ['36px', '48px', '56px'] }}
|
||||
>
|
||||
Discover the{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
px: 1,
|
||||
mx: 0,
|
||||
whiteSpace: ['wrap', 'nowrap', 'nowrap'],
|
||||
color: 'white',
|
||||
|
|
@ -285,12 +332,16 @@ function Page({
|
|||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: ['18px', '20px', '22px'] }}
|
||||
sx={{
|
||||
fontSize: ['18px', '20px', '22px'],
|
||||
pb: [3, 3, 4],
|
||||
maxWidth: '62ch'
|
||||
}}
|
||||
>
|
||||
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{' '}
|
||||
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>
|
||||
|
|
@ -437,6 +488,7 @@ function Page({
|
|||
p: { my: 0, fontSize: ['18px', '20px', '22px'] },
|
||||
strong: { display: 'block', fontSize: ['22px', 2, 3] }
|
||||
}}
|
||||
as="ul"
|
||||
>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
|
|
@ -449,19 +501,22 @@ function Page({
|
|||
textDecoration: 'none',
|
||||
borderRadius: 'extra'
|
||||
}}
|
||||
as="li"
|
||||
>
|
||||
<Text as="span" color="red">
|
||||
<Text as="span" color="red" aria-hidden="true">
|
||||
1
|
||||
</Text>
|
||||
<Box as="p" variant="subtitle">
|
||||
<strong>Connect with other teenage coders</strong>
|
||||
<Text as="p" variant="subtitle">
|
||||
<strong sx={{ mb: 1 }}>
|
||||
Connect with other teenage coders
|
||||
</strong>
|
||||
Have a coding question? Looking for project feedback? You’ll
|
||||
find hundreds of fabulous people to talk to in our global{' '}
|
||||
<Link href="/slack" target="_blank" rel="noopener">
|
||||
Slack{' '}
|
||||
</Link>
|
||||
(like Discord), active at all hours.
|
||||
</Box>
|
||||
</Text>
|
||||
</Grid>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
|
|
@ -474,8 +529,9 @@ function Page({
|
|||
textDecoration: 'none',
|
||||
borderRadius: 'extra'
|
||||
}}
|
||||
as="li"
|
||||
>
|
||||
<Text as="span" color="orange">
|
||||
<Text as="span" color="orange" aria-hidden="true">
|
||||
2
|
||||
</Text>
|
||||
<Text
|
||||
|
|
@ -485,10 +541,12 @@ function Page({
|
|||
mt: 0
|
||||
}}
|
||||
>
|
||||
<strong>Build open source learning tools</strong>
|
||||
<strong sx={{ mb: 1 }}>
|
||||
Build open source learning tools
|
||||
</strong>
|
||||
We build large open source projects together (
|
||||
<Link href="https://github.com/hackclub" target="_blank">
|
||||
3k+ PRs a year
|
||||
3k+ PRs a year
|
||||
</Link>
|
||||
) like this website, a game engine, daily streak system, and
|
||||
more!
|
||||
|
|
@ -505,16 +563,17 @@ function Page({
|
|||
textDecoration: 'none',
|
||||
borderRadius: 'extra'
|
||||
}}
|
||||
as="li"
|
||||
>
|
||||
<Text as="span" color="yellow">
|
||||
<Text as="span" color="yellow" aria-hidden="true">
|
||||
3
|
||||
</Text>
|
||||
<Text as="p" variant="subtitle">
|
||||
<strong>Gather IRL with other makers</strong>
|
||||
Meet other Hack Clubbers in your community to build together
|
||||
at one of the 400+{' '}
|
||||
<strong sx={{ mb: 1 }}>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
|
||||
Hack Clubs
|
||||
</Link>{' '}
|
||||
and{' '}
|
||||
<Link href="/hackathons" target="_blank" rel="noopener">
|
||||
|
|
@ -545,20 +604,22 @@ function Page({
|
|||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
}}
|
||||
py={[4, 4, 5]}
|
||||
py={[4, 5, '82px']}
|
||||
>
|
||||
<Box>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{ fontSize: ['36px', '48px', '56px'], width: '18ch' }}
|
||||
>
|
||||
Connect with{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'white',
|
||||
bg: 'red'
|
||||
color: 'red'
|
||||
}}
|
||||
>
|
||||
builders
|
||||
|
|
@ -575,12 +636,11 @@ function Page({
|
|||
</Text>
|
||||
</Box>
|
||||
<Winter />
|
||||
<Epoch />
|
||||
<Slack slackKey={slackKey} data={slackData} events={events} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box py={[4, 4, 5]}>
|
||||
<Box py={[4, 5, '82px']}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
|
|
@ -592,41 +652,107 @@ function Page({
|
|||
{/* <Text variant="eyebrow" as="p" sx={{ fontSize: [1, 2, 3] }}>
|
||||
Hack Clubbers
|
||||
</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="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
We build{' '}
|
||||
<Text
|
||||
as="span"
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', 'column', 'column', 'row'],
|
||||
justifyContent: 'center',
|
||||
alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],
|
||||
gap: '10px'
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: [3, 0, 0] }}>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{
|
||||
fontSize: ['36px', '48px', '56px'],
|
||||
maxWidth: '20ch'
|
||||
}}
|
||||
>
|
||||
We build{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'orange'
|
||||
}}
|
||||
>
|
||||
open source
|
||||
</Text>{' '}
|
||||
games and tools together
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: ['18px', '20px', '22px'],
|
||||
pb: [3, 0, 0],
|
||||
maxWidth: '60ch'
|
||||
}}
|
||||
>
|
||||
In collaboration with engineers on the Hack Club team,
|
||||
Hack Clubbers build learning tools for each other. Get
|
||||
involved with these projects by building something with our
|
||||
tools or contribute to the tools themselves.
|
||||
</Text>
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'white',
|
||||
bg: 'orange'
|
||||
flexDirection: ['row', 'row', 'row', 'column'],
|
||||
gap: [1, 2, 2],
|
||||
alignItems: ['center', 'center', 'center', 'flex-start']
|
||||
}}
|
||||
>
|
||||
open source
|
||||
</Text>{' '}
|
||||
games and tools together
|
||||
</Text>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
|
||||
>
|
||||
In collaboration with engineers on the Hack Club team, Hack
|
||||
Clubbers build learning tools for each other. Get involved with
|
||||
these projects by building something with our tools or
|
||||
contribute to the tools themselves.
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: ['11px', '11px', '14px'],
|
||||
textAlign: 'left',
|
||||
lineHeight: '90%',
|
||||
width: 'fit-content',
|
||||
fontStyle: 'italic'
|
||||
}}
|
||||
>
|
||||
Live from GitHub
|
||||
</Text>
|
||||
<GitHub
|
||||
type={gitHubData[0].type}
|
||||
img={gitHubData[0].userImage}
|
||||
user={gitHubData[0].user}
|
||||
time={gitHubData[0].time}
|
||||
message={gitHubData[0].message}
|
||||
key={key}
|
||||
/>
|
||||
<GitHub
|
||||
type={gitHubData[1].type}
|
||||
img={gitHubData[1].userImage}
|
||||
user={gitHubData[1].user}
|
||||
time={gitHubData[1].time}
|
||||
message={gitHubData[1].message}
|
||||
key={key}
|
||||
/>
|
||||
<GitHub
|
||||
type={gitHubData[2].type}
|
||||
img={gitHubData[2].userImage}
|
||||
user={gitHubData[2].user}
|
||||
time={gitHubData[2].time}
|
||||
message={gitHubData[2].message}
|
||||
key={key}
|
||||
sx={{ display: ['none', 'none', 'none', 'inline'] }}
|
||||
/>
|
||||
<GitHub
|
||||
type={gitHubData[3].type}
|
||||
img={gitHubData[3].userImage}
|
||||
user={gitHubData[3].user}
|
||||
time={gitHubData[3].time}
|
||||
message={gitHubData[3].message}
|
||||
key={key}
|
||||
sx={{ display: ['none', 'none', 'none', 'inline'] }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Sprig
|
||||
delay={100}
|
||||
stars={stars.sprig.stargazerCount}
|
||||
|
|
@ -668,24 +794,27 @@ function Page({
|
|||
{}
|
||||
</Box>
|
||||
<Box
|
||||
py={[4, 4, 5]}
|
||||
py={[4, 5, '82px']}
|
||||
sx={{
|
||||
width: '90vw',
|
||||
maxWidth: 'layout',
|
||||
margin: 'auto'
|
||||
margin: 'auto',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Text variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Text
|
||||
variant="title"
|
||||
as="h2"
|
||||
sx={{ fontSize: ['36px', '48px', '56px'] }}
|
||||
>
|
||||
Find your{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
mx: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'white',
|
||||
bg: 'yellow'
|
||||
color: 'yellow'
|
||||
}}
|
||||
>
|
||||
IRL community
|
||||
|
|
@ -694,9 +823,13 @@ function Page({
|
|||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{ fontSize: ['18px', '20px', '22px'], pb: [3, 0, 0] }}
|
||||
sx={{
|
||||
fontSize: ['18px', '20px', '22px'],
|
||||
pb: [3, 0, 0],
|
||||
maxWidth: '40ch'
|
||||
}}
|
||||
>
|
||||
Thousands of Hack Clubbers organize and participate in
|
||||
Thousands of Hack Clubbers organize and participate in
|
||||
hackathons and after school coding clubs.
|
||||
</Text>
|
||||
<Clubs />
|
||||
|
|
@ -710,7 +843,7 @@ function Page({
|
|||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box py={[4, 4, 5]}>
|
||||
<Box py={[4, 5, '82px']}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '90vw',
|
||||
|
|
@ -719,22 +852,29 @@ function Page({
|
|||
}}
|
||||
>
|
||||
<Text as="p" variant="eyebrow" sx={{ fontSize: ['22px', 2, 3] }}>
|
||||
Let's recap
|
||||
Let’s recap
|
||||
</Text>
|
||||
<Heading as="h2" variant="title" sx={{ fontSize: ['36px', 4, 5] }}>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="title"
|
||||
sx={{
|
||||
fontSize: ['36px', '48px', '56px'],
|
||||
maxWidth: ['15ch', '15ch', '15ch', '30ch']
|
||||
}}
|
||||
>
|
||||
Find your second home at{' '}
|
||||
<Text
|
||||
as="span"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 2,
|
||||
ml: 0,
|
||||
whiteSpace: ['wrap', 'nowrap'],
|
||||
color: 'white',
|
||||
bg: 'red'
|
||||
background: theme => theme.util.gx('red', 'orange'),
|
||||
'-webkit-background-clip': 'text',
|
||||
'-webkit-text-fill-color': 'transparent'
|
||||
}}
|
||||
>
|
||||
Hack Club
|
||||
Hack Club
|
||||
</Text>
|
||||
</Heading>
|
||||
<Grid
|
||||
|
|
@ -873,7 +1013,7 @@ function Page({
|
|||
position: 'relative',
|
||||
'.icon': {
|
||||
transition:
|
||||
'transform 0.25s ease-in-out, opacity 0.25s ease-in-out'
|
||||
'transform 0.25s ease-in-out, opacity 0.43s ease-in-out'
|
||||
},
|
||||
':hover,:focus': {
|
||||
'.icon': {
|
||||
|
|
@ -906,7 +1046,7 @@ function Page({
|
|||
icon="clubs"
|
||||
color="white"
|
||||
name="Start a club"
|
||||
desc="Build an in-person community of high school hackers, and we're here to help."
|
||||
desc="Build an in-person community of high school hackers, and we’re here to help."
|
||||
sx={{
|
||||
p: {
|
||||
fontSize: ['18px', '20px', '22px']
|
||||
|
|
@ -972,26 +1112,22 @@ export async function getStaticProps() {
|
|||
)
|
||||
|
||||
// Slack: get total raised
|
||||
let slackData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/slack'
|
||||
).then(r => r.json())
|
||||
|
||||
// GitHub: get latest github activity
|
||||
let gitHubData = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/github'
|
||||
).then(r => r.json())
|
||||
|
||||
// GitHub: get latest GitHub stars
|
||||
// let stars = await fetch('https://site-git-v4.hackclub.dev/api/stars').then(
|
||||
// res => res.json()
|
||||
// )
|
||||
|
||||
let stars = {"sinerider":{"stargazerCount":195},"sprig":{"stargazerCount":571},"hackclub":{"stargazerCount":2284},"hackathons":{"stargazerCount":129},"sprigHardware":{"stargazerCount":23}}
|
||||
|
||||
// Sprig: get newest games
|
||||
let game = await fetch('https://site-git-v4.hackclub.dev/api/games').then(r =>
|
||||
let slackData = await fetch('https://hackclub.com/api/slack').then(r =>
|
||||
r.json()
|
||||
)
|
||||
|
||||
// GitHub: get latest github activity
|
||||
let gitHubData = await fetch('https://hackclub.com/api/github').then(r =>
|
||||
r.json()
|
||||
)
|
||||
|
||||
// GitHub: get latest GitHub stars
|
||||
let stars = await fetch('https://hackclub.com/api/stars').then(res =>
|
||||
res.json()
|
||||
)
|
||||
|
||||
// Sprig: get newest games
|
||||
let game = await fetch('https://hackclub.com/api/games').then(r => r.json())
|
||||
console.log(game)
|
||||
|
||||
let gameTitle = []
|
||||
|
|
@ -1000,7 +1136,7 @@ export async function getStaticProps() {
|
|||
|
||||
// Sprig: get console count
|
||||
const consoleCount = await fetch(
|
||||
'https://site-git-v4.hackclub.dev/api/sprig-console'
|
||||
'https://hackclub.com/api/sprig-console'
|
||||
).then(r => r.json())
|
||||
|
||||
// Hackathons: get latest hackathons
|
||||
|
|
|
|||
BIN
public/home/bank-mobile.webp
Normal file
BIN
public/home/bank-mobile.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/home/bank.webp
Normal file
BIN
public/home/bank.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/home/sprig-console.webp
Normal file
BIN
public/home/sprig-console.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
|
|
@ -3942,6 +3942,11 @@ react-use-websocket@^4.2.0:
|
|||
resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.2.0.tgz#658c4e44ee5e0fc3d29a66c2a753a72754a5db87"
|
||||
integrity sha512-ZovaTlc/tWX6a590fi3kMWImhyoWj46BWJWvO5oucZJzRnVVhYtes2D9g+5MKXjSdR7Es3456hB89v4/1pcBKg==
|
||||
|
||||
react-wrap-balancer@^0.2.4:
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/react-wrap-balancer/-/react-wrap-balancer-0.2.4.tgz#1f112df575958400f253186aa9a7fd5ee9528ed1"
|
||||
integrity sha512-MVL9/Tw1X72t0i5Y/2j3YmSx1vkJJ22b5Vb+vZ/IOEdq7r9JPNzTfnfkB8wrl98Jwx+F6VCwJXmU7a1lT5PtCA==
|
||||
|
||||
react@^17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue