mirror of
https://github.com/System-End/site.git
synced 2026-04-19 23:22:49 +00:00
Onboard page updates (#873)
This commit is contained in:
Lexi Mattick
GitHub
parent
41ade0d704
commit
ff98991d68
1 changed files with 93 additions and 110 deletions
203
pages/onboard.js
203
pages/onboard.js
|
|
@ -152,9 +152,7 @@ const recapPixels = [
|
|||
0xffffffff, 0xffffffff
|
||||
]
|
||||
|
||||
const slackLink = `/slack/?reason=${encodeURIComponent(
|
||||
'I joined for OnBoard!'
|
||||
)}`
|
||||
const slackLink = '/slack/?event=onboard'
|
||||
|
||||
const stickerButtonText = 'Click 4 Stickers'
|
||||
const stickerButtonFont = 'Oleo Script'
|
||||
|
|
@ -233,7 +231,7 @@ const ShipPage = () => {
|
|||
spotlightRef.current.style.background = `radial-gradient(
|
||||
circle at ${event.pageX}px ${event.pageY}px,
|
||||
rgba(0, 0, 0, 0) 10px,
|
||||
rgba(0, 0, 0, 0.85) 80px
|
||||
rgba(0, 0, 0, 0.8) 80px
|
||||
)`
|
||||
}
|
||||
window.addEventListener('mousemove', handler)
|
||||
|
|
@ -397,7 +395,7 @@ const ShipPage = () => {
|
|||
sx={{
|
||||
bg: '#000000',
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
|
||||
linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
|
||||
url('https://cloud-dst3a9oz5-hack-club-bot.vercel.app/0image.png')
|
||||
`,
|
||||
color: '#ffffff',
|
||||
|
|
@ -461,18 +459,32 @@ const ShipPage = () => {
|
|||
</Balancer>
|
||||
</Heading>
|
||||
|
||||
<Box sx={{ mt: 16 }}>
|
||||
<Flex sx={{ mt: 16, gap: 10 }}>
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
as="a"
|
||||
href="#apply"
|
||||
href="https://hack.af/pcb-jam"
|
||||
target="_blank"
|
||||
sx={{
|
||||
background: t => t.util.gx('#60cc38', '#113b11')
|
||||
}}
|
||||
>
|
||||
How do I apply?
|
||||
Learn PCB Design Now!
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="outlineLg"
|
||||
as="a"
|
||||
href="https://github.com/hackclub/OnBoard/blob/main/README.md"
|
||||
target="_blank"
|
||||
sx={{
|
||||
borderColor: '#113b11',
|
||||
color: '#60cc38'
|
||||
}}
|
||||
>
|
||||
Get a Grant
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Box sx={{ flex: 1, maxWidth: 230 }}>
|
||||
|
|
@ -496,7 +508,7 @@ const ShipPage = () => {
|
|||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Balancer ratio={0.6}>
|
||||
<Balancer ratio={0.8}>
|
||||
Join 1,000 others to create your own circuit board.
|
||||
</Balancer>
|
||||
</Heading>
|
||||
|
|
@ -531,12 +543,26 @@ const ShipPage = () => {
|
|||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Flex as="section" sx={{ px: 4, pt: 6, pb: 4, bg: dimBg, color: '#ffffff', justifyContent: 'center' }}>
|
||||
<Flex sx={{ flexDirection: 'column', gap: 4, width: '100%', maxWidth: 'copyPlus' }}>
|
||||
<Heading as="h2" sx={{ fontSize: 42, fontWeight: 500, borderTop: '4px solid', borderTopColor: 'red', pt: 4 }}>
|
||||
<Balancer ratio={0.3}>Never made a circuit board before? No problem.</Balancer>
|
||||
</Heading>
|
||||
<Text sx={{ fontSize: 3 }}>
|
||||
Learn how to design your own circuit boards from scratch with our <strong>official tutorials</strong> and jams, like Maggie’s <Link href="https://hack.af/pcb-jam" target="_blank">intro to PCB design jam</Link>. Ask in the{' '}
|
||||
<Link href={slackLink} target="_blank">Hack Club Slack</Link>{' '}
|
||||
if you have any questions!
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
as="section"
|
||||
sx={{
|
||||
overflowX: 'hidden',
|
||||
px: 4,
|
||||
py: 5,
|
||||
pb: 6,
|
||||
bg: dimBg,
|
||||
color: '#ffffff',
|
||||
justifyContent: 'center'
|
||||
|
|
@ -598,26 +624,25 @@ const ShipPage = () => {
|
|||
}}
|
||||
>
|
||||
<a
|
||||
href="https://github.com/maggie-j-liu/orpheus-keychain"
|
||||
href="https://github.com/hackclub/OnBoard/tree/main/projects/E-Fidget%20Lite"
|
||||
target="_blank"
|
||||
>
|
||||
<Flex as="article">
|
||||
<Text as="p" sx={{ pr: 80 }}>
|
||||
Make a <strong>keychain</strong> that has a{' '}
|
||||
<strong>light up dino</strong> on it.
|
||||
<Text as="p" sx={{ pr: 115 }}>
|
||||
A <strong>fidget spinner</strong> without any moving parts.
|
||||
</Text>
|
||||
<Text as="p" sx={{ pr: 100, color: 'gray' }}>
|
||||
See Maggie's designs
|
||||
See Micha's work
|
||||
<span className="arrow">→</span>
|
||||
</Text>
|
||||
<Image
|
||||
src="https://cloud-ahzzebs4i-hack-club-bot.vercel.app/0frame_1.png"
|
||||
alt="A circuit board of a dino wizard with a light up wand, the same image from the top of the page."
|
||||
src="https://cloud-r2xrlpq9q-hack-club-bot.vercel.app/0spinner.png"
|
||||
alt="A red circular circuit board with a graphic of white fidget spinner on it."
|
||||
sx={{
|
||||
maxWidth: 120,
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 15
|
||||
top: 40,
|
||||
right: 10
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
|
|
@ -629,8 +654,7 @@ const ShipPage = () => {
|
|||
>
|
||||
<Flex as="article">
|
||||
<Text as="p" sx={{ pr: 100 }}>
|
||||
Design a <strong>movement sensor</strong> add-on to an open
|
||||
source <strong>game console</strong>.
|
||||
A <strong>movement sensor</strong> add-on to an open source <strong>game console</strong>.
|
||||
</Text>
|
||||
<Text as="p" sx={{ pr: 140, color: 'gray' }}>
|
||||
Read the source <span className="arrow">→</span>
|
||||
|
|
@ -641,7 +665,7 @@ const ShipPage = () => {
|
|||
sx={{
|
||||
maxWidth: 280,
|
||||
position: 'absolute',
|
||||
bottom: -50,
|
||||
bottom: -40,
|
||||
right: -75
|
||||
}}
|
||||
/>
|
||||
|
|
@ -654,7 +678,7 @@ const ShipPage = () => {
|
|||
>
|
||||
<Flex as="article">
|
||||
<Text as="p" sx={{ pr: [100, 100, 100, 0] }}>
|
||||
Make a <strong>USB-C hub</strong> for the best{' '}
|
||||
Hugo's <strong>USB-C hub</strong> for the best{' '}
|
||||
<strong>hackathon swag</strong> ever.
|
||||
</Text>
|
||||
<Text as="p" sx={{ color: 'gray', pr: 150 }}>
|
||||
|
|
@ -676,22 +700,23 @@ const ShipPage = () => {
|
|||
</Flex>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/maggie-j-liu/macropad" target="_blank">
|
||||
<a href="https://github.com/hackclub/OnBoard/tree/main/projects/Karmanyaah_Longhorn_LEDs" target="_blank">
|
||||
<Flex as="article">
|
||||
<Text as="p" sx={{ pr: 170 }}>
|
||||
Come up with your own custom <strong>keyboard layout</strong>.
|
||||
<Text as="p" sx={{ pr: 140 }}>
|
||||
Karmanyaah's <strong>digital level</strong> in the shape of a longhorn.
|
||||
</Text>
|
||||
<Text as="p" sx={{ pr: 140, color: 'gray' }}>
|
||||
Check it out <span className="arrow">→</span>
|
||||
See the designs <span className="arrow">→</span>
|
||||
</Text>
|
||||
<Image
|
||||
src="https://cloud-8yyfro2sg-hack-club-bot.vercel.app/0keyboard.png"
|
||||
alt="A 3-key custom keyboard with colored glowing translucent keys."
|
||||
src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
|
||||
alt="A longhorn-shaped PCB with glowing horns."
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: -20,
|
||||
maxWidth: 230
|
||||
top: 40,
|
||||
right: -30,
|
||||
maxWidth: 230,
|
||||
transform: 'rotate(20deg)'
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
|
|
@ -699,42 +724,16 @@ const ShipPage = () => {
|
|||
</Grid>
|
||||
|
||||
<Button
|
||||
variant="outlineLg"
|
||||
variant="lg"
|
||||
as="a"
|
||||
href="https://github.com/hackclub/OnBoard/blob/main/README.md"
|
||||
href="https://hack.af/pcb-jam"
|
||||
target="_blank"
|
||||
>
|
||||
Join the Party
|
||||
Learn PCB Design Now!
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* <Flex as="section" sx={{ px: 4, pt: 4, pb: 5, bg: dimBg, color: '#ffffff', justifyContent: 'center' }}>
|
||||
<Flex sx={{ flexDirection: 'column', gap: 4, width: '100%', maxWidth: 'copyPlus' }}>
|
||||
<Heading as="h2" sx={{ fontSize: 42, fontWeight: 500 }}>
|
||||
<Balancer ratio={0.3}>Never made a circuit board before? No problem.</Balancer>
|
||||
</Heading>
|
||||
<Text sx={{ fontSize: 3 }}>
|
||||
Learn from tutorials like Maggie’s intro to PCB design video below. Ask in the{' '}
|
||||
<Link href={slackLink} target="_blank">Hack Club Slack</Link>{' '}
|
||||
if you have any questions!
|
||||
</Text>
|
||||
<iframe
|
||||
style={{
|
||||
width: '100%',
|
||||
maxWidth: 600,
|
||||
alignSelf: 'center',
|
||||
aspectRatio: '16 / 9'
|
||||
}}
|
||||
src="https://www.youtube.com/embed/PnK4gzO6S3Q"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
/>
|
||||
</Flex>
|
||||
</Flex> */}
|
||||
|
||||
<Flex
|
||||
as="section"
|
||||
id="apply"
|
||||
|
|
@ -905,8 +904,8 @@ const ShipPage = () => {
|
|||
Collaborate, get help, and support others as you take the leap.
|
||||
</Text>
|
||||
<Box sx={{ mt: 1 }}>
|
||||
<Button variant="lg" as="a" href={slackLink} target="_blank">
|
||||
Join the Slack
|
||||
<Button variant="outlineLg" as="a" href={slackLink} target="_blank">
|
||||
Join Slack
|
||||
</Button>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
|
@ -952,7 +951,7 @@ const ShipPage = () => {
|
|||
|
||||
<Grid
|
||||
ref={lightsScrollTrigger}
|
||||
gap="4px"
|
||||
gap={["2px", "3px", "4px"]}
|
||||
columns={recapWidth}
|
||||
sx={{ width: '100%', maxWidth: 800 }}
|
||||
>
|
||||
|
|
@ -1000,7 +999,17 @@ const ShipPage = () => {
|
|||
href="https://github.com/hackclub/OnBoard#requirements"
|
||||
target="_blank"
|
||||
>
|
||||
Read the Rules
|
||||
Get a Grant
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex as="article" sx={{
|
||||
transform: 'scale(1.1)'
|
||||
}}>
|
||||
<Text as="h3">Learn to PCB</Text>
|
||||
<Text as="p">Read our Hacker Card tutorial to learn how to make a simple circuit board from start to end.</Text>
|
||||
<Button as="a" href="https://hack.af/pcb-jam" target="_blank">
|
||||
Start the Tutorial
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
|
|
@ -1014,45 +1023,7 @@ const ShipPage = () => {
|
|||
Join Slack
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex as="article">
|
||||
<Text as="h3">Free Stickers</Text>
|
||||
<Text as="p">
|
||||
Like stickers? Request below and we'll ship you an envelope full
|
||||
of stickers for free.
|
||||
</Text>
|
||||
<Button
|
||||
variant="outline"
|
||||
as="a"
|
||||
href="https://airtable.com/shrOOU2ZZFYtffUVz"
|
||||
target="_blank"
|
||||
>
|
||||
Request Stickers
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{/* <Flex as="article">
|
||||
<Text as="h3">Learn to PCB</Text>
|
||||
<Text as="p">Watch Maggie’s intro video to learn how to make a simple circuit board from start to end.</Text>
|
||||
<Button variant="outline" as="a" href="https://airtable.com/shrOOU2ZZFYtffUVz" target="_blank">
|
||||
Watch Tutorial
|
||||
</Button>
|
||||
</Flex> */}
|
||||
</Grid>
|
||||
|
||||
<Flex
|
||||
sx={{
|
||||
gap: 3,
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
mt: '-16px'
|
||||
}}
|
||||
>
|
||||
<Text sx={{ fontSize: 3 }}>Get started now:</Text>
|
||||
<Button variant="ctaLg" as="a" href={slackLink} target="_blank">
|
||||
Join the Slack
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
|
|
@ -1069,13 +1040,13 @@ const ShipPage = () => {
|
|||
}}
|
||||
/>
|
||||
|
||||
{/* <Flex
|
||||
<Flex
|
||||
as="a"
|
||||
href="javascript:void(0)"
|
||||
href="https://airtable.com/shrOOU2ZZFYtffUVz"
|
||||
target="_blank"
|
||||
sx={{
|
||||
bg: '#ff0000',
|
||||
color: '#ffffff',
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
textDecoration: 'none',
|
||||
size: 160,
|
||||
flexDirection: 'column',
|
||||
|
|
@ -1085,17 +1056,29 @@ const ShipPage = () => {
|
|||
position: 'absolute',
|
||||
top: -80,
|
||||
right: '14vw',
|
||||
fontSize: 3,
|
||||
lineHeight: 1.3,
|
||||
fontSize: '24px',
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: `'${stickerButtonFont}', cursive`,
|
||||
transform: 'rotate(-25deg)',
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0px 4px 44px rgba(0, 0, 0, 0.55), 0px 0px 10px rgba(0, 0, 0, 0.75), inset 0px 0px 60px rgba(255, 255, 255, 0.40)'
|
||||
// Terrible buttons styles, doesn't even look good, but didn't want to waste more time:
|
||||
backgroundImage: 'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF6464 0%, #EF2222 32.29%, #B00 100%)',
|
||||
boxShadow: '0px -14px 14px 0px #670000 inset, 14px 0px 14px 0px rgba(255, 255, 255, 0.25) inset, 0px 14px 14px 0px rgba(255, 255, 255, 0.25) inset, -14px 0px 14px 0px #670000 inset',
|
||||
filter: 'drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.50))',
|
||||
textShadow: '0px 0px 2px rgba(255, 255, 255, 0.45)',
|
||||
WebkitTapHighlightColor: 'transparent',
|
||||
'transition': 'box-shadow 80ms linear, filter 80ms linear, font-size 80ms linear',
|
||||
':active': {
|
||||
backgroundImage: 'radial-gradient(75.96% 56.13% at 50.00% 50.00%, #FF4747 0%, #E52121 32.29%, #B00 100%, #A30101 100%)',
|
||||
boxShadow: '0px -14px 14px 0px #440303 inset, 14px 0px 14px 0px #860000 inset, 0px 14px 14px 0px #860000 inset, -14px 0px 14px 0px #440303 inset',
|
||||
filter: 'drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.50))',
|
||||
fontSize: '22px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{stickerButtonText.split(' ').map((line, i) => <div key={i}>{line}</div>)}
|
||||
</Flex> */}
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
<Footer dark />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue