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

Run prettier

Browse source
This commit is contained in:
Malted 2024-01-26 17:26:17 +01:00
parent a808d4f79a
commit 84899cdbdd
No known key found for this signature in database
35 changed files with 1658 additions and 1112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/bio.js
View file

@ -25,7 +25,7 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
overflowY: 'hidden', overflowY: 'hidden',
overscrollBehavior: 'contain', overscrollBehavior: 'contain',
gridColumn: !spanTwo ? null : [null, null, `1 / span 2`], gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
position: 'relative', position: 'relative'
}} }}
as={href && !text ? 'a' : 'div'} as={href && !text ? 'a' : 'div'}
href={href} href={href}

9
components/footer.js
View file

@ -19,8 +19,6 @@ const Base = styled(Box)`
} }
` `
const Logo = props => ( const Logo = props => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -51,7 +49,12 @@ const Service = ({ href, icon, name = '', ...props }) => (
</Link> </Link>
) )
const Footer = ({ dark = false, email = "team@hackclub.com", children, ...props }) => ( const Footer = ({
dark = false,
email = 'team@hackclub.com',
children,
...props
}) => (
<Base <Base
color={dark ? 'muted' : 'slate'} color={dark ? 'muted' : 'slate'}
py={[4, 5]} py={[4, 5]}

6
components/hackathons/features/money.js
View file

@ -29,11 +29,7 @@ const Content = () => (
<ListItem <ListItem
knew knew
icon="payment" icon="payment"
leadText={ leadText={<>$500 grants.</>}
<>
$500 grants.
</>
}
body={ body={
<> <>
Running on HCB? Get a $500 grant once you have a venue, provided Running on HCB? Get a $500 grant once you have a venue, provided

3
components/hackathons/recap.js
View file

@ -81,7 +81,8 @@ export default function Recap() {
name="$500 grants" name="$500 grants"
desc={ desc={
<> <>
Join HCB to receive a $500 grant for your hackathon and a suite of financial tools. Join HCB to receive a $500 grant for your hackathon and a suite
of financial tools.
</> </>
} }
/> />

5
components/hcb/apply/hcb-info.js
View file

@ -63,7 +63,10 @@ export default function HCBInfo() {
Rather than setting up a standard bank account, you'll get a Rather than setting up a standard bank account, you'll get a
restricted fund within Hack Club accounts. restricted fund within Hack Club accounts.
</li> </li>
<li>You can't deposit or withdraw cash. But you can receive any kind of electronic payment!</li> <li>
You can't deposit or withdraw cash. But you can receive any
kind of electronic payment!
</li>
</ul> </ul>
</Text> </Text>
</FlexCol> </FlexCol>

16
components/hcb/everything.js
View file

@ -52,12 +52,12 @@ export default function Everything({ fee, partner = false }) {
item.includes('signup') item.includes('signup')
? 'bolt' ? 'bolt'
: item.includes('card') : item.includes('card')
? 'card' ? 'card'
: item.includes('Transparency') : item.includes('Transparency')
? 'explore' ? 'explore'
: item.includes('Physical') : item.includes('Physical')
? 'email' ? 'email'
: 'enter' : 'enter'
} }
> >
{item} {item}
@ -73,8 +73,8 @@ export default function Everything({ fee, partner = false }) {
item.startsWith('Instant') item.startsWith('Instant')
? 'bolt' ? 'bolt'
: item.includes('form') : item.includes('form')
? 'link' ? 'link'
: 'enter' : 'enter'
} }
> >
{item} {item}

8
components/hcb/stats.js
View file

@ -5,10 +5,10 @@ const easeInOutExpo = x =>
x === 0 x === 0
? 0 ? 0
: x === 1 : x === 1
? 1 ? 1
: x < 0.5 : x < 0.5
? Math.pow(2, 20 * x - 10) / 2 ? Math.pow(2, 20 * x - 10) / 2
: (2 - Math.pow(2, -20 * x + 10)) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2
function startMoneyAnimation( function startMoneyAnimation(
setBalance, setBalance,

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

@ -1,8 +1,8 @@
import CardModel from './card-model' import CardModel from './card-model'
import {Box, Flex, Grid, Image, Link, Text} from 'theme-ui' import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
import Buttons from './button' import Buttons from './button'
import Dot from '../../dot' import Dot from '../../dot'
import {formatDate} from '../../../lib/dates' import { formatDate } from '../../../lib/dates'
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
const Cover = () => ( const Cover = () => (

51
components/index/cards/haunted.js
View file

@ -1,6 +1,6 @@
import CardModel from "./card-model"; import CardModel from './card-model'
import { Box, Flex, Grid, Image, Text, Link } from "theme-ui"; import { Box, Flex, Grid, Image, Text, Link } from 'theme-ui'
import Buttons from "./button"; import Buttons from './button'
/** @jsxImportSource theme-ui */ /** @jsxImportSource theme-ui */
@ -10,47 +10,52 @@ export default function Haunted() {
github_link="https://github.com/hackclub/www-hauntedhouse" github_link="https://github.com/hackclub/www-hauntedhouse"
color="white" color="white"
sx={{ sx={{
backgroundSize: "cover", backgroundSize: 'cover',
backgroundColor: "#95C9E5", backgroundColor: '#95C9E5',
border: "2px solid #EB6424", border: '2px solid #EB6424'
}} }}
position={[null, "bottom", "bottom"]} position={[null, 'bottom', 'bottom']}
highlight="#cc5600" highlight="#cc5600"
image="/haunted/bg.webp" image="/haunted/bg.webp"
filter="brightness(0.7)" filter="brightness(0.7)"
> >
<Grid columns={[1, 2]} sx={{ position: "relative", zIndex: 2 }}> <Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Image <Image
src="/haunted/haunted-text.svg" src="/haunted/haunted-text.svg"
sx={{ sx={{
width: ["200px", "250px", "300px"], width: ['200px', '250px', '300px'],
mt: ["-10px", "-20px", "-20px"], mt: ['-10px', '-20px', '-20px'],
position: "relative", position: 'relative',
zIndex: 2, zIndex: 2,
fontSize: ["36px", 4, 5], fontSize: ['36px', 4, 5],
color: "white", color: 'white'
}} }}
alt="Haunted" alt="Haunted"
/> />
<Box></Box> <Box></Box>
<Text as="p" variant="subtitle" sx={{ color: 'white' }}> <Text as="p" variant="subtitle" sx={{ color: 'white' }}>
Haunted House is a Chicago-based event full of sites and frights! Join us from October 28-29 Haunted House is a Chicago-based event full of sites and frights! Join
for a weekend of coding pushing the bounds of creativity, where fright meets byte! us from October 28-29 for a weekend of coding pushing the bounds of
creativity, where fright meets byte!
</Text> </Text>
<Flex <Flex
sx={{ sx={{
flexDirection: "column", flexDirection: 'column',
mt: [3, 3, 4], mt: [3, 3, 4],
alignItems: "end", alignItems: 'end',
justifyContent: "flex-end", justifyContent: 'flex-end'
}} }}
></Flex> ></Flex>
<Buttons id="14" link="https://haunted.hackclub.com" icon="welcome" primary="#EB6424"> <Buttons
Sign Up id="14"
</Buttons> link="https://haunted.hackclub.com"
icon="welcome"
primary="#EB6424"
>
Sign Up
</Buttons>
</Grid> </Grid>
</CardModel> </CardModel>
); )
} }

4
components/index/cards/haxidraw.js
View file

@ -29,8 +29,8 @@ export default function Haxidraw({ stars }) {
variant="subtitle" variant="subtitle"
sx={{ zIndex: 2, position: 'relative' }} sx={{ zIndex: 2, position: 'relative' }}
> >
Blot is an open source drawing machine and online editor, Blot is an open source drawing machine and online editor, designed
designed to be a fun and beginner friendly introduction to digital to be a fun and beginner friendly introduction to digital
fabrication and generative art. fabrication and generative art.
</Text> </Text>
</Box> </Box>

133
components/index/cards/mailing-list.js
View file

@ -23,8 +23,8 @@ const Loading = () => (
mr: '5px', mr: '5px',
'@keyframes spin': { '@keyframes spin': {
'0%': { transform: 'rotate(0deg)' }, '0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' }, '100%': { transform: 'rotate(360deg)' }
}, }
}} }}
></Box> ></Box>
) )
@ -35,19 +35,19 @@ const MailingList = () => {
const [data, setData] = useState({ finalHtml: [], names: [] }) const [data, setData] = useState({ finalHtml: [], names: [] })
const formRef = useRef(null) const formRef = useRef(null)
const handleSubmit = async (e) => { const handleSubmit = async e => {
e.preventDefault() e.preventDefault()
setSubmitting(true) setSubmitting(true)
let res = await fetch('/api/mailing-list', { let res = await fetch('/api/mailing-list', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
name: e.target.name.value, name: e.target.name.value,
email: e.target.email.value, email: e.target.email.value
}), })
}) })
formRef.current.reset() formRef.current.reset()
@ -66,22 +66,33 @@ const MailingList = () => {
useEffect(() => { useEffect(() => {
Promise.all([ Promise.all([
fetch('https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates') fetch(
'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'
)
.then(response => response.json()) .then(response => response.json())
.then(data => data.sort((a, b) => b.name.localeCompare(a.name))) // Makes sure we only get the latest two newsletters .then(data => data.sort((a, b) => b.name.localeCompare(a.name))) // Makes sure we only get the latest two newsletters
.then(data => data.slice(0, 2)) .then(data => data.slice(0, 2))
.then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter .then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter
.then(responses => Promise.all(responses.map(response => response.text()))) .then(responses =>
.then(markdown => Promise.all(markdown.map(markdown => markdownToHtml(markdown)))) Promise.all(responses.map(response => response.text()))
.then(html => html.map(html => html.replace(/<[^>]*>/g, '').replace(/The Hackening/g, ''))), // Chucks out all html tags + 'The Hackening' )
.then(markdown =>
fetch('https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates') Promise.all(markdown.map(markdown => markdownToHtml(markdown)))
)
.then(html =>
html.map(html =>
html.replace(/<[^>]*>/g, '').replace(/The Hackening/g, '')
)
), // Chucks out all html tags + 'The Hackening'
fetch(
'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'
)
.then(response => response.json()) .then(response => response.json())
.then(data => data.sort((a, b) => b.name.localeCompare(a.name))) .then(data => data.sort((a, b) => b.name.localeCompare(a.name)))
.then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension .then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension
]) ]).then(([finalHtml, names]) => setData({ finalHtml, names }))
.then(([finalHtml, names]) => setData({ finalHtml, names })) }, [])
}, [])
return ( return (
<Box sx={{ position: 'relative', py: 6, background: 'darker' }}> <Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
@ -93,10 +104,12 @@ const MailingList = () => {
background: 'rgb(255,255,255, 0.45)', background: 'rgb(255,255,255, 0.45)',
position: 'relative', position: 'relative',
zIndex: 2, zIndex: 2,
backdropFilter: 'blur(8px)', backdropFilter: 'blur(8px)'
}} }}
> >
<Flex sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}> <Flex
sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}
>
<Flex <Flex
sx={{ sx={{
placeItems: 'center', placeItems: 'center',
@ -104,16 +117,16 @@ const MailingList = () => {
alignItems: ['left', 'left', 'center'], alignItems: ['left', 'left', 'center'],
flexDirection: 'column', flexDirection: 'column',
gap: '10px', gap: '10px',
width: ['100%', '100%', '75%'], width: ['100%', '100%', '75%']
}} }}
> >
<Box> <Box>
<Text <Text
variant='title' variant="title"
sx={{ sx={{
fontSize: [4, '36px', '42px', 6], fontSize: [4, '36px', '42px', 6],
zIndex: 2, zIndex: 2,
textAlign: 'left', textAlign: 'left'
}} }}
> >
Join the newsletter Join the newsletter
@ -123,23 +136,24 @@ const MailingList = () => {
color: 'darkless', color: 'darkless',
mt: 2, mt: 2,
fontSize: 3, fontSize: 3,
textAlign: 'left', textAlign: 'left'
}} }}
as='p' as="p"
> >
We&apos;ll send you an email no more than once a month, when we work We&apos;ll send you an email no more than once a month, when we
on something cool for you. Check out our{' '} work on something cool for you. Check out our{' '}
<Link <Link
href='https://workshops.hackclub.com/leader-newsletters/' href="https://workshops.hackclub.com/leader-newsletters/"
target='_blank' target="_blank"
rel='noopener norefferer' rel="noopener norefferer"
> >
previous issues previous issues
</Link>. </Link>
.
</Text> </Text>
</Box> </Box>
<Grid <Grid
as='form' as="form"
ref={formRef} ref={formRef}
onSubmit={handleSubmit} onSubmit={handleSubmit}
gap={[2, 3]} gap={[2, 3]}
@ -147,47 +161,47 @@ const MailingList = () => {
textAlign: 'center', textAlign: 'center',
alignItems: 'end', alignItems: 'end',
input: { bg: 'sunken' }, input: { bg: 'sunken' },
width: '100%', width: '100%'
}} }}
> >
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<Input <Input
autofillBackgroundColor='highlight' autofillBackgroundColor="highlight"
type='text' type="text"
name='name' name="name"
id='name' id="name"
placeholder='Your Name' placeholder="Your Name"
required required
sx={{ sx={{
width: '100%', width: '100%',
textAlign: 'center', textAlign: 'center',
fontSize: 2, fontSize: 2
}} }}
/> />
</Box> </Box>
<div> <div>
<Input <Input
autofillBackgroundColor='highlight' autofillBackgroundColor="highlight"
type='email' type="email"
name='email' name="email"
id='email' id="email"
placeholder='Your Email' placeholder="Your Email"
required required
sx={{ sx={{
width: '100%', width: '100%',
textAlign: 'center', textAlign: 'center',
fontSize: 2, fontSize: 2
}} }}
/> />
</div> </div>
<Button type='submit' sx={{ mt: [2, 0], fontSize: 2 }}> <Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
{submitting ? ( {submitting ? (
<> <>
<Loading /> Subscribe <Loading /> Subscribe
</> </>
) : submitted ? ( ) : submitted ? (
<> <>
<Icon glyph='send' /> You're on the list! <Icon glyph="send" /> You're on the list!
</> </>
) : ( ) : (
'Subscribe' 'Subscribe'
@ -200,28 +214,33 @@ const MailingList = () => {
display: 'grid', display: 'grid',
gridGap: 4, gridGap: 4,
mt: [4, 0], mt: [4, 0],
width: '100%', width: '100%'
}} }}
> >
{data.finalHtml.map((html, index) => ( {data.finalHtml
<MailCard .map((html, index) => (
issue={index + 1} <MailCard
body={html} issue={index + 1}
date={format(parse('', '', new Date(data.names[index])), 'MMMM d, yyyy')} body={html}
link={data.names[index]} date={format(
key={index} parse('', '', new Date(data.names[index])),
/> 'MMMM d, yyyy'
)).reverse()} )}
link={data.names[index]}
key={index}
/>
))
.reverse()}
</Box> </Box>
</Flex> </Flex>
</Card> </Card>
<BGImg <BGImg
width={2544} width={2544}
height={2048} height={2048}
gradient='linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))' gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
src={background} src={background}
placeholder='blur' placeholder="blur"
alt='Globe with hundreds of Hack Clubs' alt="Globe with hundreds of Hack Clubs"
/> />
</Box> </Box>
) )

50
components/index/cards/onboard.js
View file

@ -1,5 +1,5 @@
import {useEffect, useState} from 'react' import { useEffect, useState } from 'react'
import {Box, Flex, Grid, Text} from 'theme-ui' import { Box, Flex, Grid, Text } from 'theme-ui'
import CardModel from './card-model' import CardModel from './card-model'
import Buttons from './button' import Buttons from './button'
@ -10,10 +10,10 @@ export default function Onboard({ stars }) {
useEffect(() => { useEffect(() => {
fetch( fetch(
'https://api.github.com/search/issues?q=repo:hackclub/onboard+is:pr+is:merged+label:Submission', 'https://api.github.com/search/issues?q=repo:hackclub/onboard+is:pr+is:merged+label:Submission'
) )
.then((response) => response.json()) .then(response => response.json())
.then((data) => setProjects(data.total_count)) .then(data => setProjects(data.total_count))
}, []) }, [])
return ( return (
@ -23,23 +23,23 @@ export default function Onboard({ stars }) {
backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.4) 50%), url('https://cloud-fyrwj5rn5-hack-club-bot.vercel.app/0pcb.svg')`, backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.4) 50%), url('https://cloud-fyrwj5rn5-hack-club-bot.vercel.app/0pcb.svg')`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat'
}} }}
github_link='https://github.com/hackclub/onboard/' github_link="https://github.com/hackclub/onboard/"
color='white' color="white"
highlight='#87ffa1' highlight="#87ffa1"
stars={stars} stars={stars}
> >
<Text <Text
variant='title' variant="title"
as='h3' as="h3"
sx={{ sx={{
fontSize: ['36px', 4, 5], fontSize: ['36px', 4, 5],
maxWidth: 'copyPlus', maxWidth: 'copyPlus',
textShadow: '0 0 30px rgba(42, 252, 88, 0.6)', textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
color: '#87ffa1', color: '#87ffa1',
mt: ['38px', 0, 0], mt: ['38px', 0, 0],
position: 'relative', position: 'relative'
}} }}
> >
OnBoard OnBoard
@ -47,8 +47,8 @@ export default function Onboard({ stars }) {
<Grid columns={[1, 2]}> <Grid columns={[1, 2]}>
<Box> <Box>
<Text <Text
as='p' as="p"
variant='subheadline' variant="subheadline"
sx={{ sx={{
px: 2, px: 2,
py: 1, py: 1,
@ -63,32 +63,32 @@ export default function Onboard({ stars }) {
> >
{projects} projects built {projects} projects built
</Text> </Text>
<Text as='p' variant='subtitle'> <Text as="p" variant="subtitle">
Circuit boards are magical. You design one, we'll print it. Circuit boards are magical. You design one, we'll print it.
Completely for free! Get a $100 grant to fuel the creation of your dream Completely for free! Get a $100 grant to fuel the creation of your
project with OnBoard. dream project with OnBoard.
</Text> </Text>
</Box> </Box>
<Flex <Flex
sx={{ flexDirection: 'column', mt: [3, 3, 4], placeSelf: 'start' }} sx={{ flexDirection: 'column', mt: [3, 3, 4], placeSelf: 'start' }}
> >
<Buttons <Buttons
id='59' id="59"
icon='emoji' icon="emoji"
link='https://github.com/hackclub/OnBoard/blob/main/README.md' link="https://github.com/hackclub/OnBoard/blob/main/README.md"
primary='#87ffa1' primary="#87ffa1"
color='black' color="black"
> >
Get a grant Get a grant
</Buttons> </Buttons>
<Buttons icon='docs' link='https://jams.hackclub.com/tag/pcb' id='60'> <Buttons icon="docs" link="https://jams.hackclub.com/tag/pcb" id="60">
Learn how to design a PCB Learn how to design a PCB
</Buttons> </Buttons>
<Buttons icon='friend' link='/slack?event=onboard' id='61'> <Buttons icon="friend" link="/slack?event=onboard" id="61">
See what other hackers have built See what other hackers have built
</Buttons> </Buttons>
</Flex> </Flex>
</Grid> </Grid>
</CardModel> </CardModel>
) )
} }

117
components/index/cards/pizza.js
View file

@ -11,60 +11,85 @@ export default function Pizza() {
sx={{ sx={{
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundColor: '#95C9E5', backgroundColor: '#95C9E5',
border: "1px solid #EC3750" // Corrected the color value here border: '1px solid #EC3750' // Corrected the color value here
}} }}
position={[null, 'bottom', 'bottom']} position={[null, 'bottom', 'bottom']}
highlight="#271932" highlight="#271932"
image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png" image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png"
> >
<Grid columns={[1, 2]} sx={{ position: 'relative', alignItems: "center", zIndex: 2 }}> <Grid
<Box> columns={[1, 2]}
<Text sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
as="h3" >
variant="title" <Box>
sx={{ <Text
fontSize: ['36px', 4, 5], as="h3"
zIndex: 2, variant="title"
color: "#000", sx={{
mb: "8px" fontSize: ['36px', 4, 5],
}} zIndex: 2,
> color: '#000',
Start A Hack Club <br/> Get <Text mb: '8px'
sx={{ }}
>
background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"], Start A Hack Club <br /> Get{' '}
WebkitBackgroundClip: "text", <Text
WebkitTextStroke: 'currentColor', sx={{
WebkitTextFillColor: 'transparent', background: [
'linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)'
],
}} WebkitBackgroundClip: 'text',
> $100 In Pizza</Text> WebkitTextStroke: 'currentColor',
</Text> WebkitTextFillColor: 'transparent'
}}
>
{' '}
$100 In Pizza
</Text>
</Text>
<Text as="p" variant="subtitle" sx={{ color: '#000', mb: 3 }}> <Text as="p" variant="subtitle" sx={{ color: '#000', mb: 3 }}>
GitHub is providing $100 pizza grants to every teen who starts a Hack Club at their school. GitHub is providing $100 pizza grants to every teen who starts a
</Text> Hack Club at their school.
</Text>
<Buttons id="14" link="/pizza" icon="welcome" primary="primary">
<Buttons id="14" link="/pizza" icon="welcome" primary="primary">
Get Your Pizza Grant Get Your Pizza Grant
</Buttons> </Buttons>
</Box> </Box>
<Box> <Box>
<Flex <Flex
sx={{ sx={{
flexDirection: 'column', flexDirection: 'column',
alignItems: 'end', alignItems: 'end',
justifyContent: 'flex-end', justifyContent: 'flex-end',
position: "relative" position: 'relative'
}} }}
> >
<Image alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant" sx={{borderRadius: "16px", <Image
border: "1px solid #EC3750", alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant"
aspectRatio: "16/9", objectFit: "cover"}} src="https://cloud-8tc8qa1ew-hack-club-bot.vercel.app/0img_8975.jpg"/> sx={{
<Text sx={{color: "#000", backgroundColor: "#fff", left: "16px", bottom: "16px", padding: "6px 8px", borderRadius: "16px", position: "absolute"}}>Newton South HS Hack Club in Boston</Text> borderRadius: '16px',
</Flex> border: '1px solid #EC3750',
aspectRatio: '16/9',
objectFit: 'cover'
}}
src="https://cloud-8tc8qa1ew-hack-club-bot.vercel.app/0img_8975.jpg"
/>
<Text
sx={{
color: '#000',
backgroundColor: '#fff',
left: '16px',
bottom: '16px',
padding: '6px 8px',
borderRadius: '16px',
position: 'absolute'
}}
>
Newton South HS Hack Club in Boston
</Text>
</Flex>
</Box> </Box>
</Grid> </Grid>
</CardModel> </CardModel>

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

@ -1,4 +1,4 @@
import {Box, Grid, Image, Text} from 'theme-ui' import { Box, Grid, Image, Text } from 'theme-ui'
import Buttons from './button' import Buttons from './button'
import CardModel from './card-model' import CardModel from './card-model'
import Tilt from '../../tilt' import Tilt from '../../tilt'

4
components/index/github.js
View file

@ -18,7 +18,7 @@ export default function GitHub({
variant="pill" variant="pill"
bg="snow" bg="snow"
as="a" as="a"
href={url || "https://github.com/hackclub"} href={url || 'https://github.com/hackclub'}
target="_blank" target="_blank"
rel="noopener" rel="noopener"
sx={{ sx={{
@ -83,4 +83,4 @@ export default function GitHub({
</Text> </Text>
</Badge> </Badge>
) )
} }

30
components/mail-card.js
View file

@ -1,26 +1,26 @@
import { Box, Card, Link, Text } from "theme-ui"; import { Box, Card, Link, Text } from 'theme-ui'
export default function MailCard({ body, date, link }) { export default function MailCard({ body, date, link }) {
body = body.length > 130 ? body.substring(0, 130) + '...' : body body = body.length > 130 ? body.substring(0, 130) + '...' : body
return ( return (
<Card <Card
variant='interactive' variant="interactive"
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
padding: '0 !important', padding: '0 !important'
}} }}
> >
<Link <Link
href={`https://workshops.hackclub.com/leader-newsletters/${link}`} href={`https://workshops.hackclub.com/leader-newsletters/${link}`}
sx={{ textDecoration: 'none' }} sx={{ textDecoration: 'none' }}
target='_blank' target="_blank"
rel='noopener norefferer' rel="noopener norefferer"
> >
<Box <Box
sx={{ sx={{
height: '90%', height: '90%',
color: 'black', color: 'black',
textDecoration: 'none !important', textDecoration: 'none !important'
}} }}
> >
<Box <Box
@ -29,7 +29,7 @@ export default function MailCard({ body, date, link }) {
height: '10px', height: '10px',
backgroundRepeat: 'repeat-x', backgroundRepeat: 'repeat-x',
backgroundSize: '100%', backgroundSize: '100%',
backgroundImage: `url('/letter-pattern.svg')`, backgroundImage: `url('/letter-pattern.svg')`
}} }}
/> />
<Box <Box
@ -37,17 +37,17 @@ export default function MailCard({ body, date, link }) {
placeItems: 'center', placeItems: 'center',
display: 'grid', display: 'grid',
height: '100%', height: '100%',
paddingY: [3, 4, 0], paddingY: [3, 4, 0]
}} }}
> >
<Box sx={{ px: [3, 4] }}> <Box sx={{ px: [3, 4] }}>
<Text> <Text>
{date} {date}
<Text sx={{ color: '#8492a6' }}>— From Hack Club, to You</Text> <Text sx={{ color: '#8492a6' }}>— From Hack Club, to You</Text>
</Text> </Text>
<Text as='h2' sx={{ fontWeight: 'normal' }}> <Text as="h2" sx={{ fontWeight: 'normal' }}>
{body} {body}
</Text> </Text>
</Box> </Box>
</Box> </Box>
</Box> </Box>

