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

Merge branch 'main' into slack

Browse source
This commit is contained in:
Toby Brown 2024-02-12 15:23:45 +00:00 • committed by GitHub
commit 874adbdf64
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
47 changed files with 1933 additions and 1173 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',
overscrollBehavior: 'contain',
gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
position: 'relative',
position: 'relative'
}}
as={href && !text ? 'a' : 'div'}
href={href}

11
components/footer.js
View file

@ -19,8 +19,6 @@ const Base = styled(Box)`
}
`
const Logo = props => (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -51,7 +49,12 @@ const Service = ({ href, icon, name = '', ...props }) => (
</Link>
)
const Footer = ({ dark = false, children, ...props }) => (
const Footer = ({
dark = false,
email = 'team@hackclub.com',
children,
...props
}) => (
<Base
color={dark ? 'muted' : 'slate'}
py={[4, 5]}
@ -173,7 +176,7 @@ const Footer = ({ dark = false, children, ...props }) => (
icon="instagram"
name="Instagram"
/>
<Service href="mailto:team@hackclub.com" icon="email-fill" />
<Service href={`mailto:${email}`} icon="email-fill" />
</Grid>
<Text my={2}>
<Link href="tel:1-855-625-HACK">1-855-625-HACK</Link>

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

@ -29,11 +29,7 @@ const Content = () => (
<ListItem
knew
icon="payment"
leadText={
<>
$500 grants.
</>
}
leadText={<>$500 grants.</>}
body={
<>
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"
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.
</>
}
/>

42
components/hcb/apply-button.js
View file

@ -1,30 +1,32 @@
import { Button, Text, Image, Flex } from 'theme-ui'
import Icon from '../icon'
import Link from 'next/link'
export default function ApplyButton() {
return (
<Button
variant="ctaLg"
as="a"
href="/hcb/apply"
sx={{
width: '100%',
height: '4.2rem'
// borderRadius: '1.5rem',
}}
>
<Flex
<Link href="/hcb/apply" passHref legacyBehavior>
<Button
variant="ctaLg"
as="a"
sx={{
alignItems: 'center',
gap: 3,
mr: '-32px' // Man...
width: '100%',
height: '4.2rem'
// borderRadius: '1.5rem',
}}
>
<Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
Apply now
</Text>
<Icon glyph="view-forward" size={46} color="white" />
</Flex>
</Button>
<Flex
sx={{
alignItems: 'center',
gap: 3,
mr: '-32px' // Man...
}}
>
<Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
Apply now
</Text>
<Icon glyph="view-forward" size={46} color="white" />
</Flex>
</Button>
</Link>
)
}

52
components/hcb/apply/address-input.js
View file

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState, useCallback } from 'react'
import { Box, Flex, Input, Text } from 'theme-ui'
import FlexCol from '../../flex-col'
import AutofillColourFix from './autofill-colour-fix'
@ -31,13 +31,13 @@ const approvedCountries = [
export default function AutoComplete({ name, isPersonalAddressInput }) {
const input = useRef()
const base = useRef()
const [predictions, setPredictions] = useState(null)
const [countryCode, setCountryCode] = useState(null)
const optionClicked = async prediction => {
input.current.value = prediction.name
await onInput(prediction.name)
// Needs to match the shape of the event object because onInput takes an event object.
await onInput({ target: { value: prediction.name } })
setPredictions(null)
}
const clickOutside = e => {
@ -46,26 +46,28 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
}
}
const onInput = async value => {
setPredictions(value ? (await search(value)).results : null)
const onInput = useCallback(
async e => {
if (!e.target.value) return
const value = e.target.value
if (isPersonalAddressInput) return
geocode(value)
.then(res => {
const country = res?.results[0]?.country
const countryCode = res?.results[0]?.countryCode
setPredictions(value ? (await search(value)).results : null)
setCountryCode(countryCode)
if (isPersonalAddressInput) return
geocode(value)
.then(res => {
const country = res?.results[0]?.country
const countryCode = res?.results[0]?.countryCode
sessionStorage.setItem('bank-signup-eventCountry', country)
sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
})
.catch(err => console.error(err))
}
setCountryCode(countryCode)
const onInputWrapper = async e => {
if (e.target.value) await onInput(e.target.value)
}
sessionStorage.setItem('bank-signup-eventCountry', country)
sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
})
.catch(err => console.error(err))
},
[isPersonalAddressInput]
)
//TODO: Close suggestions view when focus is lost via tabbing.
//TODO: Navigate suggestions with arrow keys.
@ -75,15 +77,15 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
if (!inputEl) return
document.addEventListener('click', clickOutside)
inputEl.addEventListener('input', onInputWrapper)
inputEl.addEventListener('focus', onInputWrapper)
inputEl.addEventListener('input', onInput)
inputEl.addEventListener('focus', onInput)
return () => {
document.removeEventListener('click', clickOutside)
inputEl.removeEventListener('input', onInputWrapper)
inputEl.removeEventListener('focus', onInputWrapper)
inputEl.removeEventListener('input', onInput)
inputEl.removeEventListener('focus', onInput)
}
}, [])
}, [onInput])
return (
<Box sx={{ position: 'relative', width: '100%' }}>
@ -116,7 +118,7 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
Currently, we only have first-class support for organizations in
select countries.
<br />
If you're somewhere else, you can still use bank!
If you're somewhere else, you can still use HCB!
<br />
Please contact us at hcb@hackclub.com
</Text>

8
components/hcb/apply/checkbox.js
View file

@ -1,20 +1,22 @@
import { useEffect, useState } from 'react'
import Icon from '../../icon'
import { useRouter } from 'next/router'
export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
const [checked, setChecked] = useState(defaultChecked)
const toggle = () => setChecked(!checked)
const router = useRouter()
/* Fill in the field with the value from sessionStorage.
For other input elements, the value is set in the Field component,
but these checkboxes hold their state in useState rather than in the DOM. */
useEffect(() => {
const value = sessionStorage.getItem('bank-signup-' + name)
const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
if (value) {
const input = document.getElementById(name)
input && setChecked(value === 'true')
input && setChecked(!!value)
}
}, [name])
}, [router.query, name])
return (
<>

4
components/hcb/apply/field.js
View file

@ -18,12 +18,12 @@ export default function Field({
/* Fill in the field input element with the value from sessionStorage.
Note: the custom checkbox component does this in its own useEffect hook. */
useEffect(() => {
const value = sessionStorage.getItem('bank-signup-' + name)
const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
if (value) {
const input = document.getElementById(name)
if (input) input.value = value
}
}, [name])
}, [router.query, name])
return (
<FlexCol gap={2} width={'100%'}>

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
restricted fund within Hack Club accounts.
</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>
</Text>
</FlexCol>

4
components/hcb/apply/personal-form.js
View file

@ -164,13 +164,13 @@ export default function PersonalInfoForm({
<Field
name="accommodations"
label="Accessibility needs"
description="Please specify any accommodations or accessibility needs you have so we can support you during onboarding and while using HCB"
description="Please specify any accommodations, accessibility needs, or other important information so we can support you during onboarding and while using HCB"
requiredFields={requiredFields}
>
<Input
name="accommodations"
id="accommodations"
placeholder="I need a screen reader"
placeholder="I use a screen reader/I need increased text size during onboarding"
sx={{ ...AutofillColourFix }}
/>
</Field>

16
components/hcb/everything.js
View file

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

8
components/hcb/stats.js
View file

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

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

@ -1,8 +1,8 @@
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 Dot from '../../dot'
import {formatDate} from '../../../lib/dates'
import { formatDate } from '../../../lib/dates'
/** @jsxImportSource theme-ui */
const Cover = () => (

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
import {useEffect, useState} from 'react'
import {Box, Flex, Grid, Text} from 'theme-ui'
import { useEffect, useState } from 'react'
import { Box, Flex, Grid, Text } from 'theme-ui'
import CardModel from './card-model'
import Buttons from './button'
@ -10,10 +10,10 @@ export default function Onboard({ stars }) {
useEffect(() => {
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((data) => setProjects(data.total_count))
.then(response => response.json())
.then(data => setProjects(data.total_count))
}, [])
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')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundRepeat: 'no-repeat'
}}
github_link='https://github.com/hackclub/onboard/'
color='white'
highlight='#87ffa1'
github_link="https://github.com/hackclub/onboard/"
color="white"
highlight="#87ffa1"
stars={stars}
>
<Text
variant='title'
as='h3'
variant="title"
as="h3"
sx={{
fontSize: ['36px', 4, 5],
maxWidth: 'copyPlus',
textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
color: '#87ffa1',
mt: ['38px', 0, 0],
position: 'relative',
position: 'relative'
}}
>
OnBoard
@ -47,8 +47,8 @@ export default function Onboard({ stars }) {
<Grid columns={[1, 2]}>
<Box>
<Text
as='p'
variant='subheadline'
as="p"
variant="subheadline"
sx={{
px: 2,
py: 1,
@ -63,32 +63,32 @@ export default function Onboard({ stars }) {
>
{projects} projects built
</Text>
<Text as='p' variant='subtitle'>
<Text as="p" variant="subtitle">
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
project with OnBoard.
Completely for free! Get a $100 grant to fuel the creation of your
dream project with OnBoard.
</Text>
</Box>
<Flex
sx={{ flexDirection: 'column', mt: [3, 3, 4], placeSelf: 'start' }}
>
<Buttons
id='59'
icon='emoji'
link='https://github.com/hackclub/OnBoard/blob/main/README.md'
primary='#87ffa1'
color='black'
id="59"
icon="emoji"
link="https://github.com/hackclub/OnBoard/blob/main/README.md"
primary="#87ffa1"
color="black"
>
Get a grant
</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
</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
</Buttons>
</Flex>
</Grid>
</CardModel>
)
}
}

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

@ -11,60 +11,85 @@ export default function Pizza() {
sx={{
backgroundSize: 'cover',
backgroundColor: '#95C9E5',
border: "1px solid #EC3750" // Corrected the color value here
border: '1px solid #EC3750' // Corrected the color value here
}}
position={[null, 'bottom', 'bottom']}
highlight="#271932"
image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png"
>
<Grid columns={[1, 2]} sx={{ position: 'relative', alignItems: "center", zIndex: 2 }}>
<Box>
<Text
as="h3"
variant="title"
sx={{
fontSize: ['36px', 4, 5],
zIndex: 2,
color: "#000",
mb: "8px"
}}
>
Start A Hack Club <br/> Get <Text
sx={{
background: ["linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)"],
WebkitBackgroundClip: "text",
WebkitTextStroke: 'currentColor',
WebkitTextFillColor: 'transparent',
}}
> $100 In Pizza</Text>
</Text>
<Grid
columns={[1, 2]}
sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
>
<Box>
<Text
as="h3"
variant="title"
sx={{
fontSize: ['36px', 4, 5],
zIndex: 2,
color: '#000',
mb: '8px'
}}
>
Start A Hack Club <br /> Get{' '}
<Text
sx={{
background: [
'linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)'
],
WebkitBackgroundClip: 'text',
WebkitTextStroke: 'currentColor',
WebkitTextFillColor: 'transparent'
}}
>
{' '}
$100 In Pizza
</Text>
</Text>
<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.
</Text>
<Buttons id="14" link="/pizza" icon="welcome" primary="primary">
<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.
</Text>
<Buttons id="14" link="/pizza" icon="welcome" primary="primary">
Get Your Pizza Grant
</Buttons>
</Box>
<Box>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'end',
justifyContent: 'flex-end',
position: "relative"
}}
>
<Image alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant" sx={{borderRadius: "16px",
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>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'end',
justifyContent: 'flex-end',
position: 'relative'
}}
>
<Image
alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant"
sx={{
borderRadius: '16px',
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>
</Grid>
</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 CardModel from './card-model'
import Tilt from '../../tilt'

109
components/index/cards/wonderland.js Normal file
View file

@ -0,0 +1,109 @@
import CardModel from './card-model'
import { Box, Flex, Grid, Image, Text } from 'theme-ui'
import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Wonderland() {
return (
<CardModel
color="white"
sx={{
backgroundSize: 'cover',
backgroundColor: '#95C9E5',
border: '2px solid #fbbae4'
}}
position={[null, 'bottom', 'bottom']}
image="/wonderland/banner.webp"
highlight={'#fbbae4'}
filter="brightness(0.6)"
>
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Flex
sx={{
flexDirection: 'column',
justifyContent: 'space-between'
}}
>
<Box>
<Image
src="/wonderland/wonderland.svg"
sx={{
width: ['300px', '350px', '400px'],
mt: ['-10px', '-10px', '-10px'],
position: 'relative',
zIndex: 2,
fontSize: ['36px', 4, 5],
color: 'white',
filter: 'drop-shadow(0 0 10px #fbbae4 )'
}}
alt="Wonderland"
/>
<Text
as="p"
variant="subheadline"
sx={{
ml: '10px',
mt: '-10px',
mb: '10px',
zIndex: 2,
color: 'white',
fontSize: ['24px !important'],
textShadow: '0 0 20px #fbbae4'
}}
// sx={{
// fontSize: ['30px', '30px', '30px'],
// fontWeight: 'bold'
// }}
>
Boston, MA
<br />
February 23-25th
</Text>
</Box>
<Buttons
icon="flag-fill"
href="https://wonderland.hackclub.com/"
target="_blank"
rel="noopener"
primary="#fbbae4"
id="43"
sx={{ color: '#000' }}
>
Join Us
</Buttons>
</Flex>
<Box
sx={{
textShadow: '0 0 20px #fbbae4'
}}
>
<Text
as="p"
variant="subtitle"
sx={{
fontSize: ['22px', '20px', '18px']
}}
>
Only when we limit ourselves... do we become truly free.
</Text>
<Text
as="p"
variant="subtitle"
sx={{
fontSize: ['22px', '20px', '18px']
}}
>
How would you and your friends use a 🥕 carrot or a 🧸 stuffed
animal in a hackathon project? In Wonderland, you'll explore 🧰
chests of random objects and software that you'll incorporate into
hackathon projects.
</Text>
</Box>
</Grid>
</CardModel>
)
}

4
components/index/github.js
View file

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

8
components/nav.js
View file

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

9
lib/carousel.json
View file

@ -17,6 +17,15 @@
"img": "https://cloud-eg2ex8nol-hack-club-bot.vercel.app/0favicon-on-light-removebg-preview.png",
"link": "https://cpu.land"
},
{
"background": "linear-gradient(to bottom right, #91C2F4, #FFB6E6, #F3E4C6)",
"titleColor": "#000",
"descriptionColor": "#000",
"title": "Wonderland",
"description": "How would you and your friends use a 🥕 carrot or a 🧸 stuffed animal in a hackathon project?",
"img": "/wonderland/logo.svg",
"link": "https://wonderland.hackclub.com"
},
{
"background": "#000",
"titleColor": "green",

8
lib/use-form.js
View file

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

5
middleware.js
View file

@ -14,9 +14,8 @@ export function middleware(request) {
}
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({
email: data.userEmail,
name: data.eventName,
transparent: data.transparent,
transparent: data.transparent
// country: data.eventCountryCode,
}),
method: 'POST',

110
pages/api/steve.js
View file

@ -1,54 +1,70 @@
export default async (req, res) => {
const calendarId = "c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com";
const apiKey = "AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg"; // Replace with your API Key
const steveApiHandler = async (req, res) => {
const calendarId =
'c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com'
let allBusyDays = new Set();
//This API key is for google calendar and has only read access to Steve
const apiKey = 'AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg'
try {
const currentDateTime = new Date();
const adjustedDateTime = new Date(currentDateTime.getTime() + (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();
let allBusyDays = new Set()
const response = await fetch(`https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
timeMin: startTime,
timeMax: endTime,
items: [{ id: calendarId }]
})
});
try {
const currentDateTime = new Date()
const adjustedDateTime = new Date(
currentDateTime.getTime() +
(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 data = await response.json();
const response = await fetch(
`https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
timeMin: startTime,
timeMax: endTime,
items: [{ id: calendarId }]
})
}
)
if (data.error) {
return res.status(400).json({ error: data.error.message });
}
const data = await response.json()
// 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." });
if (data.error) {
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.' })
}
}
export default steveApiHandler

11
pages/clubs.js
View file

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

5
pages/events.js
View file

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

4
pages/hackathons/grant.js
View file

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

20
pages/hackathons/index.js
View file

@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
/>
<Box as="main">
<Landing />
<Overview />
<ScrollingHackathons eventData={data} title={true} />
<KeepExploring />
<Money />
<Slack />
@ -46,22 +46,24 @@ export default function Hackathons({ data }) {
)
}
export async function getStaticProps() {
let data;
let data
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) {
data = await res.json();
data = await res.json()
} else {
data = [];
data = []
}
} catch (error) {
data = [];
data = []
}
return {
props: {
data,
data
},
revalidate: 10
};
}
}

6
pages/hcb/apply/index.js
View file

@ -67,7 +67,7 @@ export default function Apply() {
// Set the query url parameter to 1 if it's not present
if (!step || step < 1) {
router.push(
router.replace(
{
pathname: router.pathname,
query: { ...router.query, step: 1 }
@ -110,9 +110,7 @@ export default function Apply() {
<Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
<FormContainer ref={formContainer}>
{step === 1 && <HCBInfo />}
{step === 2 && (
<OrganizationInfoForm requiredFields={requiredFields} />
)}
{step === 2 && <OrganizationInfoForm requiredFields={requiredFields} />}
{step === 3 && <PersonalInfoForm requiredFields={requiredFields} />}
</FormContainer>
</Box>

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

@ -613,7 +613,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
justifyContent: 'start'
}}
>
{modalOrganization.branding.logo &&
{modalOrganization.branding.logo && (
<img
alt={`${modalOrganization.name}'s 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)'
}}
/>
}
)}
<Text
variant="title"
sx={{
@ -1032,7 +1032,6 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
>
EXPLORE IMPACT
</Button>
</Box>
</Box>

2
pages/hcb/index.js
View file

@ -53,7 +53,7 @@ export default function Bank({ stats }) {
<Start stats={stats} />
</Box>
</Box>
<Footer dark key="footer" />
<Footer dark key="footer" email="hcb@hackclub.com" />
</>
)
}

12
pages/index.js
View file

@ -40,6 +40,7 @@ import Photo from '../components/photo'
import Comma from '../components/comma'
import Haxidraw from '../components/index/cards/haxidraw'
import Onboard from '../components/index/cards/onboard'
import Wonderland from '../components/index/cards/wonderland'
/** @jsxImportSource theme-ui */
@ -410,15 +411,15 @@ function Page({
count === images.length - 2
? images[0].src
: images.length - 1
? images[1].src
: images[count + 2].src
? images[1].src
: images[count + 2].src
}
alt={
count === images.length - 2
? images[0].alt
: images.length - 1
? images[1].alt
: images[count + 2].alt
? images[1].alt
: images[count + 2].alt
}
width={3000}
height={2550}
@ -675,6 +676,7 @@ function Page({
and make things together!
</Text>
</Box>
<Wonderland />
<Pizza />
<Slack slackKey={slackKey} data={slackData} events={events} />
</Box>
@ -778,7 +780,7 @@ function Page({
url={data.url}
message={data.message}
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.
</Text>
<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>
<Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
</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 Balancer from "react-wrap-balancer";
import Head from "next/head";
import Meta from "@hackclub/meta";
import Nav from "../../components/nav";
import Footer from "../../components/footer";
import FadeIn from "../../components/fade-in";
import Sparkles from "../../components/sparkles";
import Tilt from "../../components/tilt";
import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
import { useEffect, useRef, useState } from "react";
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
import Balancer from 'react-wrap-balancer'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import Nav from '../../components/nav'
import Footer from '../../components/footer'
import FadeIn from '../../components/fade-in'
import Sparkles from '../../components/sparkles'
import Tilt from '../../components/tilt'
import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
import { useEffect, useRef, useState } from 'react'
/**
* @type {import('theme-ui').ThemeUIStyleObject}
@ -443,7 +443,9 @@ const ShipPage = () => {
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
@ -456,12 +458,14 @@ const ShipPage = () => {
<Text sx={{ fontWeight: 400 }}>magical</Text>
</Sparkles>
. You design one, we'll print it!
<br /><br />
Plus! FIRST team members get a limited edition PCB badge designed with Dean Kamen.
<br />
<br />
Plus! FIRST team members get a limited edition PCB badge
designed with Dean Kamen.
</Balancer>
</Heading>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ["column", "row"] }}>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ['column', 'row'] }}>
<Button
variant="ctaLg"
as="a"
@ -624,8 +628,13 @@ const ShipPage = () => {
maxWidth: 'copyPlus'
}}
>
<Text 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
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>
<Image
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="p">
Read our tutorials to learn how to make a simple
circuit boards from start to end.
Read our tutorials to learn how to make a simple circuit boards
from start to end.
</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
</Button>
</Flex>

88
pages/onboard/index.js
View file

@ -1,14 +1,14 @@
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
import Balancer from "react-wrap-balancer";
import Head from "next/head";
import Meta from "@hackclub/meta";
import Nav from "../../components/nav";
import Footer from "../../components/footer";
import FadeIn from "../../components/fade-in";
import Sparkles from "../../components/sparkles";
import Tilt from "../../components/tilt";
import usePrefersReducedMotion from "../../lib/use-prefers-reduced-motion";
import { useEffect, useRef, useState } from "react";
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
import Balancer from 'react-wrap-balancer'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import Nav from '../../components/nav'
import Footer from '../../components/footer'
import FadeIn from '../../components/fade-in'
import Sparkles from '../../components/sparkles'
import Tilt from '../../components/tilt'
import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
import { useEffect, useRef, useState } from 'react'
/**
* @type {import('theme-ui').ThemeUIStyleObject}
@ -459,7 +459,7 @@ const ShipPage = () => {
</Balancer>
</Heading>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ["column", "row"] }}>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ['column', 'row'] }}>
<Button
variant="ctaLg"
as="a"
@ -540,6 +540,49 @@ const ShipPage = () => {
</Text>
</Flex>
</Grid>
<Flex
as="div"
sx={{
flexDirection: 'row',
gap: 3,
alignItems: 'end',
justifyContent: 'center',
margin: '0 auto',
padding: '0.8rem 1rem',
borderRadius: 'default',
border: '1px dashed white',
background: '#000000',
}}
>
<Image
src="https://cloud-iddh16j0r-hack-club-bot.vercel.app/0stevew.png"
alt="A picture of Steve Wozniak who is a co-founder of Apple."
sx={{
width: 50,
height: 50
}}
/>
<Flex
as="div"
sx={{ flexDirection: 'column', gap: 1, width: '90%' }}
>
<Text as="p" sx={{ fontSize: 20 }}>
<Balancer>
"I’m so glad young people can create PCBs online. May your
creativity change the world! Mine did.”
</Balancer>
</Text>
<Text
as="p"
sx={{ fontSize: 20, fontStyle: 'italic' }}
>
<Balancer>
-<span style={{ textDecoration: 'underline' }}>Steve Wozniak "Woz"</span>, Apple co-founder, on Hack Club OnBoard
</Balancer>
</Text>
</Flex>
</Flex>
</Flex>
</Box>
@ -707,10 +750,7 @@ const ShipPage = () => {
</Flex>
</a> */}
<a
href="https://jams.hackclub.com/batch/usb-hub"
target="_blank"
>
<a href="https://jams.hackclub.com/batch/usb-hub" target="_blank">
<Flex as="article">
<Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
Hugo's <strong>USB-C hub</strong> for the best{' '}
@ -744,7 +784,8 @@ const ShipPage = () => {
Karmanyaah's <strong>digital level</strong>, SparkleTilt.
</Text>
<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>
<Image
src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
@ -769,7 +810,8 @@ const ShipPage = () => {
Build your own <strong>hardware key</strong>.
</Text>
<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>
<Image
src="https://cloud-6a1wip38p-hack-club-bot.vercel.app/1totk_key.png"
@ -1079,10 +1121,14 @@ const ShipPage = () => {
>
<Text as="h3">Learn to PCB</Text>
<Text as="p">
Read our tutorials to learn how to make a simple
circuit boards from start to end.
Read our tutorials to learn how to make a simple circuit boards
from start to end.
</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
</Button>
</Flex>

42
pages/philanthropy/index.js
View file

@ -631,7 +631,7 @@ const Philanthropy = ({ posts = [] }) => {
<Text as="p">2023 Form will be shared when ready.</Text>
</Box>
<Box>
<Button
<Button
as="a"
variant="outline"
href="https://cloud-q56a8ttty-hack-club-bot.vercel.app/0hack_foundation_2022_form_990.pdf"
@ -860,7 +860,9 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
<Line />
<Fade>
<Text as="h1" sx={{marginBottom: '20px'}}>Board of Directors</Text>
<Text as="h1" sx={{ marginBottom: '20px' }}>
Board of Directors
</Text>
</Fade>
<Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
<Box>
@ -1019,12 +1021,16 @@ const Philanthropy = ({ posts = [] }) => {
<Line />
<Box>
<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>
<Grid gap={2} columns={[2, 4, 4]} mt={2}>
<Box>
<Fade delay={50}>
<Text as="h3" sx={{marginBottom: '8px'}}>Above $5M </Text>
<Text as="h3" sx={{ marginBottom: '8px' }}>
Above $5M{' '}
</Text>
</Fade>
<Fade delay={70}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1033,7 +1039,10 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
<br></br>
<Fade delay={90}>
<Text as="h3" sx={{marginBottom: '8px'}}> $1M - $5M </Text>
<Text as="h3" sx={{ marginBottom: '8px' }}>
{' '}
$1M - $5M{' '}
</Text>
</Fade>
<Fade delay={110}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1045,17 +1054,24 @@ const Philanthropy = ({ posts = [] }) => {
Tobi Lutke
</Text>
</Fade>
<Fade delay={130}>
<Fade delay={145}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Michael Dell
</Text>
</Fade>
<Fade delay={150}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
The Libermans
</Text>
</Fade>
</Box>
<Box>
<Fade delay={140}>
<Text as="h3" sx={{marginBottom: '8px'}}>$500k - $1M</Text>
<Fade delay={170}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$500k - $1M
</Text>
</Fade>
<Fade delay={180}>
<Fade delay={190}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Lizzy Danhakl/Andrew Reed (3x)
</Text>
@ -1078,7 +1094,9 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
<Box>
<Fade delay={260}>
<Text as="h3" sx={{marginBottom: '8px'}}>$200k - $500k</Text>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$200k - $500k
</Text>
</Fade>
<Fade delay={290}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
@ -1113,7 +1131,9 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
<Box>
<Fade delay={470}>
<Text as="h3" sx={{marginBottom: '8px'}}>$100k- $200k</Text>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$100k- $200k
</Text>
</Fade>
<Fade delay={500}>
<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 { useState } from 'react'
const year = 2023;
const announcementMessage = "https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169";
const signupsOpen = true;
const year = 2023
const announcementMessage =
'https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169'
const signupsOpen = true
const Hero = styled(Box)`
background-image: linear-gradient(
@ -193,16 +194,16 @@ function Field({ placeholder, label, name, type, value, onChange }) {
function Signup() {
const [values, setValues] = useState({})
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 }}>
Register!
</Heading>
<Text sx={{ textAlign: 'left', color: 'muted' }}>
Be sure to check out the{' '}
<Link
href={announcementMessage}
sx={{ color: 'blue' }}
>
<Link href={announcementMessage} sx={{ color: 'blue' }}>
rules
</Link>{' '}
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 Meta from '@hackclub/meta'
import ForceTheme from '../components/force-theme'
@ -7,87 +19,90 @@ import Nav from '../components/nav'
import Tilt from '../components/tilt'
import Ticker from 'react-ticker'
import { useState, useEffect } from 'react'
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
const StevePage = () => {
const [startDate, setStartDate] = useState(null)
const [endDate, setEndDate] = useState(null)
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [disabledDates, setDisabledDates] = useState([]);
const [disabledDates, setDisabledDates] = useState([])
useEffect(() => {
// Fetch the disabled dates from the API endpoint when the component mounts
const fetchDisabledDates = async () => {
try {
const response = await fetch('/api/steve');
const response = await fetch('/api/steve')
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 date = new Date(Date.UTC(dateStr.substring(0, 4), dateStr.substring(5, 7) - 1, dateStr.substring(8, 10)));
date.setDate(date.getDate() + 1); // Add one day to the date
return date;
});
setDisabledDates(dateObjects);
const date = new Date(
Date.UTC(
dateStr.substring(0, 4),
dateStr.substring(5, 7) - 1,
dateStr.substring(8, 10)
)
)
date.setDate(date.getDate() + 1) // Add one day to the date
return date
})
setDisabledDates(dateObjects)
} 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
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);
let normalizedEnd = new Date(end)
normalizedEnd.setHours(0, 0, 0, 0)
while (currDate <= normalizedEnd) {
if (isDateDisabled(currDate)) {
return true;
}
currDate.setDate(currDate.getDate() + 1);
if (isDateDisabled(currDate)) {
return true
}
currDate.setDate(currDate.getDate() + 1)
}
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
return false
}
};
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);
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 => {
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 (
<>
@ -102,7 +117,7 @@ const handleEndDateChange = (date) => {
sx={{
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%)',
imageRendering: 'pixelated',
imageRendering: 'pixelated'
}}
>
<Nav sx={{ backgroundColor: '#0F214F' }} />
@ -117,249 +132,401 @@ const handleEndDateChange = (date) => {
lineHeight: 1
}}
>
Imagine a{' '}
<Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for
<br /> you to hack with friends
</Heading>
<Image
alt="Pixel art of Steve"
alt="Pixel art of Steve"
sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }}
src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png"
/>
</Box>
<Box sx={{backgroundColor: "#8B412E"}}>
<Container sx={{paddingBottom: 32}}>
<Heading
sx={{
color: '#FFF',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
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>
<Box sx={{ backgroundColor: '#8B412E' }}>
<Container sx={{ paddingBottom: 32 }}>
<Heading
sx={{
color: '#FFF',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
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>
<Grid
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
>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
alignItems: 'center',
flexDirection: "column",
imageRendering: "pixelated",
gap: "32px",
justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
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>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: "pixelated",
<Grid
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
>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
imageRendering: 'pixelated',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
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>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: 'pixelated',
alignItems: 'center',
flexDirection: "column",
gap: "32px",
justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
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>
</Box>
alignItems: 'center',
flexDirection: 'column',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
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>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: "pixelated",
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: 'pixelated',
alignItems: 'center',
flexDirection: "column",
gap: "32px",
justifyContent: 'center',
background: "url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)",
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>
</Box>
alignItems: 'center',
flexDirection: 'column',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
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>
</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 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>
<Box style={{flexDirection: "column", alignItems: "center", width: "142px", padding: "24px 24px 24px 0px", backgroundColor: "#000", justifyContent: "space-between", display: "flex"}}>
{images.map((image, idx) =>
<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" />
<Box
style={{
flexDirection: 'column',
alignItems: 'center',
width: '142px',
padding: '24px 24px 24px 0px',
backgroundColor: '#000',
justifyContent: 'space-between',
display: 'flex'
}}
>
{images.map((image, idx) => (
<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-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-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"/>
<Box style={{backgroundColor: "#000", marginTop: -8}}>
<Container sx={{marginTop: 0}}>
<Heading
sx={{
color: '#F8E32E',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
textShadow: '6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000',
}}
>
Book Your Stay
</Heading>
<Box sx={{display: "flex", paddingBottom: 96, gap: "16px", justifyContent: "space-between"}}>
<Box sx={{width: "100%"}}>
<Box>
<Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>Name</Text>
<Input placeholder={"Marsha Mellow"} sx={{
backgroundColor: "#fff",
color: "#000",
fontSize: 28,
padding: 16,
lineHeight: 1,
borderRadius: 0,
marginTop: "4px",
border: "4px solid #495057"
}} />
</Box>
<Box sx={{marginTop: "16px"}}>
<Text sx={{fontFamily: "billy", fontSize: 24, color: "#fff"}}>What Do You Plan To Work On?</Text>
<Textarea
placeholder="I wanna try building a dock for Sprig"
sx={{
backgroundColor: "#fff",
color: "#000",
fontSize: 28,
marginTop: "4px",
padding: 16,
lineHeight: 1,
borderRadius: 0,
border: "4px solid #495057",
}}
multiline={true} // Set the multiline property to true
/>
</Box>
<Box sx={{display: "flex"}}>
<Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}>
<Text sx={{ fontFamily: "billy", color: "#fff", fontSize: 18 }}>Start Date</Text>
<DatePicker
selected={startDate}
style={{
width: "100%", // Set the width to 100%
boxSizing: "border-box", // Include padding and border in the total width
}}
onChange={handleStartDateChange}
selectsStart
startDate={startDate}
endDate={endDate}
excludeDates={disabledDates}
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>
<Image
alt=""
sx={{ marginBottom: 0, width: '100vw' }}
src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"
/>
<Box style={{ backgroundColor: '#000', marginTop: -8 }}>
<Container sx={{ marginTop: 0 }}>
<Heading
sx={{
color: '#F8E32E',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
textShadow:
'6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000'
}}
>
Book Your Stay
</Heading>
<Box
sx={{
display: 'flex',
paddingBottom: 96,
gap: '16px',
justifyContent: 'space-between'
}}
>
<Box sx={{ width: '100%' }}>
<Box>
<Text
sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
>
Name
</Text>
<Input
placeholder={'Marsha Mellow'}
sx={{
backgroundColor: '#fff',
color: '#000',
fontSize: 28,
padding: 16,
lineHeight: 1,
borderRadius: 0,
marginTop: '4px',
border: '4px solid #495057'
}}
/>
</Box>
<Box sx={{ marginTop: '16px' }}>
<Text
sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
>
What Do You Plan To Work On?
</Text>
<Textarea
placeholder="I wanna try building a dock for Sprig"
sx={{
backgroundColor: '#fff',
color: '#000',
fontSize: 28,
marginTop: '4px',
padding: 16,
lineHeight: 1,
borderRadius: 0,
border: '4px solid #495057'
}}
multiline={true} // Set the multiline property to true
/>
</Box>
<Box sx={{ display: 'flex' }}>
<Box
sx={{ display: 'flex', flex: 1, flexDirection: 'column' }}
>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Start Date
</Text>
<DatePicker
selected={startDate}
style={{
width: '100%', // Set the width to 100%
boxSizing: 'border-box' // Include padding and border in the total width
}}
onChange={handleStartDateChange}
selectsStart
startDate={startDate}
endDate={endDate}
excludeDates={disabledDates}
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>
<Text>
<strong>Frequently Asked Questions</strong>
@ -374,13 +541,13 @@ const handleEndDateChange = (date) => {
<Text>How many people can stay at Steve?</Text>
<Text>How long can I stay at Steve?</Text>
</Box> */}
{/* <Box>
{/* <Box>
Have additional questions? Send us an email at{' '}
<Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link>
</Box> */}
</Container>
</Container>
</Box>
</Box>
</Box>
</>
)
}

8
pages/team.js
View file

@ -25,7 +25,7 @@ export default function Team() {
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)',
backgroundSize: 'cover',
backgroundPosition: '25% 15%'
backgroundPosition: '25% 15%'
}}
>
<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."
pronouns="he/him"
/>
<Bio
<Bio
name="Dieter Schoening"
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"
@ -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.”"
pronouns="he/him"
/>
<Bio
<Bio
img="https://cloud-cwim853sk-hack-club-bot.vercel.app/0screenshot_2023-12-12_at_4.15.57_pm.png"
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)."
pronouns="he/him"
/>

BIN
public/wonderland/banner.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

11
public/wonderland/logo.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="396" height="396" viewBox="0 0 396 396" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="198" cy="198" r="196" fill="url(#paint0_radial_23_74)" stroke="black" stroke-width="4"/>
<path d="M194.041 183.669L191.858 184.304C178.273 188.259 170.372 198.21 168.844 210.635L166.859 210.391L168.844 210.635C168.505 213.397 169.057 216.747 170.092 220.484C170.847 223.212 171.812 225.993 172.781 228.785C173.138 229.814 173.496 230.845 173.844 231.875C175.103 235.606 176.244 239.357 176.508 242.609C176.773 245.871 176.187 249.162 173.366 251.276C163.775 258.464 155.771 264.623 149.651 272.371C143.582 280.052 139.311 289.374 137.427 302.935L135.446 302.66L137.427 302.935C137.339 303.568 137.012 304.238 136.341 304.676C135.763 305.054 135.16 305.104 134.796 305.101C134.097 305.097 133.326 304.874 132.768 304.704C132.464 304.611 132.164 304.515 131.866 304.419C130.843 304.091 129.845 303.771 128.821 303.634C127.542 303.464 126.768 303.667 126.259 304.158C125.688 304.709 124.948 306.093 124.927 309.482C124.885 316.479 125.758 322.48 128.569 327.892C129.248 329.199 129.815 330.324 130.325 331.337C130.857 332.394 131.328 333.328 131.801 334.221C132.692 335.901 133.43 337.109 134.252 338.081C135.81 339.923 137.879 341.167 142.737 342.69L142.139 344.599L142.737 342.69C154.711 346.444 165.747 345.997 178.357 345.486C180.109 345.416 181.891 345.343 183.71 345.281C199.8 344.73 215.312 342.777 230.595 338.198C233.49 337.331 236.561 334.411 239.053 330.474C241.514 326.587 243.128 322.148 243.396 318.812C244.322 307.287 240.665 297.002 236.839 286.241C235.923 283.664 234.997 281.06 234.122 278.405C232.565 273.68 230.965 268.944 229.362 264.2C226.922 256.979 224.475 249.74 222.164 242.488C221.655 240.892 221.62 239.406 222.116 238.078C222.608 236.762 223.53 235.849 224.476 235.217C225.933 234.244 227.849 233.722 229.009 233.405C229.241 233.342 229.443 233.287 229.605 233.238C233.059 232.197 235.595 230.703 237.465 228.714C239.336 226.725 240.66 224.114 241.487 220.648L241.487 220.647C241.919 218.837 242.025 217.367 241.823 216.027C241.622 214.701 241.1 213.379 240.103 211.894C238 208.764 236.062 205.532 234.154 202.352L233.955 202.02C231.973 198.717 230.017 195.471 227.892 192.354C227.152 191.269 226.114 190.317 224.845 189.242C224.672 189.095 224.494 188.946 224.313 188.793C223.225 187.881 221.998 186.851 220.962 185.679C220.304 184.936 219.593 183.911 219.093 182.861C218.842 182.335 218.615 181.743 218.493 181.134C218.374 180.546 218.318 179.776 218.594 179.003L218.595 179.001C223.115 166.373 227.823 153.809 232.525 141.261C233.704 138.117 234.882 134.974 236.056 131.831L236.627 130.304L238.237 130.555C238.475 130.592 238.721 130.631 238.965 130.669C239.173 130.702 239.379 130.734 239.578 130.765L241.482 131.062L241.256 132.976C241.152 133.858 241.033 134.689 240.919 135.491C240.675 137.197 240.451 138.77 240.425 140.417C240.419 140.8 240.407 141.168 240.396 141.525C240.37 142.308 240.347 143.039 240.391 143.766C240.458 144.886 240.671 145.273 240.738 145.343C249.902 154.946 259.351 164.296 268.881 173.583C270.487 175.148 272.651 176.394 274.942 177.479C277.851 178.857 279.424 178.921 280.381 178.52C281.337 178.12 282.395 176.954 283.453 173.916L283.453 173.916C287.269 162.955 289.633 152.068 286.654 141.064C283.972 131.162 278.19 122.776 270.785 115.416C261.033 105.724 249.944 97.8805 237.512 92.0283L237.512 92.0283C232.767 89.7941 229.678 89.5492 227.542 90.5043C225.405 91.4605 223.511 93.9377 221.986 98.9998L221.986 98.9999C215.206 121.491 210.59 144.286 209.892 167.787C209.892 167.787 209.892 167.787 209.892 167.787L207.893 167.728C207.8 170.872 206.755 173.988 205.711 177.104C205.23 178.539 204.748 179.975 204.36 181.413L194.041 183.669ZM194.041 183.669L193.133 181.585C192.8 180.822 192.487 180.06 192.179 179.309C191.515 177.692 190.873 176.127 190.101 174.718L190.101 174.717C186.446 168.051 182.773 161.409 179.103 154.771C173.949 145.45 168.798 136.136 163.707 126.772L163.707 126.771C154.508 109.857 145.39 92.9012 136.445 75.859L136.445 75.859C134.418 71.9974 132.823 67.7959 131.655 63.5507C129.828 56.9072 133.172 50.6776 139.667 48.0862C140.68 47.6821 142.899 47.2412 145.94 46.8376C148.899 46.4449 152.417 46.113 155.867 45.8614C159.316 45.61 162.674 45.4405 165.309 45.3702C166.628 45.3349 167.751 45.325 168.605 45.3408C169.033 45.3487 169.379 45.3628 169.639 45.3815C169.858 45.3972 169.964 45.4128 169.994 45.417C170.003 45.4185 170.005 45.4186 169.999 45.4172C175.103 46.6673 178.733 49.3701 181.56 53.8432L181.56 53.8433C190.289 67.6567 192.89 83.3407 194.966 99.5317L194.041 183.669ZM170.474 43.4752L170.474 43.4751L170.474 43.4752Z" fill="white" stroke="black" stroke-width="4"/>
<defs>
<radialGradient id="paint0_radial_23_74" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(218 403.5) rotate(-97.899) scale(385.659)">
<stop offset="0.121507" stop-color="#F3E4C6"/>
<stop offset="0.664013" stop-color="#FFB6E6"/>
<stop offset="1" stop-color="#91C2F4"/>
</radialGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

27
public/wonderland/wonderland.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 84 KiB