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

Savepoint mid-afternoon

Browse source 
Some code cleanup and initial round of edits from mid-day review call
This commit is contained in:
Ella 2022-07-29 16:09:22 -04:00
parent 20fcfb2657
commit e427acff7b
11 changed files with 75 additions and 356 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/footer.js
View file

@ -118,7 +118,9 @@ const Footer = ({ dark = false, children, ...props }) => (
<Link href="https://events.hackclub.com/">Events</Link>
<Link href="https://workshops.hackclub.com/">Workshops</Link>
<Link href="https://contribute.hackclub.com/">Contribute</Link>
<Link href="https://hackathons.hackclub.com/">Hackathons</Link>
<NextLink href="/hackathons" passHref>
<Link>Hackathons</Link>
</NextLink>
<NextLink href="/bank" passHref>
<Link>Bank</Link>
</NextLink>

35
components/hackathons/content.mdx
View file

@ -1,35 +0,0 @@
<!-- what a hackathon is, why you should be so jazzed about them, and hack club's vision of a hackathon? -->
import { Card } from 'theme-ui'
<Card>
## things
things people do at hackathons
</Card>
<Card>
## things
things people do at hackathons
</Card>
<Card>
## things
things people do at hackathons
</Card>
<Card>
## things
things people do at hackathons
</Card>

37
components/hackathons/cta.js
View file

@ -1,37 +0,0 @@
import { Box, Text, Heading, Button } from 'theme-ui'
import NextLink from 'next/link'
export default function Cta() {
return (
<>
<Box
sx={{
backgroundImage: t => t.util.gx('red', 'orange'),
margin: 'auto',
width: '600px',
maxWidth: '90%',
mb: 4,
mt: 4,
borderRadius: 8,
color: 'white',
textAlign: 'center',
p: 4
}}
>
<Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
Join the movement!
</Heading>
<NextLink href="/bank" passHref>
<Button sx={{ bg: 'white', color: 'red', mr: 2 }} as="a">
Apply for Bank
</Button>
</NextLink>
<NextLink href="/slack" passHref>
<Button sx={{ bg: 'white', color: 'red' }} as="a">
Join the community
</Button>
</NextLink>
</Box>
</>
)
}

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

@ -26,7 +26,7 @@ const Content2 = () => (
A full-stack financial toolkit
</Text>
<Heading as="h2" variant="title">
Hack Club Bank and Gadzooks!
Hack Club Bank and FIRST
<Text
as="span"
sx={{
@ -44,7 +44,7 @@ const Content2 = () => (
</Heading>
<Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
waiving fees for hackathons on hack club bank. and $10k in grants thanks
to our generous friends at Gadzooks!
to our generous friends at FIRST!
</Text>
<Link href="/slack" passHref>
<Button
@ -76,7 +76,7 @@ const Content = () => (
}}
>
<Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
<Text variant="eyebrow">Hack Club Bank & Gadzooks</Text>
<Text variant="eyebrow">Hack Club Bank & FIRST</Text>
<br />
<Text
as="span"
@ -94,8 +94,8 @@ const Content = () => (
<List>
<ListItem
icon="payment"
leadText="$10k in grants."
body={`Thanks to our friends at Gadzooks!, in-person hackathons running on Hack Club Bank
leadText="A $500 grant."
body={`In partnership with FIRST, in-person hackathons running on Hack Club Bank
are eligible for a $500 grant (with proof of venue).`}
/>
<ListItem

146
components/hackathons/landing.js
View file

@ -1,146 +0,0 @@
import { Box, Button, Heading, Link, Text, Container, Badge } from 'theme-ui'
import Fade from 'react-reveal/Fade'
import ScrollHint from '../scroll-hint'
import Image from 'next/image'
import hero from '../../public/bank/bg.webp'
export default function Landing() {
return (
<>
<Vignette />
<Slide>
<Box as="main" key="main">
<Box
sx={{
zIndex: '5',
position: 'relative',
marginTop: '-400px'
}}
>
<Container
sx={{
display: 'flex',
flexDirection: 'column',
textAlign: 'center',
color: 'white',
maxWidth: [null, null, 'copyUltra'],
p: { fontSize: [2, 3, 4], maxWidth: 'copy', mx: 'auto' }
}}
variant="ultratitle"
>
<Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
Welcome to the high school hackathon
</Text>
<Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
A renaissance of IRL {/* highlight or outline? */}
{/* <Highlight>high school hackathons.</Highlight> */}
<Text
as="span"
sx={{
WebkitTextStroke: 'currentColor',
WebkitTextStrokeWidth: ['2px', '3px'],
WebkitTextFillColor: '#33D6A6'
}}
>
high&nbsp;school hackathons.
</Text>
</Heading>
{/* <Text as="p" variant="subtitle">
lakjsdf;lajsdf;lkjasd;lfja;sldkjfalskdjf;l
</Text> */}
</Container>
{/* <Button
variant="outlineLg"
as="a"
href="#apply"
sx={{ mx: 'auto' }}
>
Join the community
</Button> */}
<br />
<ScrollHint scrollAmount="100" />
</Box>
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
zIndex: -1
}}
>
<Image src={hero} alt="" layout="fill" objectFit="cover" />
</Box>
</Box>
</Slide>
</>
)
}
function Slide({ children }) {
return (
<Box
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'end',
width: '100vw',
backgroundSize: 'cover',
backgroundColor: '#000000',
boxShadow: 'inset 0 0 4rem 1rem rgba(0, 0, 0, 0.5)',
backgroundPosition: 'center',
backgroundSize: 'cover',
width: '100%',
minHeight: '80vh',
position: 'relative'
}}
>
<Image
src="https://cloud-dtijd5g0u-hack-club-bot.vercel.app/020191026_151117__1_.jpg"
layout="fill"
objectFit="cover"
alt="woof"
// placeholder="blur"
priority
/>
{children}
</Box>
)
}
function Vignette() {
return (
<Box
style={{
backgroundImage:
'linear-gradient(to bottom,rgba(51, 142, 218, .9),rgba(51, 142, 218, 0.7) 35%, rgba(91, 192, 222, 0.2) 100%)',
height: '80vh',
left: '0',
right: '0',
position: 'absolute',
zIndex: '1'
}}
></Box>
)
}
function Highlight(props) {
return (
<Badge
as="mark"
sx={{
bg: '#5BC0DE',
color: 'inherit',
fontSize: 'inherit',
display: 'inline-block',
borderRadius: 'default',
px: [2, 3],
py: 1,
...props.sx
}}
{...props}
/>
)
}

22
components/hackathons/landing2.js
View file

@ -59,7 +59,8 @@ export default function Landing2({ showButton }) {
transform: [
'translateY(-50%) rotate(8deg)',
'translateX(15%) rotate(12deg)'
]
],
fontSize: [2, 3]
}}
>
Looking for hackathons?
@ -82,13 +83,21 @@ export default function Landing2({ showButton }) {
sx={{
WebkitTextStroke: 'currentColor',
WebkitTextStrokeWidth: ['2px', '3px'],
WebkitTextFillColor: '#33D6A6'
WebkitTextFillColor: '#33D6A6',
whiteSpace: [null, null, 'nowrap']
}}
>
high&nbsp;school&nbsp;hackathon.
high school hackathon.
</Text>
</Heading>
<Text as="p" variant="subtitle" mt={3}>
<Text
as="p"
variant="subtitle"
sx={{
mt: [3, 4],
fontSize: [2, 3]
}}
>
<strong>
It's not an extracurricular or a club. It's not a class or a
lecture.
@ -96,11 +105,6 @@ export default function Landing2({ showButton }) {
Hackathons are a playground to build things for fun and meet
others doing the same.
</Text>
<Text as="p" variant="subtitle" mt={3}>
This semester, we’re distributing $10k in grants (thanks
Gadzooks!) & providing the tools and resources for you to run
the best events.
</Text>
</Card>
</Fade>
</Box>

37
components/hackathons/philosophy.js
View file

@ -1,4 +1,5 @@
import { Heading, Container, Box } from 'theme-ui'
import { Heading, Container, Box, Button } from 'theme-ui'
import Link from 'next/link'
export default function Philosophy() {
return (
@ -56,6 +57,40 @@ export default function Philosophy() {
volunteers. We make things. We want others to make things too.
</Box>
</Container>
<Box
sx={{
backgroundImage: t => t.util.gx('orange', 'red'),
margin: 'auto',
width: '600px',
maxWidth: '90%',
mb: 4,
borderRadius: 8,
color: 'white',
textAlign: 'center',
p: 4
}}
>
<Heading as="h1" sx={{ fontSize: 5, mb: 2 }}>
Join the movement!
</Heading>
<Link href="/slack" passHref>
<Button
sx={{ bg: 'white', color: 'red' }}
mr={[0, 3]}
mb={[3, 0]}
as="a"
>
Meet hackathon-goers
</Button>
</Link>
<Link href="https://hackathons.hackclub.com" passHref>
<Button sx={{ bg: 'white', color: 'red' }} as="a">
Discover hackathons
</Button>
</Link>
</Box>
</Box>
)
}

2
components/hackathons/rundown.js
View file

@ -79,7 +79,7 @@ export default function Rundown() {
icon="bank-account"
color="white"
name="$10k in grants"
desc="We've partnered with Gadzooks to provide $500 grants for IRL high school hackathons this semester."
desc="We've partnered with FIRST to provide $500 grants for IRL high school hackathons this semester."
/>
</Card>
<Card

13
components/hackathons/todo.md Normal file
View file

@ -0,0 +1,13 @@
# TODO:
- [x] replace Gadzooks with FIRST
- [ ] make the Slack section better
- tell more about the experience that people are going to have on Slack
- eg. xxx number of hacathon organizers are asking questions on Slack every day?
- what is the hacakthon hotline?
- [ ] slow down the slack scrolling animation
- [ ] have 2 flows
- [ ] 1 for hackathon organizers
- [ ] 1 for hackers who are looking for hackathons
- [ ] reorder sections to make sense
- [ ] opening car hood

12
pages/hackathons.js
View file

@ -5,11 +5,11 @@ import ForceTheme from '../components/force-theme'
import Nav from '../components/nav'
import Footer from '../components/footer'
import Landing from '../components/hackathons/landing'
// import Landing from '../components/hackathons/landing'
import Rundown from '../components/hackathons/rundown'
import Content from '../components/hackathons/content.mdx'
// import Content from '../components/hackathons/content.mdx'
import MovingCards from '../components/hackathons/moving-cards'
import Cta from '../components/hackathons/cta'
// import Cta from '../components/hackathons/cta'
import Philosophy from '../components/hackathons/philosophy'
import Slack from '../components/hackathons/features/slack'
import Money from '../components/hackathons/features/money'
@ -34,13 +34,9 @@ export default function Hackathons() {
{/* Overview/rundown/what is a hackathon/why you should be so jazzed about irl hackathons */}
<Philosophy />
<Slack />
<Money />
<Slack />
<Marketing />
<Container as="section">
<Rundown />
</Container>

113
pages/hackathons2.js
View file

@ -1,113 +0,0 @@
import { Box, Container, Heading, Grid, Text } from 'theme-ui'
import Meta from '@hackclub/meta'
import Head from 'next/head'
import ForceTheme from '../components/force-theme'
import Nav from '../components/nav'
import Footer from '../components/footer'
import Landing from '../components/hackathons/landing'
import Rundown from '../components/hackathons/rundown'
import Content from '../components/hackathons/content.mdx'
import MovingCards from '../components/hackathons/moving-cards'
import Cta from '../components/hackathons/cta'
import Philosophy from '../components/hackathons/philosophy'
import Landing2 from '../components/hackathons/landing2'
export default function HackathonsLanding() {
return (
<>
<Box as="main" key="main">
<Nav />
<ForceTheme theme="light" />
<Meta
as={Head}
title="Hackathons"
description="The Hack Club community provides the resources and tools to help you run amazing hackathons."
image="/hackathons/og-image.png"
/>
<Box as="main">
<Landing2 />
{/* Overview/rundown/what is a hackathon/why you should be so jazzed about irl hackathons */}
<Container as="section" sx={{ mt: 5 }}>
<Text as="p" variant="eyebrow">
Hackathons
</Text>
<Heading as="h2" variant="title">
Mhmm yeah gadzooks{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: '#5d114c',
bg: 'rgb(255, 212, 64)'
}}
>
magic
</Text>
.
</Heading>
<Text as="p" variant="lead" sx={{ width: 'copyPlus' }}>
A social coding event where high school students come together and
share joy in computers build things, and form communities.
</Text>
</Container>
<Philosophy />
{/* what hack club (community) is providing to hackathon organizers */}
<Container as="section">
<Rundown />
</Container>
{/* I feel like there should be some sort of marquee animation here. hmmm yeah idk maybe
it would be cool to use slack messages? questions from hackathon-organizers? faqs about
running hackathons? */}
<Container as="section" sx={{ mt: 5 }}>
<Text as="p" variant="eyebrow">
The Slack community
</Text>
<Heading as="h2" variant="title">
A hackathon organizer's{' '}
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: '#6f31b7'
}}
>
best friend
</Text>
.
</Heading>
</Container>
<MovingCards />
<Grid
columns={[null, null, 2]}
gap={[3, 4]}
variant="layout.container"
sx={{
mt: [1, 2, 3],
textAlign: 'left',
div: { p: [3, 4] },
h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
p: { fontSize: 2, my: 0 }
}}
>
<Content />
</Grid>
<Cta />
</Box>
</Box>
<Footer key="footer" />
</>
)
}