8
components/nav.js
View file

@ -205,13 +205,13 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
const baseColor = dark const baseColor = dark
? color || 'white' ? color || 'white'
: color === 'white' && scrolled : color === 'white' && scrolled
? 'black' ? 'black'
: color : color
const toggleColor = dark const toggleColor = dark
? color || 'snow' ? color || 'snow'
: toggled || (color === 'white' && scrolled) : toggled || (color === 'white' && scrolled)
? 'slate' ? 'slate'
: color : color
return ( return (
<Root <Root

8
lib/use-form.js
View file

@ -54,12 +54,12 @@ const useForm = (
if (callback) callback(r) if (callback) callback(r)
if (options.clearOnSubmit) { if (options.clearOnSubmit) {
setTimeout(() => { setTimeout(() => {
setData({}); setData({})
setStatus('default'); setStatus('default')
}, options.clearOnSubmit); }, options.clearOnSubmit)
} else { } else {
setTimeout(() => { setTimeout(() => {
setData({}); setData({})
setStatus('default') setStatus('default')
}, 3500) }, 3500)
} }

5
middleware.js
View file

@ -14,9 +14,8 @@ export function middleware(request) {
} }
if (request.nextUrl.pathname === '/donate/') { if (request.nextUrl.pathname === '/donate/') {
return NextResponse.redirect('https://hackclub.com/philanthropy/'); return NextResponse.redirect('https://hackclub.com/philanthropy/')
} }
return NextResponse.next(); return NextResponse.next()
} }

