mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
Merge branch 'main' into v4
This commit is contained in:
zach latta
GitHub
commit
c719f6c6af
68 changed files with 1689 additions and 74 deletions
|
|
@ -125,7 +125,8 @@ export default function Signup() {
|
|||
eventName,
|
||||
teamType,
|
||||
teamNumber,
|
||||
userEmail
|
||||
userEmail,
|
||||
category: 'robotics team'
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function Testimonials() {
|
|||
}}
|
||||
>
|
||||
<Organization
|
||||
logo="https://cloud-ga0lm1r8d-hack-club-bot.vercel.app/0image.png"
|
||||
logo="https://cloud-ab81zjlm9-hack-club-bot.vercel.app/0image.png"
|
||||
name="Poseidon Robotics"
|
||||
teamNum="FTC Team #16898"
|
||||
teamLocation="San Jose, CA"
|
||||
|
|
@ -55,7 +55,7 @@ export default function Testimonials() {
|
|||
transparency="poseidon-robotics"
|
||||
/>
|
||||
<Organization
|
||||
logo="https://cloud-ab81zjlm9-hack-club-bot.vercel.app/0image.png"
|
||||
logo="https://cloud-ga0lm1r8d-hack-club-bot.vercel.app/0image.png"
|
||||
name="Killabytez"
|
||||
teamNum="FTC Team #14663"
|
||||
teamLocation="Fremont, CA"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const handleClick = () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
const ScrollHint = () => (
|
||||
const ScrollHint = ({...props}) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'block',
|
||||
|
|
@ -33,6 +33,7 @@ const ScrollHint = () => (
|
|||
'&:active': { transform: ' translateY(6px) rotate(45deg)' }
|
||||
}}
|
||||
onClick={handleClick}
|
||||
{...props}
|
||||
></Box>
|
||||
)
|
||||
|
||||
|
|
|
|||
80
components/winter/breakdown-box.js
Normal file
80
components/winter/breakdown-box.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import {
|
||||
Box,
|
||||
Card,
|
||||
Flex,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Badge,
|
||||
Link
|
||||
} from 'theme-ui'
|
||||
import { Zoom } from 'react-reveal'
|
||||
import Icon from '@hackclub/icons'
|
||||
|
||||
function BreakdownBox({ subtitle, icon, text, description, delay, href, color, bg }) {
|
||||
return (
|
||||
<Zoom delay={delay}>
|
||||
<Card
|
||||
sx={{
|
||||
color: 'white',
|
||||
background: 'rgba(225,225,225,0.2)',
|
||||
height: '100%',
|
||||
cursor: `${href ? 'pointer' : 'default'}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
// justifyContent: 'flex-end'
|
||||
}}
|
||||
variant="interactive"
|
||||
as={href ? 'a' : 'div'}
|
||||
href={href}
|
||||
>
|
||||
{subtitle ? (
|
||||
<Text
|
||||
as="h1"
|
||||
sx={{
|
||||
fontSize: [2, 3, 4]
|
||||
}}
|
||||
>
|
||||
{subtitle}
|
||||
</Text>
|
||||
) : (
|
||||
<Box
|
||||
as="span"
|
||||
sx={{
|
||||
width: 'fit-content',
|
||||
bg: bg || 'white',
|
||||
borderRadius: 18,
|
||||
lineHeight: 0,
|
||||
p: 2,
|
||||
mb: 1,
|
||||
display: 'inline-block',
|
||||
transform: ['scale(0.75)', 'none'],
|
||||
transformOrigin: 'bottom left',
|
||||
boxShadow:
|
||||
'inset 2px 2px 6px rgba(255,255,255,0.2), inset -2px -2px 6px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<Icon glyph={icon} size={48} color={color || 'white'} />
|
||||
</Box>
|
||||
)}
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: [3, 4, 5]
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Heading>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: [2, 3]
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
</Card>
|
||||
</Zoom>
|
||||
)
|
||||
}
|
||||
|
||||
export default BreakdownBox
|
||||
102
components/winter/breakdown.js
Normal file
102
components/winter/breakdown.js
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Container,
|
||||
Heading,
|
||||
Grid,
|
||||
Text,
|
||||
Badge,
|
||||
Link
|
||||
} from 'theme-ui'
|
||||
import { Fade, Slide } from 'react-reveal'
|
||||
import BreakdownBox from './breakdown-box'
|
||||
|
||||
function Breakdown() {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
pt: 3,
|
||||
pb: 5,
|
||||
background: 'linear-gradient(180deg, #579AC9 0%, #338EDA 100%)'
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
<Slide>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{
|
||||
textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: 'white',
|
||||
fontStyle: 'italic'
|
||||
}}
|
||||
>
|
||||
<Fade>Dear high school hacker, we have a challenge for you:</Fade>
|
||||
</Heading>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{
|
||||
textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: 'white',
|
||||
fontSize: [4, 5, 6],
|
||||
pb: 4,
|
||||
mt: 0
|
||||
}}
|
||||
>
|
||||
<Fade>What will you make this winter?</Fade>
|
||||
</Heading>
|
||||
</Slide>
|
||||
<Fade>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{
|
||||
// textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: '#338eda',
|
||||
background: 'white',
|
||||
px: 3,
|
||||
py: 2,
|
||||
borderRadius: '10px',
|
||||
width: 'fit-content'
|
||||
}}
|
||||
>
|
||||
Join Hack Clubbers in a winter of making with
|
||||
</Heading>
|
||||
</Fade>
|
||||
|
||||
<Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} py={3}>
|
||||
<BreakdownBox
|
||||
icon="friend"
|
||||
color="#5bc0de"
|
||||
text="Friends"
|
||||
description="Find support from our community of 20k+ teenagers in the Hack Club Slack."
|
||||
delay="300"
|
||||
href="/slack"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="event-code"
|
||||
color="#5bc0de"
|
||||
text="Daily progress"
|
||||
description={
|
||||
<>
|
||||
From <strong>Feb 14-23</strong>, work on your project, share
|
||||
short photo/video updates each day.
|
||||
</>
|
||||
}
|
||||
delay="100"
|
||||
href="https://scrapbook.hackclub.com/r/10daysinpublic"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="settings"
|
||||
color="#5bc0de"
|
||||
text="Free hardware"
|
||||
description="We'll pay for up to $250 of your hardware to build your project."
|
||||
delay="200"
|
||||
/>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Breakdown
|
||||
163
components/winter/form.js
Normal file
163
components/winter/form.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import { Box, Input, Label, Button, Select, Text, Grid } from 'theme-ui'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import theme from '@hackclub/theme'
|
||||
import Icon from '../icon'
|
||||
import { keyframes } from '@emotion/react'
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
const hideAnimation = keyframes({
|
||||
from: { display: 'flex' },
|
||||
to: { display: 'none', opacity: 0, padding: 0, position: 'absolute' }
|
||||
})
|
||||
|
||||
const spinAnimation = keyframes({
|
||||
from: { transform: 'rotate(0deg)' },
|
||||
to: { transform: 'rotate(360deg)' }
|
||||
})
|
||||
|
||||
function Base({ children, action, target, method, onSubmit, id }) {
|
||||
return (
|
||||
<Box
|
||||
as="form"
|
||||
sx={{ display: 'grid', gridTemplateColumns: '1fr' }}
|
||||
id={id}
|
||||
action={action}
|
||||
target={target}
|
||||
method={method}
|
||||
onSubmit={onSubmit}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Field({
|
||||
placeholder,
|
||||
label,
|
||||
name,
|
||||
type,
|
||||
value,
|
||||
onChange,
|
||||
required = true,
|
||||
loading = false
|
||||
}) {
|
||||
return (
|
||||
<Box sx={{ my: 2 }}>
|
||||
<Label htmlFor={name} sx={{ color: 'muted', fontSize: 18 }}>
|
||||
{label}
|
||||
</Label>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
{loading && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 10,
|
||||
width: 20,
|
||||
height: 20,
|
||||
border: '1px solid white',
|
||||
borderRightStyle: 'none',
|
||||
animation: `${spinAnimation} 1s linear infinite`,
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
></Box>
|
||||
)}
|
||||
<Input
|
||||
id={name}
|
||||
placeholder={placeholder}
|
||||
name={name}
|
||||
type={type}
|
||||
sx={{
|
||||
bg: 'light'
|
||||
}}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
required={required}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Signup() {
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const [eventName, setEventName] = useState('')
|
||||
const [userEmail, setUserEmail] = useState('')
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
|
||||
await fetch('/api/bank/demo', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
eventName,
|
||||
userEmail,
|
||||
category: 'hardware grant'
|
||||
})
|
||||
})
|
||||
|
||||
setSubmitted(true)
|
||||
|
||||
// clear form
|
||||
setEventName('')
|
||||
setUserEmail('')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Base
|
||||
id="form"
|
||||
method="POST"
|
||||
action="/api/bank/demo"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<Field
|
||||
label="Name"
|
||||
name="eventName"
|
||||
placeholder="Fiona's Hardware Fund"
|
||||
value={eventName}
|
||||
onChange={e => setEventName(e.target.value)}
|
||||
/>
|
||||
<Field
|
||||
label="Email address"
|
||||
name="userEmail"
|
||||
placeholder="fiona@hackclub.com"
|
||||
type="email"
|
||||
value={userEmail}
|
||||
onChange={e => setUserEmail(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundImage: theme.util.gx('green', 'blue'),
|
||||
mt: [2, 3],
|
||||
py: 2
|
||||
}}
|
||||
type="submit"
|
||||
>
|
||||
Create new account
|
||||
</Button>
|
||||
</Base>
|
||||
{submitted && (
|
||||
<Box
|
||||
sx={{
|
||||
mt: 2,
|
||||
px: 2,
|
||||
py: 2,
|
||||
borderRadius: 'default',
|
||||
color: 'white',
|
||||
bg: 'green',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'start',
|
||||
animation: `${hideAnimation} 0s ease-in 15s`,
|
||||
animationFillMode: 'forwards'
|
||||
}}
|
||||
>
|
||||
<Icon glyph="send" size={24} />
|
||||
<Text>Submitted! Check your email for a sign in link.</Text>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
246
components/winter/info.js
Normal file
246
components/winter/info.js
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Heading,
|
||||
Text,
|
||||
Flex,
|
||||
Avatar
|
||||
} from 'theme-ui'
|
||||
import Icon from '../icon'
|
||||
import Tilt from '../tilt'
|
||||
import { Zoom } from 'react-reveal'
|
||||
|
||||
export default function InfoGrid() {
|
||||
return (
|
||||
<Container py={4}>
|
||||
<Grid
|
||||
sx={{
|
||||
gridTemplateColumns: ['1fr', '1fr', '1fr 1fr', '1fr 1fr 1fr'],
|
||||
gap: 3,
|
||||
h: 'fit-content'
|
||||
}}
|
||||
>
|
||||
<Zoom delay={100}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: ['100%']
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
variant="translucent"
|
||||
sx={{ borderRadius: 'default', px: 4, py: [2, 3, 5] }}
|
||||
>
|
||||
{/* <Icon glyph="sam" size={64} color="#5BC0DE" /> */}
|
||||
<Text variant="lead" as="p">
|
||||
A deeper look at
|
||||
</Text>
|
||||
<Heading as="h2" variant="title">
|
||||
Free hardware for your project
|
||||
</Heading>
|
||||
<br />
|
||||
<Button
|
||||
as="a"
|
||||
href="#rsvp"
|
||||
variant="ctaLg"
|
||||
sx={{ mt: 4 }}
|
||||
>
|
||||
RSVP
|
||||
</Button>
|
||||
</Card>
|
||||
</Box>
|
||||
</Zoom>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<Zoom delay={300}>
|
||||
<Card
|
||||
variant="translucent"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 4,
|
||||
py: 3,
|
||||
mb: 3
|
||||
}}
|
||||
>
|
||||
<Heading variant="headline">To qualify:</Heading>
|
||||
{/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
|
||||
Up to $250 grant per person
|
||||
</BulletItem> */}
|
||||
<BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
|
||||
Be a high schooler (or younger)
|
||||
</BulletItem>
|
||||
{/* <BulletItem iconGlyph="checkmark" iconColor="#5BC0DE">
|
||||
Share a plan for what you want to build and how much you need (up to $250)
|
||||
</BulletItem> */}
|
||||
<Text sx={{ color: 'muted' }}>
|
||||
If you qualify, share your idea! We're giving out as many grants
|
||||
as possible!
|
||||
</Text>
|
||||
</Card>
|
||||
</Zoom>
|
||||
<Zoom delay={400}>
|
||||
<Card
|
||||
variant="translucent"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 4,
|
||||
py: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: 'fit-content'
|
||||
}}
|
||||
>
|
||||
<Heading variant="headline">
|
||||
Once you have a project idea,
|
||||
</Heading>
|
||||
<Text as="p">
|
||||
figure out the hardware you need and where you can buy it. Share
|
||||
that with us and we'll give you a grant of up to $250.
|
||||
</Text>
|
||||
<Text as="p" mt={3}>
|
||||
It could be your first ever electronics project or your tenth,
|
||||
we want to support you in building whatever you want.
|
||||
</Text>
|
||||
{/* <Text>
|
||||
(& see what other Hack Clubbers, like{' '}
|
||||
<UserMention user="bellesea" />, are building)
|
||||
todo: link a random pr from the repo that is tagged with "accepted"
|
||||
</Text> */}
|
||||
{/* <Button
|
||||
as="a"
|
||||
href="https://github.com/hackclub/wom"
|
||||
variant="outline"
|
||||
sx={{
|
||||
color: 'text',
|
||||
mt: 3
|
||||
}}
|
||||
>
|
||||
See projects ➚
|
||||
</Button> */}
|
||||
</Card>
|
||||
</Zoom>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%'
|
||||
}}
|
||||
>
|
||||
<Zoom delay={600}>
|
||||
<Card
|
||||
variant="translucent"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 4,
|
||||
py: 3,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<Heading variant="headline">
|
||||
Receive and spend the grant through Hack Club Bank.
|
||||
</Heading>
|
||||
<BulletItem iconGlyph="bank-account" iconColor="#5BC0DE">
|
||||
Full history and balance, viewed on a powerful web dashbaord
|
||||
</BulletItem>
|
||||
<BulletItem iconGlyph="card" iconColor="#5BC0DE">
|
||||
Issue yourself a debit card to spend the funds
|
||||
</BulletItem>
|
||||
<BulletItem iconGlyph="explore" iconColor="#5BC0DE">
|
||||
Use transparency mode to spend it in public
|
||||
</BulletItem>
|
||||
</Card>
|
||||
</Zoom>
|
||||
<Zoom delay={800}>
|
||||
<Tilt>
|
||||
<Card
|
||||
as="div"
|
||||
sx={{
|
||||
backgroundColor: 'transparent',
|
||||
backgroundImage:
|
||||
'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
|
||||
height: ['300px', '500px', '100%', '230px'],
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
|
||||
display: ['block', 'block', 'none', 'block']
|
||||
}}
|
||||
/>
|
||||
</Tilt>
|
||||
</Zoom>
|
||||
</Box>
|
||||
<Tilt>
|
||||
<Card
|
||||
as="div"
|
||||
sx={{
|
||||
backgroundColor: 'transparent',
|
||||
backgroundImage:
|
||||
'url("https://cloud-ehtgzdn7u-hack-club-bot.vercel.app/0card.png")',
|
||||
height: ['300px', '500px', '100%', '230px'],
|
||||
backgroundSize: '100%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
boxShadow: '0 8px 32px rgba(255, 255, 255, 0.0625)',
|
||||
display: ['none', 'none', 'block', 'none']
|
||||
}}
|
||||
/>
|
||||
</Tilt>
|
||||
</Grid>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
function BulletItem({ children, iconGlyph, iconColor, iconSize }) {
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
alignItems: 'center',
|
||||
my: 2
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
glyph={iconGlyph}
|
||||
size={iconSize || 36}
|
||||
color={iconColor || 'text'}
|
||||
sx={{
|
||||
flexShrink: '0'
|
||||
}}
|
||||
/>
|
||||
<Text sx={{ ml: 1 }}>{children}</Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
function UserMention({ user }) {
|
||||
return (
|
||||
<Box
|
||||
as="span"
|
||||
sx={{
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Text as="a" href={`https://github.com/${user}`}>
|
||||
@{user}
|
||||
</Text>
|
||||
<Avatar
|
||||
src={`https://github.com/${user}.png`}
|
||||
height="24px"
|
||||
width="24px"
|
||||
sx={{ backgroundColor: 'white', ml: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
152
components/winter/landing.js
Normal file
152
components/winter/landing.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import { Box, Heading, Button, Text, Container } from 'theme-ui'
|
||||
// import { gsap } from 'gsap'
|
||||
import { useEffect } from 'react'
|
||||
// import ScrollTrigger from 'gsap/dist/ScrollTrigger'
|
||||
/** @jsxImportSource theme-ui */
|
||||
import Snowfall from 'react-snowfall'
|
||||
import { Fade } from 'react-reveal'
|
||||
import Rsvp from './rsvp'
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
||||
const flashing = keyframes({
|
||||
from: { opacity: 0 },
|
||||
'50%': { opacity: 1 },
|
||||
to: { opacity: 0 }
|
||||
})
|
||||
|
||||
function Dot() {
|
||||
return (
|
||||
<Text
|
||||
sx={{
|
||||
bg: 'green',
|
||||
color: 'white',
|
||||
borderRadius: 'circle',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
width: '.4em',
|
||||
height: '.4em',
|
||||
marginRight: '.4em',
|
||||
marginBottom: '.12em',
|
||||
animationName: `${flashing}`,
|
||||
animationDuration: '3s',
|
||||
animationTimingFunction: 'ease-in-out',
|
||||
animationIterationCount: 'infinite'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Landing({ rsvpCount }) {
|
||||
// useEffect(() => {
|
||||
// if (typeof window !== 'undefined') {
|
||||
// gsap.registerPlugin(ScrollTrigger)
|
||||
// gsap.to('.box', {
|
||||
// scrollTrigger: {
|
||||
// trigger: '.box',
|
||||
// start: 'top center',
|
||||
// end: 'top 100%',
|
||||
// scrub: true,
|
||||
// markers: true,
|
||||
// }, // start the animation when ".box" enters the viewport (once)
|
||||
// x: 600,
|
||||
// ease: 'none',
|
||||
// duration: 5
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
return (
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
{/* <img
|
||||
src="https://cloud-mvlym308h-hack-club-bot.vercel.app/0cloud_2.png"
|
||||
width="200px"
|
||||
height="auto"
|
||||
class="box"
|
||||
sx={{ zIndex: 3, position: 'absolute', top: '10%', left: '60%' }}
|
||||
/>
|
||||
<img
|
||||
src="https://cloud-mvlym308h-hack-club-bot.vercel.app/1cloud_1.png"
|
||||
width="200px"
|
||||
height="auto"
|
||||
class="box"
|
||||
sx={{ zIndex: 3, position: 'absolute', top: '20%', left: '80%' }}
|
||||
/>
|
||||
<img
|
||||
src="https://cloud-mvlym308h-hack-club-bot.vercel.app/1cloud_1.png"
|
||||
width="200px"
|
||||
height="auto"
|
||||
class="box"
|
||||
sx={{ zIndex: 3, position: 'absolute', top: '40%', left: '40%' }}
|
||||
/> */}
|
||||
<Box
|
||||
sx={{
|
||||
background:
|
||||
'url(https://cloud-6h53svh6x-hack-club-bot.vercel.app/0group_5.png), linear-gradient(0deg, #3561A4 0%, #338EDA 100%)',
|
||||
backgroundPosition: 'bottom center',
|
||||
backgroundSize: ['200%', '150%', '100%'],
|
||||
backgroundRepeat: 'no-repeat',
|
||||
height: '85vh',
|
||||
minHeight: [null, '750px'],
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
zIndex: 2
|
||||
}}
|
||||
>
|
||||
<Snowfall />
|
||||
<Container>
|
||||
<Box
|
||||
sx={{
|
||||
backdropFilter: 'blur(1.5px)',
|
||||
maxWidth: 'container'
|
||||
}}
|
||||
>
|
||||
<Fade left cascade>
|
||||
<Heading
|
||||
variant="eyebrow"
|
||||
sx={{
|
||||
color: 'sunken'
|
||||
// fontSize: ['18px', '20px', '24px']
|
||||
}}
|
||||
>
|
||||
<Dot />
|
||||
{rsvpCount} more RSVPs till the start of a hacker's
|
||||
</Heading>
|
||||
</Fade>
|
||||
<Fade left cascade>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="ultratitle"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: '0 0 16px rgba(0, 0, 0, 0.2)'
|
||||
}}
|
||||
id="rsvp"
|
||||
>
|
||||
Winter Hardware <br />
|
||||
Wonderland
|
||||
</Heading>
|
||||
</Fade>
|
||||
{/* <Container variant="copy">
|
||||
<Text
|
||||
variant="subtitle"
|
||||
as="p"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: '2px 2px 10px rgba(0, 0, 0, 1)',
|
||||
pt: 2
|
||||
}}
|
||||
>
|
||||
Get up to $250 in grant money build a hardware project this
|
||||
winter alongside hundreds of other hackers.
|
||||
</Text>
|
||||
</Container> */}
|
||||
<Rsvp />
|
||||
</Box>
|
||||
{/* <ScrollHint sx={{mt: 3}} /> */}
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
318
components/winter/projects.js
Normal file
318
components/winter/projects.js
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
import React, { useState } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
Card,
|
||||
Grid,
|
||||
Link as A,
|
||||
Text,
|
||||
Avatar,
|
||||
Image
|
||||
} from 'theme-ui'
|
||||
import Photo from '../../components/photo'
|
||||
import NextImage from 'next/image'
|
||||
import Marquee from 'react-marquee-slider'
|
||||
import Photo1 from '../../public/winter/1.jpeg'
|
||||
import Photo2 from '../../public/winter/2.png'
|
||||
import Photo3 from '../../public/winter/3.jpeg'
|
||||
import Photo4 from '../../public/winter/4.jpeg'
|
||||
import Photo5 from '../../public/winter/5.jpeg'
|
||||
import Photo6 from '../../public/winter/6.jpeg'
|
||||
import Photo7 from '../../public/winter/7.jpeg'
|
||||
import Photo8 from '../../public/winter/8.jpeg'
|
||||
import Photo9 from '../../public/winter/9.jpeg'
|
||||
import Photo10 from '../../public/winter/10.jpeg'
|
||||
import Photo12 from '../../public/winter/12.jpeg'
|
||||
import Photo13 from '../../public/winter/13.jpeg'
|
||||
import Photo14 from '../../public/winter/14.jpeg'
|
||||
import Photo15 from '../../public/winter/15.jpeg'
|
||||
import Photo16 from '../../public/winter/16.jpeg'
|
||||
import Photo17 from '../../public/winter/17.jpeg'
|
||||
import Photo18 from '../../public/winter/18.jpeg'
|
||||
import Photo19 from '../../public/winter/19.jpeg'
|
||||
import Photo20 from '../../public/winter/20.jpeg'
|
||||
import Photo21 from '../../public/winter/21.jpeg'
|
||||
import Photo22 from '../../public/winter/22.jpeg'
|
||||
import Photo23 from '../../public/winter/23.jpeg'
|
||||
import Photo24 from '../../public/winter/24.jpeg'
|
||||
import Photo25 from '../../public/winter/25.jpeg'
|
||||
import Photo26 from '../../public/winter/26.jpeg'
|
||||
import Photo27 from '../../public/winter/27.jpeg'
|
||||
import Photo28 from '../../public/winter/28.jpeg'
|
||||
import Photo29 from '../../public/winter/29.jpeg'
|
||||
import Photo30 from '../../public/winter/30.jpeg'
|
||||
import Photo31 from '../../public/winter/31.png'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
const Header = styled(Box)`
|
||||
background: url('/pattern.svg');
|
||||
`
|
||||
|
||||
const Sheet = styled(Card)`
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
`
|
||||
Sheet.defaultProps = {
|
||||
sx: {
|
||||
bg: 'rgba(255, 255, 255, 0.875)',
|
||||
p: [3, 4],
|
||||
color: 'black',
|
||||
width: 1,
|
||||
mb: 4
|
||||
}
|
||||
}
|
||||
|
||||
Sheet.defaultProps = {
|
||||
sx: {
|
||||
maxWidth: '52rem',
|
||||
fontSize: 3,
|
||||
p: [4, 5],
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
const PhotoRow = ({ photos }) => (
|
||||
<Box sx={{ height: '200px', overflow: 'hidden' }}>
|
||||
<Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
|
||||
<Marquee velocity={12}>
|
||||
{photos.map((photo, index) => (
|
||||
<NextImage
|
||||
placeholder="blur"
|
||||
src={photo}
|
||||
objectFit="cover"
|
||||
className="next-image"
|
||||
height="200px"
|
||||
width="300px"
|
||||
alt="Hack Club students"
|
||||
key={'image-' + index}
|
||||
/>
|
||||
))}
|
||||
</Marquee>
|
||||
</Box>
|
||||
<Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
|
||||
<Marquee velocity={12}>
|
||||
{photos.map((photo, index) => (
|
||||
<NextImage
|
||||
placeholder="blur"
|
||||
src={photo}
|
||||
objectFit="cover"
|
||||
className="next-image"
|
||||
height="200px"
|
||||
width="600px"
|
||||
key={'image-' + index}
|
||||
alt="Hack Club students"
|
||||
/>
|
||||
))}
|
||||
</Marquee>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
||||
const Cards = ({ avatar, username, description, image }) => {
|
||||
return (
|
||||
<Card
|
||||
className="post"
|
||||
sx={{ p: [3, 3], width: '100%', background: 'rgba(225,225,225,0.9)' }}
|
||||
>
|
||||
<Flex
|
||||
as="a"
|
||||
href={
|
||||
username != 'cjmika110'
|
||||
? `https://scrapbook.hackclub.com/${username}`
|
||||
: 'https://scrapbook.hackclub.com'
|
||||
}
|
||||
sx={{
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
alignItems: 'center',
|
||||
mb: 2
|
||||
}}
|
||||
>
|
||||
<Avatar loading="lazy" src={avatar} alt="" mr={2} />
|
||||
<Box>
|
||||
<Text variant="subheadline" my={0} fontSize={[1, 1]}>
|
||||
@{username}
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: 1,
|
||||
textAlign: 'left',
|
||||
mb: 2,
|
||||
a: {
|
||||
color: 'primary',
|
||||
wordBreak: 'break-all',
|
||||
wordWrap: 'break-word'
|
||||
},
|
||||
'> div': { width: 18, height: 18 }
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Text>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '200px',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url('${image}')`,
|
||||
backgroundSize: '100%',
|
||||
backgroundPosition: 'bottom center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
>
|
||||
{/* <img src={image} sx={{ width: '100%' }} /> */}
|
||||
</Box>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Projects() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
let list = [
|
||||
'mechanical keyboard',
|
||||
'3D printer',
|
||||
'drone',
|
||||
'CNC machine',
|
||||
'pixel art display',
|
||||
'camera'
|
||||
]
|
||||
|
||||
if (count == list.length - 1) {
|
||||
setCount(0)
|
||||
}
|
||||
|
||||
let project_idea = list[count]
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Header sx={{ position: 'relative' }}>
|
||||
<Box
|
||||
sx={{
|
||||
background: 'rgba(0,0,0, 0.8)',
|
||||
zIndex: 1,
|
||||
position: 'relative',
|
||||
color: 'white!important',
|
||||
height: ['auto', '800px', '800px']
|
||||
}}
|
||||
pt={[5, 5, '50px']}
|
||||
pb={[5, 0, 0]}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '64rem',
|
||||
mx: 'auto',
|
||||
zIndex: 1,
|
||||
position: 'relative'
|
||||
}}
|
||||
align="center"
|
||||
py={2}
|
||||
px={[1, 3]}
|
||||
>
|
||||
<Container sx={{ maxWidth: '48rem' }}>
|
||||
<Heading
|
||||
variant="title"
|
||||
sx={{
|
||||
textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: 'white',
|
||||
fontSize: [4, 5, 6],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
<Text>You could be building a</Text>
|
||||
<Text
|
||||
sx={{
|
||||
backgroundColor: '#406BAB',
|
||||
py: 2,
|
||||
px: 3,
|
||||
borderRadius: 10,
|
||||
position: 'relative',
|
||||
width: 'fit-content',
|
||||
height: 'min-content',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
onClick={() => setCount(count + 1)}
|
||||
>
|
||||
<Box as="span" sx={{ whiteSpace: 'nowrap' }}>
|
||||
{project_idea}
|
||||
</Box>
|
||||
<Image
|
||||
src="https://cloud-ohzuz4m3t-hack-club-bot.vercel.app/0click_me.svg"
|
||||
alt="click me"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: [null, -3, -3],
|
||||
bottom: [-3, null, null],
|
||||
right: [0, '-40px', '-40px'],
|
||||
transform: 'rotate(-12deg)'
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Heading>
|
||||
<Grid columns={[1, 3, 3]} mt={4} mx={['5vw', 'auto', 'auto']}>
|
||||
<Cards
|
||||
avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-12-04/4449277732855_bc5a70015c4b2146cdec_192.jpg&w=640&q=75"
|
||||
username="sampoder"
|
||||
description="today i presented.. the *CLIMATATOR*! it’s a 4D interactive media experience / climate change simulator that showcases the effects of climate change to a younger audience..."
|
||||
image="https://cloud-lwd22jmab-hack-club-bot.vercel.app/420210303_154846.jpg"
|
||||
/>
|
||||
<Cards
|
||||
avatar="https://scrapbook.hackclub.com/_next/image?url=https://avatars.slack-edge.com/2022-07-26/3865494839057_a471d7e9c871ca9121ea_192.png&w=640&q=75"
|
||||
username="maggie"
|
||||
description="working on something…"
|
||||
image="https://image.mux.com/50200NTyKdeFIayts00oUjauhMTTfQiOPgVn9Xm00mE1aS8/thumbnail.jpg?width=512&fit_mode=pad&time=0"
|
||||
/>
|
||||
<Cards
|
||||
avatar="https://www.gravatar.com/avatar/04484b2178b8fd17c5a529c54614e14c?d=identicon&r=pg"
|
||||
username="cjmika110"
|
||||
description="Tired of QWERTY keyboards? Is typing too intuitive for you? Karl the Keyboard is a portable, squishable, fun, easy- to-use binary keyboard! Instead of pressing keys, you move a joystick up and down to represent ones..."
|
||||
image="https://assemble-images.hackclub.com/a34cbf72-7023-424a-8239-abf4146529e8-Untitled%20drawing%20(1).png"
|
||||
/>
|
||||
</Grid>
|
||||
<Button
|
||||
as="a"
|
||||
variant="cta"
|
||||
href="https://scrapbook.hackclub.com/"
|
||||
sx={{
|
||||
background:
|
||||
'linear-gradient(32deg, rgba(51, 142, 218, 0.9) 0%, rgba(51, 214, 166, 0.9) 100%)',
|
||||
mt: 2
|
||||
}}
|
||||
>
|
||||
Keep exploring →
|
||||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
zIndex: 0,
|
||||
width: '100%',
|
||||
display: ['none', 'block', 'block']
|
||||
}}
|
||||
>
|
||||
<PhotoRow photos={[Photo1, Photo2, Photo3, Photo4, Photo5]} />
|
||||
<PhotoRow photos={[Photo6, Photo7, Photo8, Photo9, Photo10]} />
|
||||
<PhotoRow photos={[Photo21, Photo12, Photo13, Photo14, Photo15]} />
|
||||
<PhotoRow photos={[Photo16, Photo17, Photo18, Photo19, Photo20]} />
|
||||
</Box>
|
||||
</Header>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
101
components/winter/recap.js
Normal file
101
components/winter/recap.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { Box, Button, Container, Heading, Grid, Card, Text } from 'theme-ui'
|
||||
import theme from '@hackclub/theme'
|
||||
import { Slide, Zoom } from 'react-reveal'
|
||||
import BreakdownBox from './breakdown-box'
|
||||
import Signup from './form'
|
||||
|
||||
function Recap() {
|
||||
return (
|
||||
<>
|
||||
<Container sx={{ py: 5 }}>
|
||||
<Slide>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{
|
||||
textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: 'white',
|
||||
fontSize: [3, 4, 5],
|
||||
pb: 4,
|
||||
maxWidth: '90%'
|
||||
}}
|
||||
>
|
||||
Make your ideas real this winter, with electronics and Hack Club
|
||||
friends.{' '}
|
||||
</Heading>
|
||||
</Slide>
|
||||
<Grid gap={[2, 2, 3]} columns={[1, 1, 3, 3]} pb={4}>
|
||||
<BreakdownBox
|
||||
icon="event-code"
|
||||
text="10 days"
|
||||
description="of building with other teenagers around the world"
|
||||
delay="100"
|
||||
bg="blue"
|
||||
/>
|
||||
<BreakdownBox
|
||||
icon="payment-transfer"
|
||||
text="$250"
|
||||
description="grants instantly transferred through Hack Club Bank"
|
||||
delay="200"
|
||||
bg="blue"
|
||||
/>
|
||||
<Zoom delay="300">
|
||||
<Card
|
||||
variant="translucent"
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
px: 3,
|
||||
pb: 4,
|
||||
pt: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
variant="subtitle"
|
||||
sx={{
|
||||
fontWeight: 'bold',
|
||||
color: 'blue',
|
||||
textShadow: '0px 0px 21px #ffffff'
|
||||
}}
|
||||
>
|
||||
Open a Demo Account
|
||||
</Text>
|
||||
<Text variant="caption">
|
||||
While you wait for your hardware, explore and get familiar with
|
||||
Hack Club Bank with limited access to features until you get
|
||||
fully activated.
|
||||
</Text>
|
||||
<Signup />
|
||||
</Card>
|
||||
</Zoom>
|
||||
{/* <Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'left'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlineLg"
|
||||
sx={{
|
||||
color: 'white',
|
||||
mt: 3
|
||||
}}
|
||||
as="a"
|
||||
href="https://github.com/hackclub/wom"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Box> */}
|
||||
</Grid>
|
||||
<Button variant="ctaLg" as="a" href="#rsvp" style={{ zIndex: '100', textAlign: 'center', backgroundImage: theme.util.gx('green', 'blue') }}>
|
||||
RSVP
|
||||
</Button>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Recap
|
||||
150
components/winter/rsvp.js
Normal file
150
components/winter/rsvp.js
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import Icon from '@hackclub/icons'
|
||||
import { useRef, useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Label,
|
||||
Input,
|
||||
Button,
|
||||
Text,
|
||||
Alert,
|
||||
Card,
|
||||
Heading,
|
||||
Grid,
|
||||
Flex,
|
||||
Checkbox
|
||||
} from 'theme-ui'
|
||||
import { Zoom } from 'react-reveal'
|
||||
|
||||
const Loading = () => (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
border: '2px solid #f3f3f3',
|
||||
borderTop: '2px solid #ec3750',
|
||||
borderRadius: '50%',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' }
|
||||
}
|
||||
}}
|
||||
></Box>
|
||||
)
|
||||
|
||||
const Rsvp = () => {
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const formRef = useRef(null)
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
|
||||
await fetch('/api/winter-rsvp', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
Name: e.target.name.value,
|
||||
Email: e.target.email.value,
|
||||
Age: e.target.age.checked
|
||||
})
|
||||
})
|
||||
|
||||
formRef.current.reset()
|
||||
setSubmitting(false)
|
||||
|
||||
setSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 'narrowPlus',
|
||||
mx: 'auto',
|
||||
mt: [3, 4],
|
||||
background: 'rgb(255,255,255, 0.45)',
|
||||
backdropFilter: 'blur(8px)'
|
||||
}}
|
||||
>
|
||||
<Heading as="h2" variant="subheadline" sx={{ mb: 1 }}>
|
||||
Get up to $250 to build a hardware project this winter.
|
||||
</Heading>
|
||||
<Text sx={{ color: 'muted' }}>
|
||||
RSVP to get notified when applications open.
|
||||
</Text>
|
||||
<Box
|
||||
as="form"
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
gap={[2, 3]}
|
||||
sx={{
|
||||
mt: [null, 3],
|
||||
textAlign: 'left',
|
||||
alignItems: 'end',
|
||||
input: { bg: 'sunken' }
|
||||
}}
|
||||
>
|
||||
<Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
|
||||
<div>
|
||||
<Label htmlFor="location">Name</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Fiona Hackworth"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
autofillBackgroundColor="highlight"
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
placeholder="fiona@hackclub.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Flex sx={{ flexDirection: 'column' }}>
|
||||
<Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
|
||||
<Checkbox name="age" defaultChecked={false} />I am a current high
|
||||
school student (or younger).
|
||||
</Label>
|
||||
<br />
|
||||
|
||||
<Button type="submit" sx={{ mt: -3 }}>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loading />
|
||||
RSVP
|
||||
</>
|
||||
) : (
|
||||
'RSVP'
|
||||
)}
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{submitted && (
|
||||
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
|
||||
<Icon glyph="send" />
|
||||
<Text sx={{ ml: 2 }}>Signed up!</Text>
|
||||
</Alert>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default Rsvp
|
||||
127
components/winter/timeline.js
Normal file
127
components/winter/timeline.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { Box, Flex, Container, Text, Badge, Link } from 'theme-ui'
|
||||
import { Slide } from 'react-reveal'
|
||||
import Icon from '../icon'
|
||||
|
||||
function TimelineStep({ children }) {
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
paddingY: 4,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
background: 'snow',
|
||||
height: ['420px', '320px', '320px'],
|
||||
width: '4px',
|
||||
marginLeft: 36,
|
||||
position: 'absolute',
|
||||
zIndex: 0
|
||||
},
|
||||
'&:first-of-type:before': {
|
||||
top: [0, null, 'auto'],
|
||||
width: [0, null, 0],
|
||||
left: [0, null, 0]
|
||||
},
|
||||
'&:last-of-type:before': {
|
||||
bottom: [0, null, 'auto'],
|
||||
left: [0, null, 0],
|
||||
width: [0, null, 0]
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
function Circle({ children }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
p: 14,
|
||||
background: 'red',
|
||||
|
||||
color: 'white',
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse farthest-corner at top left, #5bc0de, #338eda)',
|
||||
borderRadius: '100%',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
position: 'relative',
|
||||
zIndex: 999
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Step({ icon, name, duration, href }) {
|
||||
return (
|
||||
<TimelineStep sx={{ pb: 1 }}>
|
||||
<Slide left>
|
||||
<Circle>
|
||||
{href ? (
|
||||
<Link href={href} sx={{ cursor: 'pointer', zIndex: 999 }}>
|
||||
<Icon glyph={icon} size={48} color="white" />
|
||||
</Link>
|
||||
) : (
|
||||
<Icon glyph={icon} size={48} />
|
||||
)}
|
||||
</Circle>
|
||||
<Container
|
||||
sx={{
|
||||
mt: 0,
|
||||
display: 'flex',
|
||||
justifyContent: 'left',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
bg: 'smoke',
|
||||
color: 'darker',
|
||||
fontWeight: 'normal',
|
||||
textTransform: 'uppercase',
|
||||
width: 'fit-content',
|
||||
fontSize: 18,
|
||||
px: 3
|
||||
}}
|
||||
>
|
||||
{duration}
|
||||
</Badge>
|
||||
<Text
|
||||
sx={{ color: 'white', fontSize: [2, 3], maxWidth: [300, null, 550] }}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
</Container>
|
||||
</Slide>
|
||||
</TimelineStep>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RealTimeline() {
|
||||
return (
|
||||
<Flex sx={{ flexDirection: 'column', justifyContent: 'center', pb: 4 }}>
|
||||
<Step
|
||||
icon="post"
|
||||
name="Instructions sent out on how to submit your hardware plan to qualify for the grant."
|
||||
duration="When we reach 500 RSVPs"
|
||||
/>
|
||||
<Step
|
||||
icon="send"
|
||||
name="Deadline for sharing your hardware plan. Make sure to order your hardware by this time!"
|
||||
duration="January 15"
|
||||
/>
|
||||
<Step
|
||||
icon="slack"
|
||||
name="Start of a 10 days building in public challenge where you share daily updates on your hardware project."
|
||||
duration="February 15"
|
||||
/>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
|
@ -73,6 +73,11 @@ const nextConfig = {
|
|||
destination: '/bank/first/',
|
||||
permanent: false
|
||||
},
|
||||
{
|
||||
source: '/wom/',
|
||||
destination: '/winter/',
|
||||
permanent: false
|
||||
},
|
||||
{ source: '/workshops/slack/', destination: '/slack/', permanent: true },
|
||||
{ source: '/community/', destination: '/slack/', permanent: true },
|
||||
{ source: '/hack_camp/', destination: '/camp/', permanent: true },
|
||||
|
|
@ -234,6 +239,10 @@ const nextConfig = {
|
|||
{
|
||||
source: '/how-to-organize-a-hackathon',
|
||||
destination: 'https://expandables.hackclub.dev/organizing.html'
|
||||
},
|
||||
{
|
||||
source: '/how-to-organize-a-hackathon/style.css',
|
||||
destination: 'https://expandables.hackclub.dev/style.css'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
"@hackclub/meta": "1.1.32",
|
||||
"@hackclub/theme": "^0.3.3",
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@next/mdx": "^13.0.4",
|
||||
"@next/mdx": "^13.0.5",
|
||||
"@octokit/auth-app": "^4.0.7",
|
||||
"@octokit/core": "^4.0.5",
|
||||
"@octokit/rest": "^19.0.5",
|
||||
|
|
@ -27,13 +27,14 @@
|
|||
"airtable-plus": "^1.0.4",
|
||||
"animated-value": "^0.2.4",
|
||||
"animejs": "^3.2.1",
|
||||
"axios": "^1.1.3",
|
||||
"axios": "^1.2.0",
|
||||
"country-list-js": "^3.1.7",
|
||||
"cursor-effects": "^1.0.7",
|
||||
"devtools-detect": "^4.0.0",
|
||||
"form-data": "^4.0.0",
|
||||
"globby": "^11.0.4",
|
||||
"graphql": "^16.6.0",
|
||||
"gsap": "^3.11.3",
|
||||
"jquery": "^3.6.1",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^12.3.1",
|
||||
|
|
@ -49,12 +50,12 @@
|
|||
"react-relative-time": "^0.0.7",
|
||||
"react-reveal": "^1.2.2",
|
||||
"react-scrolllock": "^5.0.1",
|
||||
"react-snowfall": "^1.2.1",
|
||||
"react-ticker": "^1.3.2",
|
||||
"react-tooltip": "^4.5.1",
|
||||
"react-tsparticles": "^2.5.3",
|
||||
"react-use-websocket": "3.0.0",
|
||||
"recharts": "2.1.12",
|
||||
"resnow": "^1.0.0",
|
||||
"styled-components": "^5.3.6",
|
||||
"swr": "^1.3.0",
|
||||
"theme-ui": "^0.14",
|
||||
|
|
@ -65,6 +66,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"eslint": "8.28.0",
|
||||
"eslint-config-next": "13.0.4"
|
||||
"eslint-config-next": "13.0.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ import { ThemeProvider } from 'theme-ui'
|
|||
|
||||
const App = ({ Component, pageProps }) => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Meta as={Head} />
|
||||
<Meta as={Head}>
|
||||
<meta name="google-site-verification" content="7zE7h5foPaxIcnv5Frq6BkcUb9-3UzVc8q3P_cexf9I" />
|
||||
</Meta>
|
||||
<Component {...pageProps} />
|
||||
<Analytics />
|
||||
</ThemeProvider>
|
||||
|
|
|
|||
|
|
@ -33,15 +33,15 @@ export default async function handler(req, res) {
|
|||
'How did you hear about HCB?': data.referredBy,
|
||||
Transparent: data.transparent
|
||||
})
|
||||
const url = process.env.BANK_NOTIFS_WEBHOOK
|
||||
const body = JSON.stringify({
|
||||
application
|
||||
})
|
||||
fetch(url, {
|
||||
body,
|
||||
await fetch('https://bank.hackclub.com/api/v1/events/create_demo', {
|
||||
body: JSON.stringify({
|
||||
email: data.userEmail,
|
||||
name: data.eventName
|
||||
}),
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${process.env.HCB_API_TOKEN}`
|
||||
}
|
||||
})
|
||||
.then(r => {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ export default async function handler(req, res) {
|
|||
await fetch('https://bank.hackclub.com/api/v1/events/create_demo', {
|
||||
body: JSON.stringify({
|
||||
email: data.userEmail,
|
||||
name: data.eventName
|
||||
name: data.eventName,
|
||||
category: data.eventCategory
|
||||
}),
|
||||
method: 'POST',
|
||||
headers: {
|
||||
|
|
|
|||
36
pages/api/winter-rsvp.js
Normal file
36
pages/api/winter-rsvp.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import AirtablePlus from 'airtable-plus'
|
||||
|
||||
const airtable = new AirtablePlus({
|
||||
baseID: 'app1o9tRo6XulLnsr',
|
||||
apiKey: process.env.AIRTABLE_API_KEY,
|
||||
tableName: 'rsvp'
|
||||
})
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method === 'POST') {
|
||||
const rsvp = await airtable.create({
|
||||
Name: req.body.Name,
|
||||
Email: req.body.Email,
|
||||
Age: req.body.Age,
|
||||
IP: req.headers['x-forwarded-for'] || req.socket.remoteAddress
|
||||
})
|
||||
const url = process.env.WOM_SLACK_WEBHOOK_URL
|
||||
const body = JSON.stringify({
|
||||
rsvp
|
||||
})
|
||||
fetch(url, {
|
||||
body,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then(res => res.status(200).json({ success: true }))
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
res.json({ status: 'Something went wrong', error })
|
||||
})
|
||||
} else {
|
||||
res.status(405).json({ status: 'error', error: 'Must send POST request' })
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ const HackathonGrant = () => {
|
|||
<Meta
|
||||
as={Head}
|
||||
title="Hackathon Grant"
|
||||
description="Hack Club is partnering with FIRST to provide $500 grants to in-person high school hackathons happening between August and December 31, 2022."
|
||||
description="Hack Club is partnering with FIRST to provide $500 grants to in-person high school hackathons happening until June 30th, 2023."
|
||||
image="https://cloud-7yw9f6xnv-hack-club-bot.vercel.app/0grant.png"
|
||||
/>
|
||||
<Box as="main" key="main">
|
||||
|
|
@ -185,8 +185,8 @@ const HackathonGrant = () => {
|
|||
Hack Club Bank
|
||||
</Link>{' '}
|
||||
fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
|
||||
<a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons this
|
||||
semester (August - December 31, 2022).
|
||||
<a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons <s>this
|
||||
semester between August and December 31, 2022</s> until June 30th, 2023.
|
||||
</Box>
|
||||
<Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
|
||||
{open ? 'Apply Now' : 'Coming Soon'}
|
||||
|
|
@ -228,8 +228,7 @@ const HackathonGrant = () => {
|
|||
>
|
||||
We want to bring back high schooler-led events around the world,
|
||||
so we're only offering this grant for high school hackathons that
|
||||
take place this semester (from August 19th to December 31st,
|
||||
2022).
|
||||
take place this semester (until June 30th).
|
||||
<br />
|
||||
<br />
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -1058,4 +1058,4 @@ export async function getStaticProps() {
|
|||
}
|
||||
}
|
||||
|
||||
export default Page
|
||||
export default Page
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
Link
|
||||
} from 'theme-ui'
|
||||
import styled from '@emotion/styled'
|
||||
import Snow from 'resnow'
|
||||
import Snowfall from 'react-snowfall'
|
||||
import Footer from '../components/footer'
|
||||
import FadeIn from '../components/fade-in'
|
||||
import { keyframes } from '@emotion/react'
|
||||
|
|
@ -70,13 +70,13 @@ const Page = () => (
|
|||
<Box sx={{ overflowX: 'hidden' }}>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Secret Santa – Holiday 2021"
|
||||
title="Secret Santa"
|
||||
description="Find your holiday zen this year with Hack Club’s Secret Santa."
|
||||
image="https://cloud-9kgqrlg7o-hack-club-bot.vercel.app/0santa.png"
|
||||
/>
|
||||
<Nav />
|
||||
<Hero py={4}>
|
||||
<Snow style={{ width: '100vw' }} />
|
||||
<Snowfall />
|
||||
<Container px={3} py={[3, 4]}>
|
||||
<Heading
|
||||
sx={{ py: [3, 5], fontSize: [4, 5], color: 'white', opacity: 0.8 }}
|
||||
|
|
@ -84,7 +84,7 @@ const Page = () => (
|
|||
caps
|
||||
>
|
||||
<FadeIn delay={300} duration={600}>
|
||||
It's 2021,
|
||||
It's 2022,
|
||||
</FadeIn>
|
||||
<FadeIn delay={1200} duration={600}>
|
||||
the holidays have come,
|
||||
|
|
@ -125,10 +125,10 @@ const Page = () => (
|
|||
just in time for the holidays!
|
||||
</Lead>
|
||||
{/* Signup form */}
|
||||
{/* <Signup /> */}
|
||||
<Button disabled sx={{ bg: 'primary', mb: 4 }}>
|
||||
<Signup />
|
||||
{/* <Button disabled sx={{ bg: 'primary', mb: 4 }}>
|
||||
Signups closed. Check back next year!
|
||||
</Button>
|
||||
</Button> */}
|
||||
</FadeIn>
|
||||
</Container>
|
||||
</Hero>
|
||||
|
|
|
|||
|
|
@ -84,13 +84,6 @@ export default function Team() {
|
|||
img="/team/holly.jpeg"
|
||||
pronouns="she/her"
|
||||
/>
|
||||
<Bio
|
||||
name="Cedric Hutchings"
|
||||
teamRole="Clubs Constructionist"
|
||||
text="Already more at home on the internet than anywhere in meat space, you can imagine a young Ced's horror when his parents moved him into a holler so deep in the Appalachian Mountains that his beloved internet was only accessible through sluggish satellite. Stubbornly refusing to be separated from his online games, he threw together his own for his brothers, a captive audience. Now he's at Hack Club making materials that share his enthusiasm for making fun somethings from nothing but technology."
|
||||
img="/team/ced.png"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Kognise"
|
||||
teamRole="Special Projects and Hiring"
|
||||
|
|
@ -140,42 +133,6 @@ export default function Team() {
|
|||
pronouns="he/him"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<br />
|
||||
<Text variant="title" color="orange" sx={{ lineHeight: '1.75em' }}>
|
||||
Asia-Pacific HQ
|
||||
</Text>
|
||||
<Grid columns={[1, null, 2]} gap={4}>
|
||||
<Bio
|
||||
img="/team/athul.jpg"
|
||||
name="Athul Blesson"
|
||||
teamRole="APAC Director"
|
||||
text="Athul started dozens of the largest Hack Clubs in India. After graduating from high school, he joined as the Regional Manager of Asia-Pacific & Africa, where he actively manages 117 clubs."
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Harsh Bajpai"
|
||||
teamRole="Clubs Lead"
|
||||
text="Harsh is a gentle force in both his local and the Slack community. He is a vegetarian musician who enjoys traveling around India. When he is not reading ancient mythology, he is programming with purpose and passion."
|
||||
img="/team/harsh.png"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Annlee Fores"
|
||||
teamRole="Operations"
|
||||
text="As the COO of Hack Club APAC, he oversees operations and handles event organisation & logistics at Hack Club APAC.
|
||||
When not seen busy juggling between different tasks he takes up, he enjoys tinkering & building fun projects."
|
||||
img="/team/annlee.jpg"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Anna Grace Benny"
|
||||
teamRole="Clubs Lead"
|
||||
text="Anna is a visual communication graduate and a social media enthusiast. She loves films and everything related. Managing and meeting new Hack Clubbers is her jam. She helps with onboarding new Hack Clubbers in the APAC region and manages the social media pages."
|
||||
img="/team/anna.png"
|
||||
pronouns="she/her"
|
||||
/>
|
||||
</Grid>
|
||||
<br />
|
||||
<Text variant="title" color="orange" sx={{ lineHeight: '1.75em' }}>
|
||||
Student Team
|
||||
|
|
@ -274,6 +231,42 @@ and participating in academic competitions with his friends.`}
|
|||
Acknowledgements
|
||||
</Text>
|
||||
<Grid columns={[1, null, 2]} gap={4}>
|
||||
<Bio
|
||||
name="Cedric Hutchings"
|
||||
teamRole="Clubs Constructionist"
|
||||
text="Already more at home on the internet than anywhere in meat space, you can imagine a young Ced's horror when his parents moved him into a holler so deep in the Appalachian Mountains that his beloved internet was only accessible through sluggish satellite. Stubbornly refusing to be separated from his online games, he threw together his own for his brothers, a captive audience. At Hack Club, Ced made materials that shared his enthusiasm for making fun somethings from nothing but technology."
|
||||
img="/team/ced.png"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
img="/team/athul.jpg"
|
||||
name="Athul Blesson"
|
||||
teamRole="APAC Director"
|
||||
text="Athul started dozens of the largest Hack Clubs in India. After graduating from high school, he joined Hack Club as the Regional Manager of the Asia-Pacific & Africa team where he actively managed hundreds of clubs. Then, as the APAC Director, Athul lead the APAC HQ team dedicated to supporting all of the clubs in the APAC region."
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Harsh Bajpai"
|
||||
teamRole="Clubs Lead"
|
||||
text="Harsh is a vegetarian musician who enjoys traveling around India. As the APAC Clubs Lead, Harsh welcomed new clubs to the community and built amazing tools for them. When he is not reading ancient mythology, he is programming with purpose and passion."
|
||||
img="/team/harsh.png"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Annlee Fores"
|
||||
teamRole="Operations"
|
||||
text="As the COO of Hack Club APAC, Annlee oversaw operations and handled event organisation & logistics at Hack Club APAC.
|
||||
When not busy juggling different tasks he takes up, he enjoys tinkering & building fun projects."
|
||||
img="/team/annlee.jpg"
|
||||
pronouns="he/him"
|
||||
/>
|
||||
<Bio
|
||||
name="Anna Grace Benny"
|
||||
teamRole="Clubs Lead"
|
||||
text="Anna is a visual communication graduate and a social media enthusiast. She loves films and everything related. Managing and meeting new Hack Clubbers as the APAC Clubs Lead, she helped with onboarding new clubs and managed the APAC social media pages."
|
||||
img="/team/anna.png"
|
||||
pronouns="she/her"
|
||||
/>
|
||||
<Bio
|
||||
name="Ishan Goel"
|
||||
teamRole="2022 Summer Communications Intern"
|
||||
|
|
|
|||
133
pages/winter.js
Normal file
133
pages/winter.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Nav from '../components/nav'
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
Heading,
|
||||
Button,
|
||||
Text,
|
||||
Image,
|
||||
Input,
|
||||
Label,
|
||||
Link,
|
||||
Flex
|
||||
} from 'theme-ui'
|
||||
import Snowfall from 'react-snowfall'
|
||||
import Footer from '../components/footer'
|
||||
import FadeIn from '../components/fade-in'
|
||||
import { useState } from 'react'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import RealTimeline from '../components/winter/timeline'
|
||||
import InfoGrid from '../components/winter/info'
|
||||
import Breakdown from '../components/winter/breakdown'
|
||||
import Projects from '../components/winter/projects'
|
||||
import Landing from '../components/winter/landing'
|
||||
import Recap from '../components/winter/recap'
|
||||
import { Zoom } from 'react-reveal'
|
||||
import useSWR from 'swr'
|
||||
import fetcher from '../lib/fetcher'
|
||||
|
||||
export function Winter() {
|
||||
const { data: rsvps } = useSWR(
|
||||
'https://airbridge.hackclub.com/v0.1/Winter%20Hardware%20Wonderland/rsvp',
|
||||
fetcher,
|
||||
{ refreshInterval: 1000 }
|
||||
)
|
||||
|
||||
const rsvpCount = rsvps
|
||||
? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
|
||||
: 100 // arbitrary fallback number
|
||||
return (
|
||||
<>
|
||||
<Box as="main" sx={{ bg: 'blue' }}>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Winter Hardware Wonderland"
|
||||
description="Join the Hack Club community for a winter of hardware hacking, and get a $250 grant to build your project."
|
||||
image="/winter/og-image.png"
|
||||
/>
|
||||
<Nav light />
|
||||
<Snowfall />
|
||||
<ForceTheme theme="light" />
|
||||
{/* filter out rsvps that are "invalid" */}
|
||||
<Landing rsvpCount={500 - rsvpCount} />
|
||||
<Breakdown />
|
||||
<Projects />
|
||||
<InfoGrid />
|
||||
<Container>
|
||||
<Zoom>
|
||||
<Heading
|
||||
variant="headline"
|
||||
sx={{
|
||||
textShadow: '0px 0px 21px #E1F1FF',
|
||||
color: 'white',
|
||||
fontSize: [3, 4, 5],
|
||||
maxWidth: '90%'
|
||||
}}
|
||||
>
|
||||
You've RSVPed, what's next?
|
||||
</Heading>
|
||||
<Text as="p" sx={{ pb: 4, color: 'white', fontSize: [2, 3]}}>
|
||||
Get a free DevKit (and gaming console 👀) by building a <Link href="https://sprig.hackclub.com" target="_blank" sx={{color: 'inherit'}}>JavaScript game</Link>. Or come hangout with us in #hardware-party on <Link target="_blank" href="/slack" sx={{color: 'inherit'}}>Slack</Link>.
|
||||
</Text>
|
||||
</Zoom>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: ['column', null, 'row'],
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: ['row', null, 'column'] }}
|
||||
>
|
||||
<Zoom>
|
||||
<Heading
|
||||
variant="title"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textTransform: 'uppercase',
|
||||
transform: ['none', null, 'rotate(-90deg)'],
|
||||
textShadow: '0px 0px 21px #E1F1FF'
|
||||
}}
|
||||
>
|
||||
Timeline
|
||||
</Heading>
|
||||
<Image
|
||||
src="https://cloud-lbajgdi3a-hack-club-bot.vercel.app/0fox_1.png"
|
||||
alt="Illustrated orange fox sleeping in a curled position"
|
||||
sx={{
|
||||
width: ['100px', null, '80%'],
|
||||
pt: [null, null, 6],
|
||||
ml: [2, null, null]
|
||||
}}
|
||||
/>
|
||||
</Zoom>
|
||||
</Box>
|
||||
<RealTimeline />
|
||||
</Flex>
|
||||
</Container>
|
||||
{/* Timeline */}
|
||||
|
||||
<Recap />
|
||||
<Container
|
||||
sx={{
|
||||
margin: 'auto',
|
||||
fontStyle: 'italic',
|
||||
color: 'snow',
|
||||
mb: 3,
|
||||
textAlign: 'left'
|
||||
}}
|
||||
>
|
||||
Illustrations by Ripley
|
||||
</Container>
|
||||
{/* <Signup /> */}
|
||||
<Footer />
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Winter
|
||||
BIN
public/stickers/HackHackClub.png
Normal file
BIN
public/stickers/HackHackClub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/stickers/bank_sheet.png
Normal file
BIN
public/stickers/bank_sheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 345 KiB |
BIN
public/stickers/epoch.png
Normal file
BIN
public/stickers/epoch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 KiB |
BIN
public/stickers/epoch_"h".png
Normal file
BIN
public/stickers/epoch_"h".png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 585 KiB |
BIN
public/stickers/epoch_among_us.png
Normal file
BIN
public/stickers/epoch_among_us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
public/stickers/epoch_bubbly.png
Normal file
BIN
public/stickers/epoch_bubbly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
public/stickers/hacky_new_year.png
Normal file
BIN
public/stickers/hacky_new_year.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
public/stickers/orpheus_goes_to_FIRST_robotics.png
Normal file
BIN
public/stickers/orpheus_goes_to_FIRST_robotics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
BIN
public/stickers/ship.png
Normal file
BIN
public/stickers/ship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 535 KiB |
BIN
public/stickers/sledding.png
Normal file
BIN
public/stickers/sledding.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
BIN
public/stickers/sprig_holographic.png
Normal file
BIN
public/stickers/sprig_holographic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
public/stickers/swiss_miss.png
Normal file
BIN
public/stickers/swiss_miss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
public/winter/1.jpeg
Normal file
BIN
public/winter/1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
public/winter/10.jpeg
Normal file
BIN
public/winter/10.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
BIN
public/winter/11.gif
Normal file
BIN
public/winter/11.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 MiB |
BIN
public/winter/12.jpeg
Normal file
BIN
public/winter/12.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
BIN
public/winter/13.jpeg
Normal file
BIN
public/winter/13.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/winter/14.jpeg
Normal file
BIN
public/winter/14.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
public/winter/15.jpeg
Normal file
BIN
public/winter/15.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
public/winter/16.jpeg
Normal file
BIN
public/winter/16.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
BIN
public/winter/17.jpeg
Normal file
BIN
public/winter/17.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
BIN
public/winter/18.jpeg
Normal file
BIN
public/winter/18.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
BIN
public/winter/19.jpeg
Normal file
BIN
public/winter/19.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
BIN
public/winter/2.png
Normal file
BIN
public/winter/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 MiB |
BIN
public/winter/20.jpeg
Normal file
BIN
public/winter/20.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
BIN
public/winter/21.jpeg
Normal file
BIN
public/winter/21.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
public/winter/22.jpeg
Normal file
BIN
public/winter/22.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
BIN
public/winter/23.jpeg
Normal file
BIN
public/winter/23.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/winter/24.jpeg
Normal file
BIN
public/winter/24.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 937 KiB |
BIN
public/winter/25.jpeg
Normal file
BIN
public/winter/25.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 802 KiB |
BIN
public/winter/26.jpeg
Normal file
BIN
public/winter/26.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/winter/27.jpeg
Normal file
BIN
public/winter/27.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
public/winter/28.jpeg
Normal file
BIN
public/winter/28.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 978 KiB |
BIN
public/winter/29.jpeg
Normal file
BIN
public/winter/29.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
public/winter/3.jpeg
Normal file
BIN
public/winter/3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 671 KiB |
BIN
public/winter/30.jpeg
Normal file
BIN
public/winter/30.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/winter/31.png
Normal file
BIN
public/winter/31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
public/winter/4.jpeg
Normal file
BIN
public/winter/4.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/winter/5.jpeg
Normal file
BIN
public/winter/5.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/winter/6.jpeg
Normal file
BIN
public/winter/6.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 997 KiB |
BIN
public/winter/7.jpeg
Normal file
BIN
public/winter/7.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
public/winter/8.jpeg
Normal file
BIN
public/winter/8.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
public/winter/9.jpeg
Normal file
BIN
public/winter/9.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 KiB |
BIN
public/winter/og-image.png
Normal file
BIN
public/winter/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
|
|
@ -4869,4 +4869,4 @@ zen-observable@0.8.15:
|
|||
zwitch@^1.0.0:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz"
|
||||
integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
|
||||
integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
|
||||
Loading…
Add table
Reference in a new issue