2
pages/api/hcb/apply.js
View file

@ -14,7 +14,7 @@ export default async function handler(req, res) {
body: JSON.stringify({ body: JSON.stringify({
email: data.userEmail, email: data.userEmail,
name: data.eventName, name: data.eventName,
transparent: data.transparent, transparent: data.transparent
// country: data.eventCountryCode, // country: data.eventCountryCode,
}), }),
method: 'POST', method: 'POST',

106
pages/api/steve.js
View file

@ -1,54 +1,66 @@
export default async (req, res) => { export default async (req, res) => {
const calendarId = "c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com"; const calendarId =
const apiKey = "AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg"; // Replace with your API Key 'c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com'
const apiKey = 'AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg' // Replace with your API Key
let allBusyDays = new Set(); let allBusyDays = new Set()
try { try {
const currentDateTime = new Date(); const currentDateTime = new Date()
const adjustedDateTime = new Date(currentDateTime.getTime() + (currentDateTime.getTimezoneOffset() + 240) * 60 * 1000); // Adjust to GMT-04 const adjustedDateTime = new Date(
const startTime = adjustedDateTime.toISOString(); currentDateTime.getTime() +
const endTime = new Date(adjustedDateTime.getTime() + 30 * 24 * 60 * 60 * 1000).toISOString(); (currentDateTime.getTimezoneOffset() + 240) * 60 * 1000
) // Adjust to GMT-04
const startTime = adjustedDateTime.toISOString()
const endTime = new Date(
adjustedDateTime.getTime() + 30 * 24 * 60 * 60 * 1000
).toISOString()
const response = await fetch(`https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`, { const response = await fetch(
method: 'POST', `https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`,
headers: { {
'Content-Type': 'application/json' method: 'POST',
}, headers: {
body: JSON.stringify({ 'Content-Type': 'application/json'
timeMin: startTime, },
timeMax: endTime, body: JSON.stringify({
items: [{ id: calendarId }] timeMin: startTime,
}) timeMax: endTime,
}); items: [{ id: calendarId }]
})
}
)
const data = await response.json(); const data = await response.json()
if (data.error) { if (data.error) {
return res.status(400).json({ error: data.error.message }); return res.status(400).json({ error: data.error.message })
}
// Assuming there are time ranges where the calendar is busy:
const busyTimes = data.calendars[calendarId].busy;
// For each busy time range, extract all days that are busy:
for (let busy of busyTimes) {
let startDate = new Date(busy.start);
let endDate = new Date(busy.end);
// Adjust dates to GMT-04
startDate = new Date(startDate.getTime() + (startDate.getTimezoneOffset() + 240) * 60 * 1000);
endDate = new Date(endDate.getTime() + (endDate.getTimezoneOffset() + 240) * 60 * 1000);
while (startDate < endDate) {
allBusyDays.add(startDate.toISOString().split('T')[0]);
startDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // Adding 24 hours for the next date
}
}
return res.status(200).json([...allBusyDays]);
} catch (error) {
return res.status(500).json({ error: "Failed to fetch busy times." });
} }
};
// Assuming there are time ranges where the calendar is busy:
const busyTimes = data.calendars[calendarId].busy
// For each busy time range, extract all days that are busy:
for (let busy of busyTimes) {
let startDate = new Date(busy.start)
let endDate = new Date(busy.end)
// Adjust dates to GMT-04
startDate = new Date(
startDate.getTime() + (startDate.getTimezoneOffset() + 240) * 60 * 1000
)
endDate = new Date(
endDate.getTime() + (endDate.getTimezoneOffset() + 240) * 60 * 1000
)
while (startDate < endDate) {
allBusyDays.add(startDate.toISOString().split('T')[0])
startDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000) // Adding 24 hours for the next date
}
}
return res.status(200).json([...allBusyDays])
} catch (error) {
return res.status(500).json({ error: 'Failed to fetch busy times.' })
}
}

11
pages/clubs.js
View file

@ -340,8 +340,9 @@ const Page = () => (
<a>hackathons</a> <a>hackathons</a>
</NextLink>{' '} </NextLink>{' '}
like <a href="https://lioncityhacks.com">Lion City Hacks</a> &{' '} like <a href="https://lioncityhacks.com">Lion City Hacks</a> &{' '}
<a href="https://www.youtube.com/watch?v=Hs-hMMeHXaY">HackOC</a>, take part in year long <a href="https://www.youtube.com/watch?v=Hs-hMMeHXaY">HackOC</a>,
programs like <NextLink href="/onboard">OnBoard</NextLink>, and compete in events take part in year long programs like{' '}
<NextLink href="/onboard">OnBoard</NextLink>, and compete in events
like the{' '} like the{' '}
<a href="http://www.congressionalappchallenge.us"> <a href="http://www.congressionalappchallenge.us">
Congressional App Challenge Congressional App Challenge
@ -466,9 +467,8 @@ const Page = () => (
<> <>
Come prepared to every meeting with over 100{' '} Come prepared to every meeting with over 100{' '}
<a href="https://workshops.hackclub.com">workshops</a> (3 years’ <a href="https://workshops.hackclub.com">workshops</a> (3 years’
worth!) and 19 <a href="https://jams.hackclub.com">Jams</a>{' '} worth!) and 19 <a href="https://jams.hackclub.com">Jams</a> that
that guide your club members through making fun, creative guide your club members through making fun, creative projects.
projects.
</> </>
} }
></Feature> ></Feature>
@ -710,4 +710,3 @@ const Page = () => (
) )
export default Page export default Page

5
pages/events.js
View file

@ -31,8 +31,7 @@ const events = [
season: 'Fall', season: 'Fall',
year: '2023', year: '2023',
// repo: 'outernet', // repo: 'outernet',
image: image: 'https://cloud-6vo1bh2dg-hack-club-bot.vercel.app/0image.png',
'https://cloud-6vo1bh2dg-hack-club-bot.vercel.app/0image.png',
link: 'https://haunted.hackclub.com' link: 'https://haunted.hackclub.com'
}, },
{ {
@ -43,7 +42,7 @@ const events = [
season: 'Summer', season: 'Summer',
year: '2023', year: '2023',
video: 'https://www.youtube.com/embed/O1s5HqSqKi0', video: 'https://www.youtube.com/embed/O1s5HqSqKi0',
repo: 'outernet', repo: 'outernet'
}, },
{ {
name: 'Epoch', name: 'Epoch',

4
pages/hackathons/grant.js
View file

@ -373,8 +373,8 @@ const HackathonGrant = () => {
logos found on the respective brand guides for{' '} logos found on the respective brand guides for{' '}
<Link href="/brand" target="_blank"> <Link href="/brand" target="_blank">
Hack Club Hack Club
</Link>{'.'} </Link>
. {'.'}.
</Text> </Text>
{open ? ( {open ? (

20
pages/hackathons/index.js
View file

@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
/> />
<Box as="main"> <Box as="main">
<Landing /> <Landing />
<Overview /> <Overview />
<ScrollingHackathons eventData={data} title={true} /> <ScrollingHackathons eventData={data} title={true} />
<KeepExploring /> <KeepExploring />
<Money /> <Money />
<Slack /> <Slack />
@ -46,22 +46,24 @@ export default function Hackathons({ data }) {
) )
} }
export async function getStaticProps() { export async function getStaticProps() {
let data; let data
try { try {
const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming'); const res = await fetch(
'https://hackathons.hackclub.com/api/events/upcoming'
)
if (res.ok) { if (res.ok) {
data = await res.json(); data = await res.json()
} else { } else {
data = []; data = []
} }
} catch (error) { } catch (error) {
data = []; data = []
} }
return { return {
props: { props: {
data, data
}, },
revalidate: 10 revalidate: 10
}; }
} }

5
pages/hcb/climate/index.js
View file

@ -613,7 +613,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
justifyContent: 'start' justifyContent: 'start'
}} }}
> >
{modalOrganization.branding.logo && {modalOrganization.branding.logo && (
<img <img
alt={`${modalOrganization.name}'s logo`} alt={`${modalOrganization.name}'s logo`}
src={modalOrganization.branding.logo} src={modalOrganization.branding.logo}
@ -625,7 +625,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)' boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
}} }}
/> />
} )}
<Text <Text
variant="title" variant="title"
sx={{ sx={{
@ -1032,7 +1032,6 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
> >
EXPLORE IMPACT EXPLORE IMPACT
</Button> </Button>
</Box> </Box>
</Box> </Box>

10
pages/index.js
View file

@ -410,15 +410,15 @@ function Page({
count === images.length - 2 count === images.length - 2
? images[0].src ? images[0].src
: images.length - 1 : images.length - 1
? images[1].src ? images[1].src
: images[count + 2].src : images[count + 2].src
} }
alt={ alt={
count === images.length - 2 count === images.length - 2
? images[0].alt ? images[0].alt
: images.length - 1 : images.length - 1
? images[1].alt ? images[1].alt
: images[count + 2].alt : images[count + 2].alt
} }
width={3000} width={3000}
height={2550} height={2550}
@ -778,7 +778,7 @@ function Page({
url={data.url} url={data.url}
message={data.message} message={data.message}
key={key} key={key}
opacity={1 / (key/2 + 1)} opacity={1 / (key / 2 + 1)}
/> />
) )
})} })}

3
pages/night.js
View file

@ -99,7 +99,8 @@ const Page = () => (
hang out on a chill call. hang out on a chill call.
</Text> </Text>
<Text as="p" variant="subtitle"> <Text as="p" variant="subtitle">
Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '} Hack nights are hosted regularly by Hack Clubbers. Come join or start
an impromptu Hack session on{' '}
<NextLink href="/slack" passHref> <NextLink href="/slack" passHref>
<Link sx={{ color, opacity: 0.75 }}>#hack-night</Link> <Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
</NextLink> </NextLink>

53
pages/onboard/first.js
View file

@ -1,14 +1,14 @@
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from "theme-ui"; import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
import Balancer from "react-wrap-balancer"; import Balancer from 'react-wrap-balancer'
import Head from "next/head"; import Head from 'next/head'
import Meta from "@hackclub/meta"; import Meta from '@hackclub/meta'
import Nav from "../../components/nav"; import Nav from '../../components/nav'
import Footer from "../../components/footer"; import Footer from '../../components/footer'
import FadeIn from "../../components/fade-in"; import FadeIn from '../../components/fade-in'
import Sparkles from "../../components/sparkles"; import Sparkles from '../../components/sparkles'
import Tilt from "../../components/tilt"; import Tilt from '../../components/tilt'
import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion"; import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from 'react'
/** /**
* @type {import('theme-ui').ThemeUIStyleObject} * @type {import('theme-ui').ThemeUIStyleObject}
@ -443,7 +443,9 @@ const ShipPage = () => {
color: '#87ffa1' color: '#87ffa1'
}} }}
> >
<Balancer ratio={0.3}>OnBoard with <i>FIRST&reg;</i></Balancer> <Balancer ratio={0.3}>
OnBoard with <i>FIRST&reg;</i>
</Balancer>
</Heading> </Heading>
<Heading <Heading
@ -456,12 +458,14 @@ const ShipPage = () => {
<Text sx={{ fontWeight: 400 }}>magical</Text> <Text sx={{ fontWeight: 400 }}>magical</Text>
</Sparkles> </Sparkles>
. You design one, we'll print it! . You design one, we'll print it!
<br /><br /> <br />
Plus! FIRST team members get a limited edition PCB badge designed with Dean Kamen. <br />
Plus! FIRST team members get a limited edition PCB badge
designed with Dean Kamen.
</Balancer> </Balancer>
</Heading> </Heading>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ["column", "row"] }}> <Flex sx={{ mt: 16, gap: 10, flexDirection: ['column', 'row'] }}>
<Button <Button
variant="ctaLg" variant="ctaLg"
as="a" as="a"
@ -624,8 +628,13 @@ const ShipPage = () => {
maxWidth: 'copyPlus' maxWidth: 'copyPlus'
}} }}
> >
<Text as="p" sx={{ color: '#000000', flex: '1', maxWidth: 400, p: 4 }}> <Text
FRC team #4272 "Maverick Robotics" made this <strong>swerve-drive encoder</strong> for their robot drive train that's cheaper than stock sensors and saves ports on their CAN. as="p"
sx={{ color: '#000000', flex: '1', maxWidth: 400, p: 4 }}
>
FRC team #4272 "Maverick Robotics" made this{' '}
<strong>swerve-drive encoder</strong> for their robot drive train
that's cheaper than stock sensors and saves ports on their CAN.
</Text> </Text>
<Image <Image
src="https://cloud-of94ar9fg-hack-club-bot.vercel.app/0purple.png" src="https://cloud-of94ar9fg-hack-club-bot.vercel.app/0purple.png"
@ -1103,10 +1112,14 @@ const ShipPage = () => {
> >
<Text as="h3">Learn to PCB</Text> <Text as="h3">Learn to PCB</Text>
<Text as="p"> <Text as="p">
Read our tutorials to learn how to make a simple Read our tutorials to learn how to make a simple circuit boards
circuit boards from start to end. from start to end.
</Text> </Text>
<Button as="a" href="https://jams.hackclub.com/tag/pcb" target="_blank"> <Button
as="a"
href="https://jams.hackclub.com/tag/pcb"
target="_blank"
>
Start the Tutorial Start the Tutorial
</Button> </Button>
</Flex> </Flex>

45
pages/onboard/index.js
View file

@ -1,14 +1,14 @@
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from "theme-ui"; import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
import Balancer from "react-wrap-balancer"; import Balancer from 'react-wrap-balancer'
import Head from "next/head"; import Head from 'next/head'
import Meta from "@hackclub/meta"; import Meta from '@hackclub/meta'
import Nav from "../../components/nav"; import Nav from '../../components/nav'
import Footer from "../../components/footer"; import Footer from '../../components/footer'
import FadeIn from "../../components/fade-in"; import FadeIn from '../../components/fade-in'
import Sparkles from "../../components/sparkles"; import Sparkles from '../../components/sparkles'
import Tilt from "../../components/tilt"; import Tilt from '../../components/tilt'
import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion"; import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from 'react'
/** /**
* @type {import('theme-ui').ThemeUIStyleObject} * @type {import('theme-ui').ThemeUIStyleObject}
@ -459,7 +459,7 @@ const ShipPage = () => {
</Balancer> </Balancer>
</Heading> </Heading>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ["column", "row"] }}> <Flex sx={{ mt: 16, gap: 10, flexDirection: ['column', 'row'] }}>
<Button <Button
variant="ctaLg" variant="ctaLg"
as="a" as="a"
@ -707,10 +707,7 @@ const ShipPage = () => {
</Flex> </Flex>
</a> */} </a> */}
<a <a href="https://jams.hackclub.com/batch/usb-hub" target="_blank">
href="https://jams.hackclub.com/batch/usb-hub"
target="_blank"
>
<Flex as="article"> <Flex as="article">
<Text as="p" sx={{ pr: [100, 100, 100, 0] }}> <Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
Hugo's <strong>USB-C hub</strong> for the best{' '} Hugo's <strong>USB-C hub</strong> for the best{' '}
@ -744,7 +741,8 @@ const ShipPage = () => {
Karmanyaah's <strong>digital level</strong>, SparkleTilt. Karmanyaah's <strong>digital level</strong>, SparkleTilt.
</Text> </Text>
<Text as="p" sx={{ pr: 140, color: 'gray' }}> <Text as="p" sx={{ pr: 140, color: 'gray' }}>
Learn how to make your own&nbsp;<span className="arrow">&rarr;</span> Learn how to make your own&nbsp;
<span className="arrow">&rarr;</span>
</Text> </Text>
<Image <Image
src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png" src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
@ -769,7 +767,8 @@ const ShipPage = () => {
Build your own <strong>hardware key</strong>. Build your own <strong>hardware key</strong>.
</Text> </Text>
<Text as="p" sx={{ pr: 140, color: 'gray' }}> <Text as="p" sx={{ pr: 140, color: 'gray' }}>
Learn how to make your own&nbsp;<span className="arrow">&rarr;</span> Learn how to make your own&nbsp;
<span className="arrow">&rarr;</span>
</Text> </Text>
<Image <Image
src="https://cloud-6a1wip38p-hack-club-bot.vercel.app/1totk_key.png" src="https://cloud-6a1wip38p-hack-club-bot.vercel.app/1totk_key.png"
@ -1079,10 +1078,14 @@ const ShipPage = () => {
> >
<Text as="h3">Learn to PCB</Text> <Text as="h3">Learn to PCB</Text>
<Text as="p"> <Text as="p">
Read our tutorials to learn how to make a simple Read our tutorials to learn how to make a simple circuit boards
circuit boards from start to end. from start to end.
</Text> </Text>
<Button as="a" href="https://jams.hackclub.com/tag/pcb" target="_blank"> <Button
as="a"
href="https://jams.hackclub.com/tag/pcb"
target="_blank"
>
Start the Tutorial Start the Tutorial
</Button> </Button>
</Flex> </Flex>

31
pages/philanthropy/index.js
View file

@ -631,7 +631,7 @@ const Philanthropy = ({ posts = [] }) => {
<Text as="p">2023 Form will be shared when ready.</Text> <Text as="p">2023 Form will be shared when ready.</Text>
</Box> </Box>
<Box> <Box>
<Button <Button
as="a" as="a"
variant="outline" variant="outline"
href="https://cloud-q56a8ttty-hack-club-bot.vercel.app/0hack_foundation_2022_form_990.pdf" href="https://cloud-q56a8ttty-hack-club-bot.vercel.app/0hack_foundation_2022_form_990.pdf"
@ -860,7 +860,9 @@ const Philanthropy = ({ posts = [] }) => {
</Fade> </Fade>
<Line /> <Line />
<Fade> <Fade>
<Text as="h1" sx={{marginBottom: '20px'}}>Board of Directors</Text> <Text as="h1" sx={{ marginBottom: '20px' }}>
Board of Directors
</Text>
</Fade> </Fade>
<Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}> <Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
<Box> <Box>
@ -1019,12 +1021,16 @@ const Philanthropy = ({ posts = [] }) => {
<Line /> <Line />
<Box> <Box>
<Fade> <Fade>
<Text as="h1" sx={{marginBottom: '20px'}}>Join our community of generous donors</Text> <Text as="h1" sx={{ marginBottom: '20px' }}>
Join our community of generous donors
</Text>
</Fade> </Fade>
<Grid gap={2} columns={[2, 4, 4]} mt={2}> <Grid gap={2} columns={[2, 4, 4]} mt={2}>
<Box> <Box>
<Fade delay={50}> <Fade delay={50}>
<Text as="h3" sx={{marginBottom: '8px'}}>Above $5M </Text> <Text as="h3" sx={{ marginBottom: '8px' }}>
Above $5M{' '}
</Text>
</Fade> </Fade>
<Fade delay={70}> <Fade delay={70}>
<Text as="p" sx={{ lineHeight: '1.8em' }}> <Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1033,7 +1039,10 @@ const Philanthropy = ({ posts = [] }) => {
</Fade> </Fade>
<br></br> <br></br>
<Fade delay={90}> <Fade delay={90}>
<Text as="h3" sx={{marginBottom: '8px'}}> $1M - $5M </Text> <Text as="h3" sx={{ marginBottom: '8px' }}>
{' '}
$1M - $5M{' '}
</Text>
</Fade> </Fade>
<Fade delay={110}> <Fade delay={110}>
<Text as="p" sx={{ lineHeight: '1.8em' }}> <Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1053,7 +1062,9 @@ const Philanthropy = ({ posts = [] }) => {
</Box> </Box>
<Box> <Box>
<Fade delay={140}> <Fade delay={140}>
<Text as="h3" sx={{marginBottom: '8px'}}>$500k - $1M</Text> <Text as="h3" sx={{ marginBottom: '8px' }}>
$500k - $1M
</Text>
</Fade> </Fade>
<Fade delay={180}> <Fade delay={180}>
<Text as="p" sx={{ lineHeight: '1.8em' }}> <Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1078,7 +1089,9 @@ const Philanthropy = ({ posts = [] }) => {
</Box> </Box>
<Box> <Box>
<Fade delay={260}> <Fade delay={260}>
<Text as="h3" sx={{marginBottom: '8px'}}>$200k - $500k</Text> <Text as="h3" sx={{ marginBottom: '8px' }}>
$200k - $500k
</Text>
</Fade> </Fade>
<Fade delay={290}> <Fade delay={290}>
<Text as="p" sx={{ lineHeight: '1.8em' }}> <Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1113,7 +1126,9 @@ const Philanthropy = ({ posts = [] }) => {
</Box> </Box>
<Box> <Box>
<Fade delay={470}> <Fade delay={470}>
<Text as="h3" sx={{marginBottom: '8px'}}>$100k- $200k</Text> <Text as="h3" sx={{ marginBottom: '8px' }}>
$100k- $200k
</Text>
</Fade> </Fade>
<Fade delay={500}> <Fade delay={500}>
<Text as="p" sx={{ lineHeight: '1.8em' }}> <Text as="p" sx={{ lineHeight: '1.8em' }}>

1246
pages/pizza.js
View file

File diff suppressed because it is too large Load diff

17
pages/santa.js
View file

@ -19,9 +19,10 @@ import FadeIn from '../components/fade-in'
import { keyframes } from '@emotion/react' import { keyframes } from '@emotion/react'
import { useState } from 'react' import { useState } from 'react'
const year = 2023; const year = 2023
const announcementMessage = "https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"; const announcementMessage =
const signupsOpen = true; 'https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169'
const signupsOpen = true
const Hero = styled(Box)` const Hero = styled(Box)`
background-image: linear-gradient( background-image: linear-gradient(
@ -193,16 +194,16 @@ function Field({ placeholder, label, name, type, value, onChange }) {
function Signup() { function Signup() {
const [values, setValues] = useState({}) const [values, setValues] = useState({})
return ( return (
<Base method="get" action="https://forms.hackclub.com/2023-secret-santa-form"> <Base
method="get"
action="https://forms.hackclub.com/2023-secret-santa-form"
>
<Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}> <Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
Register! Register!
</Heading> </Heading>
<Text sx={{ textAlign: 'left', color: 'muted' }}> <Text sx={{ textAlign: 'left', color: 'muted' }}>
Be sure to check out the{' '} Be sure to check out the{' '}
<Link <Link href={announcementMessage} sx={{ color: 'blue' }}>
href={announcementMessage}
sx={{ color: 'blue' }}
>
rules rules
</Link>{' '} </Link>{' '}
before you sign up! before you sign up!

739
pages/steve.js
View file

@ -1,4 +1,16 @@
import { Box, Textarea, Link, Grid, Image, Container, Button, Heading, Text, Input, Checkbox } from 'theme-ui' import {
Box,
Textarea,
Link,
Grid,
Image,
Container,
Button,
Heading,
Text,
Input,
Checkbox
} from 'theme-ui'
import Head from 'next/head' import Head from 'next/head'
import Meta from '@hackclub/meta' import Meta from '@hackclub/meta'
import ForceTheme from '../components/force-theme' import ForceTheme from '../components/force-theme'
@ -7,87 +19,90 @@ import Nav from '../components/nav'
import Tilt from '../components/tilt' import Tilt from '../components/tilt'
import Ticker from 'react-ticker' import Ticker from 'react-ticker'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import DatePicker from 'react-datepicker'; import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css'
const StevePage = () => { const StevePage = () => {
const [startDate, setStartDate] = useState(null)
const [endDate, setEndDate] = useState(null)
const [startDate, setStartDate] = useState(null); const [disabledDates, setDisabledDates] = useState([])
const [endDate, setEndDate] = useState(null);
const [disabledDates, setDisabledDates] = useState([]);
useEffect(() => { useEffect(() => {
// Fetch the disabled dates from the API endpoint when the component mounts // Fetch the disabled dates from the API endpoint when the component mounts
const fetchDisabledDates = async () => { const fetchDisabledDates = async () => {
try { try {
const response = await fetch('/api/steve'); const response = await fetch('/api/steve')
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok')
} }
const dateStrings = await response.json(); const dateStrings = await response.json()
const dateObjects = dateStrings.map(dateStr => { const dateObjects = dateStrings.map(dateStr => {
const date = new Date(Date.UTC(dateStr.substring(0, 4), dateStr.substring(5, 7) - 1, dateStr.substring(8, 10))); const date = new Date(
date.setDate(date.getDate() + 1); // Add one day to the date Date.UTC(
return date; dateStr.substring(0, 4),
}); dateStr.substring(5, 7) - 1,
setDisabledDates(dateObjects); dateStr.substring(8, 10)
)
)
date.setDate(date.getDate() + 1) // Add one day to the date
return date
})
setDisabledDates(dateObjects)
} catch (error) { } catch (error) {
console.error('Failed fetching disabled dates:', error); console.error('Failed fetching disabled dates:', error)
} }
}; }
fetchDisabledDates(); fetchDisabledDates()
}, []); }, [])
const isDateDisabled = date => {
return disabledDates.some(
disabledDate => disabledDate.getTime() === date.getTime()
)
}
const isSelectingDisabledRange = (start, end) => {
let currDate = new Date(start)
currDate.setHours(0, 0, 0, 0) // Normalize the time component
let normalizedEnd = new Date(end)
normalizedEnd.setHours(0, 0, 0, 0)
const isDateDisabled = (date) => {
return disabledDates.some(disabledDate =>
disabledDate.getTime() === date.getTime());
};
const isSelectingDisabledRange = (start, end) => {
let currDate = new Date(start);
currDate.setHours(0, 0, 0, 0); // Normalize the time component
let normalizedEnd = new Date(end);
normalizedEnd.setHours(0, 0, 0, 0);
while (currDate <= normalizedEnd) { while (currDate <= normalizedEnd) {
if (isDateDisabled(currDate)) { if (isDateDisabled(currDate)) {
return true; return true
} }
currDate.setDate(currDate.getDate() + 1); currDate.setDate(currDate.getDate() + 1)
} }
return false; return false
};
const handleStartDateChange = (date) => {
if (!endDate || !isSelectingDisabledRange(date, endDate)) {
setStartDate(date);
} else {
setStartDate(date);
setEndDate(null); // Reset end date if the new range is invalid
} }
};
const handleEndDateChange = (date) => { const handleStartDateChange = date => {
if (!isSelectingDisabledRange(startDate, date)) { if (!endDate || !isSelectingDisabledRange(date, endDate)) {
setEndDate(date); setStartDate(date)
} // Do nothing if the range is invalid } else {
}; setStartDate(date)
const images = ["https://cloud-p08od8km8-hack-club-bot.vercel.app/0image.png", "https://cloud-eqvtnimxq-hack-club-bot.vercel.app/0image.png", "https://cloud-r8j7lcawc-hack-club-bot.vercel.app/0image.png", "https://cloud-8f162hv3i-hack-club-bot.vercel.app/0image.png", "https://cloud-b7gqg2qpq-hack-club-bot.vercel.app/0image.png", "https://cloud-ik2jpfk0t-hack-club-bot.vercel.app/0mountains.png"] setEndDate(null) // Reset end date if the new range is invalid
const [selectedImage, setSelectedImages] = useState(0); }
}
const handleEndDateChange = date => {
if (!isSelectingDisabledRange(startDate, date)) {
setEndDate(date)
} // Do nothing if the range is invalid
}
const images = [
'https://cloud-p08od8km8-hack-club-bot.vercel.app/0image.png',
'https://cloud-eqvtnimxq-hack-club-bot.vercel.app/0image.png',
'https://cloud-r8j7lcawc-hack-club-bot.vercel.app/0image.png',
'https://cloud-8f162hv3i-hack-club-bot.vercel.app/0image.png',
'https://cloud-b7gqg2qpq-hack-club-bot.vercel.app/0image.png',
'https://cloud-ik2jpfk0t-hack-club-bot.vercel.app/0mountains.png'
]
const [selectedImage, setSelectedImages] = useState(0)
return ( return (
<> <>
@ -102,7 +117,7 @@ const handleEndDateChange = (date) => {
sx={{ sx={{
background: background:
'linear-gradient(0deg, rgba(15, 33, 79, 0.00) 0%, rgba(15, 33, 79, 0.00) 100%), linear-gradient(180deg, #0F214F 0%, #8B412E 100%)', 'linear-gradient(0deg, rgba(15, 33, 79, 0.00) 0%, rgba(15, 33, 79, 0.00) 100%), linear-gradient(180deg, #0F214F 0%, #8B412E 100%)',
imageRendering: 'pixelated', imageRendering: 'pixelated'
}} }}
> >
<Nav sx={{ backgroundColor: '#0F214F' }} /> <Nav sx={{ backgroundColor: '#0F214F' }} />
@ -117,249 +132,401 @@ const handleEndDateChange = (date) => {
lineHeight: 1 lineHeight: 1
}} }}
> >
Imagine a{' '} Imagine a{' '}
<Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for <Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for
<br /> you to hack with friends <br /> you to hack with friends
</Heading> </Heading>
<Image <Image
alt="Pixel art of Steve" alt="Pixel art of Steve"
sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }} sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }}
src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png" src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png"
/> />
</Box> </Box>
<Box sx={{backgroundColor: "#8B412E"}}> <Box sx={{ backgroundColor: '#8B412E' }}>
<Container sx={{paddingBottom: 32}}> <Container sx={{ paddingBottom: 32 }}>
<Heading <Heading
sx={{ sx={{
color: '#FFF', color: '#FFF',
fontFamily: 'Billy', fontFamily: 'Billy',
fontSize: 72, fontSize: 72,
fontStyle: 'normal', fontStyle: 'normal',
fontWeight: 700, fontWeight: 700,
paddingTop: 32, paddingTop: 32,
paddingBottom: 32, paddingBottom: 32,
lineHeight: '100%', // 76px lineHeight: '100%', // 76px
textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000', textShadow:
}} '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000'
> }}
Welcome To <Text style={{color: "#F8E32E"}}>Steve</Text> >
</Heading> Welcome To <Text style={{ color: '#F8E32E' }}>Steve</Text>
</Heading>
<Grid <Grid
columns={[1, '1fr 1fr 1fr']} // Three columns in a row for smaller screens and larger screens columns={[1, '1fr 1fr 1fr']} // Three columns in a row for smaller screens and larger screens
gap={"32px"} // Adjust the gap between items as needed gap={'32px'} // Adjust the gap between items as needed
> >
<Box <Box
sx={{ sx={{
backgroundColor: 'black', backgroundColor: 'black',
color: 'white', color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
imageRendering: "pixelated", imageRendering: 'pixelated',
gap: "32px", gap: '32px',
justifyContent: 'center', justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)", background:
backgroundSize: "cover", 'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
padding: 3, // Adjust padding as needed backgroundSize: 'cover',
}} padding: 3 // Adjust padding as needed
> }}
<Image alt="Free" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2ccduwqc9-hack-club-bot.vercel.app/0nomoney.png"/> >
<Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Stay At Steve<br/> For Free</Text> <Image
</Box> alt="Free"
<Box style={{
sx={{ width: '104px',
backgroundColor: 'black', height: '104px',
color: 'white', imageRendering: 'pixelated'
aspectRatio: 1, // Ensure a square aspect ratio }}
display: 'flex', src="https://cloud-2ccduwqc9-hack-club-bot.vercel.app/0nomoney.png"
imageRendering: "pixelated", />
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Stay At Steve
<br /> For Free
</Text>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: 'pixelated',
alignItems: 'center', alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
gap: "32px", gap: '32px',
justifyContent: 'center', justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)", background:
backgroundSize: "cover", 'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
padding: 3, // Adjust padding as needed backgroundSize: 'cover',
}} padding: 3 // Adjust padding as needed
> }}
<Image alt="5min walk" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-2c20hobub-hack-club-bot.vercel.app/05min_walk.png"/> >
<Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Walk to HQ<br/> in 5min</Text> <Image
</Box> alt="5min walk"
style={{
width: '104px',
height: '104px',
imageRendering: 'pixelated'
}}
src="https://cloud-2c20hobub-hack-club-bot.vercel.app/05min_walk.png"
/>
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Walk to HQ
<br /> in 5min
</Text>
</Box>
<Box <Box
sx={{ sx={{
backgroundColor: 'black', backgroundColor: 'black',
color: 'white', color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex', display: 'flex',
imageRendering: "pixelated", imageRendering: 'pixelated',
alignItems: 'center', alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
gap: "32px", gap: '32px',
justifyContent: 'center', justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)", background:
backgroundSize: "cover", 'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
padding: 3, // Adjust padding as needed backgroundSize: 'cover',
}} padding: 3 // Adjust padding as needed
> }}
<Image alt="friends building together" style={{width: "104px", height: "104px", imageRendering: "pixelated"}} src="https://cloud-hc1t198xx-hack-club-bot.vercel.app/0wefriends.png"/> >
<Text sx={{color: "#fff", fontFamily: "billy", fontSize: 24, fontWeight: 600, textAlign: "center", lineHeight: 1.25}}>Collaborate on<br/> HQ Projects IRL</Text> <Image
</Box> alt="friends building together"
style={{
width: '104px',
height: '104px',
imageRendering: 'pixelated'
}}
src="https://cloud-hc1t198xx-hack-club-bot.vercel.app/0wefriends.png"
/>
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Collaborate on
<br /> HQ Projects IRL
</Text>
</Box>
</Grid>
<Box
style={{
marginTop: 48,
display: 'flex',
padding: 24,
backgroundColor: '#91979C'
}}
columns={'3fr 1fr'}
>
<Box style={{ padding: '16px', backgroundColor: '#000' }}>
<Image
alt="Image of Steve"
width={'100%'}
style={{
height: '100%',
aspectRatio: '16/9',
objectFit: 'cover'
}}
src={images[selectedImage]}
/>
</Box>
</Grid> <Box
<Box style={{marginTop: 48, display: "flex", padding: 24, backgroundColor: "#91979C"}} columns={'3fr 1fr'}> style={{
<Box style={{padding: "16px", backgroundColor: "#000"}}> flexDirection: 'column',
<Image alt="Image of Steve" width={"100%"} style={{height: "100%", aspectRatio: "16/9", objectFit: "cover"}} src={images[selectedImage]}/> alignItems: 'center',
</Box> width: '142px',
padding: '24px 24px 24px 0px',
<Box style={{flexDirection: "column", alignItems: "center", width: "142px", padding: "24px 24px 24px 0px", backgroundColor: "#000", justifyContent: "space-between", display: "flex"}}> backgroundColor: '#000',
{images.map((image, idx) => justifyContent: 'space-between',
<Image key={idx} alt="" style={{display: idx == selectedImage ? ("flex") : ("flex"), cursor: "pointer", aspectRatio: "1", objectFit: "cover",opacity: idx != selectedImage ? (0.5) : (1)}} onClick={() => setSelectedImages(idx)} width={"96px"} height={"96px"} src={image}/> display: 'flex'
)} }}
</Box> >
</Box> {images.map((image, idx) => (
{/* <Image src="https://cloud-qutaee770-hack-club-bot.vercel.app/0untitled__1_.gif" /> <Image
key={idx}
alt=""
style={{
display: idx == selectedImage ? 'flex' : 'flex',
cursor: 'pointer',
aspectRatio: '1',
objectFit: 'cover',
opacity: idx != selectedImage ? 0.5 : 1
}}
onClick={() => setSelectedImages(idx)}
width={'96px'}
height={'96px'}
src={image}
/>
))}
</Box>
</Box>
{/* <Image src="https://cloud-qutaee770-hack-club-bot.vercel.app/0untitled__1_.gif" />
<Image src="https://cloud-qvzblkbvs-hack-club-bot.vercel.app/0ezgif-4-91825479d0.gif" /> <Image src="https://cloud-qvzblkbvs-hack-club-bot.vercel.app/0ezgif-4-91825479d0.gif" />
<Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/13__1_.gif" /> <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/13__1_.gif" />
<Image src="https://cloud-ecnni31d6-hack-club-bot.vercel.app/0ezgif-4-39f9efb85b.gif" /> <Image src="https://cloud-ecnni31d6-hack-club-bot.vercel.app/0ezgif-4-39f9efb85b.gif" />
<Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/35__1_.gif" /> */} <Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/35__1_.gif" /> */}
</Container> </Container>
<Image alt="" sx={{marginBottom: 0, width: "100vw"}} src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"/> <Image
<Box style={{backgroundColor: "#000", marginTop: -8}}> alt=""
<Container sx={{marginTop: 0}}> sx={{ marginBottom: 0, width: '100vw' }}
<Heading src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"
sx={{ />
color: '#F8E32E', <Box style={{ backgroundColor: '#000', marginTop: -8 }}>
fontFamily: 'Billy', <Container sx={{ marginTop: 0 }}>
fontSize: 72, <Heading
fontStyle: 'normal', sx={{
fontWeight: 700, color: '#F8E32E',
paddingTop: 32, fontFamily: 'Billy',
paddingBottom: 32, fontSize: 72,
lineHeight: '100%', // 76px fontStyle: 'normal',
textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000', fontWeight: 700,
}} paddingTop: 32,
> paddingBottom: 32,
Book Your Stay lineHeight: '100%', // 76px
</Heading> textShadow:
<Box sx={{display: "flex", paddingBottom: 96, gap: "16px", justifyContent: "space-between"}}> '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000'
<Box sx={{width: "100%"}}> }}
<Box> >
<Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>Name</Text> Book Your Stay
<Input placeholder={"Marsha Mellow"} sx={{ </Heading>
backgroundColor: "#fff", <Box
color: "#000", sx={{
fontSize: 28, display: 'flex',
padding: 16, paddingBottom: 96,
lineHeight: 1, gap: '16px',
borderRadius: 0, justifyContent: 'space-between'
marginTop: "4px", }}
border: "4px solid #495057" >
}} /> <Box sx={{ width: '100%' }}>
</Box> <Box>
<Box sx={{marginTop: "16px"}}> <Text
<Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>What Do You Plan To Work On?</Text> sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
<Textarea >
placeholder="I wanna try building a dock for Sprig" Name
sx={{ </Text>
backgroundColor: "#fff", <Input
color: "#000", placeholder={'Marsha Mellow'}
fontSize: 28, sx={{
marginTop: "4px", backgroundColor: '#fff',
padding: 16, color: '#000',
lineHeight: 1, fontSize: 28,
borderRadius: 0, padding: 16,
border: "4px solid #495057", lineHeight: 1,
}} borderRadius: 0,
multiline={true} // Set the multiline property to true marginTop: '4px',
/> border: '4px solid #495057'
</Box> }}
<Box sx={{display: "flex"}}> />
<Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}> </Box>
<Text sx={{ fontFamily: "billy", color: "#fff", fontSize: 18 }}>Start Date</Text> <Box sx={{ marginTop: '16px' }}>
<DatePicker <Text
selected={startDate} sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
style={{ >
width: "100%", // Set the width to 100% What Do You Plan To Work On?
boxSizing: "border-box", // Include padding and border in the total width </Text>
}} <Textarea
onChange={handleStartDateChange} placeholder="I wanna try building a dock for Sprig"
selectsStart sx={{
startDate={startDate} backgroundColor: '#fff',
endDate={endDate} color: '#000',
excludeDates={disabledDates} fontSize: 28,
sx={{ marginTop: '4px',
width: "100%", // Set the width to 100% padding: 16,
boxSizing: "border-box", // Include padding and border in the total width lineHeight: 1,
}} borderRadius: 0,
/> border: '4px solid #495057'
</Box> }}
<Box sx={{display: "flex", flex: 1, flexDirection: "column"}}> multiline={true} // Set the multiline property to true
<Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>End Date</Text> />
<DatePicker </Box>
<Box sx={{ display: 'flex' }}>
selected={endDate} <Box
onChange={handleEndDateChange} sx={{ display: 'flex', flex: 1, flexDirection: 'column' }}
selectsEnd >
startDate={startDate} <Text
endDate={endDate} sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
minDate={startDate} >
excludeDates={disabledDates} Start Date
/> </Text>
</Box> <DatePicker
</Box> selected={startDate}
</Box> style={{
<Box sx={{width: "100%"}}> width: '100%', // Set the width to 100%
<Box> boxSizing: 'border-box' // Include padding and border in the total width
<Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Email</Text> }}
<Input placeholder={"Marsha Mellow"} sx={{ onChange={handleStartDateChange}
backgroundColor: "#fff", selectsStart
color: "#000" startDate={startDate}
}} /> endDate={endDate}
</Box> excludeDates={disabledDates}
<Box> sx={{
width: '100%', // Set the width to 100%
boxSizing: 'border-box' // Include padding and border in the total width
}}
/>
</Box>
<Box
sx={{ display: 'flex', flex: 1, flexDirection: 'column' }}
>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
End Date
</Text>
<DatePicker
selected={endDate}
onChange={handleEndDateChange}
selectsEnd
startDate={startDate}
endDate={endDate}
minDate={startDate}
excludeDates={disabledDates}
/>
</Box>
</Box>
</Box>
<Box sx={{ width: '100%' }}>
<Box>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Email
</Text>
<Input
placeholder={'Marsha Mellow'}
sx={{
backgroundColor: '#fff',
color: '#000'
}}
/>
</Box>
<Box>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Check All That Apply <br />
</Text>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Club Leader
</Text>
</Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Hackathon Organizer
</Text>
</Box>
</Box>
<Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Member Of The Slack
</Text>
</Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Project Contributor
</Text>
</Box>
</Box>
</Box>
</Box>
<Box>
<Button type="submit">Submit</Button>
</Box>
<Box></Box>
</Box>
</Box>
<Text sx={{fontFamily: "billy", color: "#fff", fontSize: 18}}>Check All That Apply <br/></Text> {/*
<Box sx={{display: "flex", gap: "16px"}}>
<Box>
<Box sx={{display: "flex"}}>
<Checkbox/>
<Text sx={{color: "#fff", marginRight: "0px"}}>Club Leader</Text>
</Box>
<Box sx={{display: "flex"}}>
<Checkbox/>
<Text sx={{color: "#fff", marginRight: "0px"}}>Hackathon Organizer</Text>
</Box>
</Box>
<Box>
<Box sx={{display: "flex"}}>
<Checkbox/>
<Text sx={{color: "#fff", marginRight: "0px"}}>Member Of The Slack</Text>
</Box>
<Box sx={{display: "flex"}}>
<Checkbox/>
<Text sx={{color: "#fff", marginRight: "0px"}}>Project Contributor</Text>
</Box>
</Box>
</Box>
</Box>
<Box>
<Button type="submit">Submit</Button>
</Box>
<Box>
</Box>
</Box>
</Box>
{/*
<Box> <Box>
<Text> <Text>
<strong>Frequently Asked Questions</strong> <strong>Frequently Asked Questions</strong>
@ -374,13 +541,13 @@ const handleEndDateChange = (date) => {
<Text>How many people can stay at Steve?</Text> <Text>How many people can stay at Steve?</Text>
<Text>How long can I stay at Steve?</Text> <Text>How long can I stay at Steve?</Text>
</Box> */} </Box> */}
{/* <Box> {/* <Box>
Have additional questions? Send us an email at{' '} Have additional questions? Send us an email at{' '}
<Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link> <Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link>
</Box> */} </Box> */}
</Container> </Container>
</Box>
</Box> </Box>
</Box>
</> </>
) )
} }

8
pages/team.js
View file

@ -25,7 +25,7 @@ export default function Team() {
backgroundImage: backgroundImage:
'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)', 'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: '25% 15%' backgroundPosition: '25% 15%'
}} }}
> >
<Container> <Container>
@ -206,7 +206,7 @@ export default function Team() {
text="Chris started programming games in middle school, a hobby that developed into a deep passion for educational software. In 2013 he accepted a Thiel Fellowship and moved to San Francisco, where he watched Hack Club grow from an early stage. He worked on Hack Club’s learning resources & clubs program for two years." text="Chris started programming games in middle school, a hobby that developed into a deep passion for educational software. In 2013 he accepted a Thiel Fellowship and moved to San Francisco, where he watched Hack Club grow from an early stage. He worked on Hack Club’s learning resources & clubs program for two years."
pronouns="he/him" pronouns="he/him"
/> />
<Bio <Bio
name="Dieter Schoening" name="Dieter Schoening"
teamRole="Media Creation" teamRole="Media Creation"
text="Dieter grew up in South Carolina where he started the adventure of content creation. Now he is helping with our social media and projects to get more teens interested in Hack Club. Fun facts: He likes virtual reality development, boba, hiking, entrepreneurship" text="Dieter grew up in South Carolina where he started the adventure of content creation. Now he is helping with our social media and projects to get more teens interested in Hack Club. Fun facts: He likes virtual reality development, boba, hiking, entrepreneurship"
@ -241,10 +241,10 @@ export default function Team() {
text="Arpan Pandey (@A) is a Hack Clubber from India who joined Hack Club about 1.5 years ago. He is a passionate programmer and loves to build things, especially for clubs. He has created and maintained Jams API, Clubs Directory and many other projects for clubs. He also onboards and supports clubs through their Hack Club Journey. He is also the person to send out mails to Hack Clubbers in India. He loves Harry Potter and is a proud Gryffindor. You'll also find him playing around with electronics and hardware, and he is also a licensed HAM (KC1TPD). He is very much interested in having deep conversations with people and loves to make new friends. Here is his favorite quote: “It does not do to dwell on dreams and forget to live.”" text="Arpan Pandey (@A) is a Hack Clubber from India who joined Hack Club about 1.5 years ago. He is a passionate programmer and loves to build things, especially for clubs. He has created and maintained Jams API, Clubs Directory and many other projects for clubs. He also onboards and supports clubs through their Hack Club Journey. He is also the person to send out mails to Hack Clubbers in India. He loves Harry Potter and is a proud Gryffindor. You'll also find him playing around with electronics and hardware, and he is also a licensed HAM (KC1TPD). He is very much interested in having deep conversations with people and loves to make new friends. Here is his favorite quote: “It does not do to dwell on dreams and forget to live.”"
pronouns="he/him" pronouns="he/him"
/> />
<Bio <Bio
img="https://cloud-cwim853sk-hack-club-bot.vercel.app/0screenshot_2023-12-12_at_4.15.57_pm.png" img="https://cloud-cwim853sk-hack-club-bot.vercel.app/0screenshot_2023-12-12_at_4.15.57_pm.png"
name="Thomas Stubblefield" name="Thomas Stubblefield"
teamsRole="Software Engineer & Clubs Lead" teamsRole="Software Engineer & Clubs Lead"
text="Thomas is a Hack Clubber from South Carolina who led a Hack Club at his high school and is now building software to make the experience of being a part of and leading a club better. He currently leads the clubs program. He loves to build side projects, make tea, and hike. Thomas lives his life by three sayings: time will tell, in life we are always learning, and bum bum bummm (a friendly melody he hums daily)." text="Thomas is a Hack Clubber from South Carolina who led a Hack Club at his high school and is now building software to make the experience of being a part of and leading a club better. He currently leads the clubs program. He loves to build side projects, make tea, and hike. Thomas lives his life by three sayings: time will tell, in life we are always learning, and bum bum bummm (a friendly melody he hums daily)."
pronouns="he/him" pronouns="he/him"
/> />