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

Savepoint (from Wednesday mid-day review)

Browse source
This commit is contained in:
Ella 2022-07-27 14:54:18 -04:00
parent d1ee581bc4
commit a6de8d4f10
9 changed files with 505 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
components/hackathons/features/bank.js Normal file
View file

@ -0,0 +1,42 @@
import { Box } from 'theme-ui'
export default function Bank() {
return (
<>
<Box
key="video"
as="video"
muted
autoPlay
playsInline
loop
sx={{
width: '100%',
maxWidth: 'layout',
maxHeight: '66vh',
left: '50%',
transform: 'translateX(-50%)',
// position: 'absolute',
position: 'relative',
bottom: 0,
zIndex: 0,
paddingTop: '16px'
}}
>
{/* <source
src="https://cdn.glitch.com/3899929b-9aed-4dae-b1e6-230ef0ed4d51%2Fcircuit.hevc.mp4?v=1590594547077"
type="video/mp4; codecs=hevc"
/> */}
<source
src="https://cloud-jqsdd934l-hack-club-bot.vercel.app/0simple_pass_0000-0059.webm"
type="video/webm; codecs=vp9,opus"
/>
{/* <source
src="https://cdn.glitch.com/3899929b-9aed-4dae-b1e6-230ef0ed4d51%2Fcircuit.mov?v=1590594547333"
type="video/mov"
/> */}
Video of 3D Bank render.
</Box>
</>
)
}

72
components/hackathons/features/marketing.js Normal file
View file

@ -0,0 +1,72 @@
import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
import styled from '@emotion/styled'
import usePrefersMotion from '../../../lib/use-prefers-motion'
import useHasMounted from '../../../lib/use-has-mounted'
import { formatted } from '../../../lib/members'
import Link from 'next/link'
const Content = () => (
<Container
sx={{
textAlign: 'center',
zIndex: 999,
py: 6,
color: 'white',
'h2,p': { textShadow: 'text' },
textAlign: [null, 'center'],
position: 'relative',
overflow: 'hidden'
}}
>
<Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
Spread the word
</Text>
<Heading as="h2" variant="title">
Reach a network of high school hackers
</Heading>
<Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
List your hackathon on hackathons.hackclub.com (the first Google search
result for "high school hackathons") and emailed to other high school
hackers in your area.
</Text>
</Container>
)
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage: t => t.util.gx('cyan', 'green'),
opacity: 0.825,
zIndex: 1
}}
/>
)
const Static = ({
img = 'https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
// img="https://cloud-re5hkabx0.vercel.app/2020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
}) => (
<Box
as="section"
sx={{
position: 'relative',
overflow: 'hidden',
backgroundImage: t => t.util.gx('cyan', 'green'),
backgroundSize: 'cover'
}}
>
<Cover />
<Content />
</Box>
)
const Marketing = () => {
return <Static />
}
export default Marketing

185
components/hackathons/features/money.js Normal file
View file

@ -0,0 +1,185 @@
import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
import styled from '@emotion/styled'
import usePrefersMotion from '../../../lib/use-prefers-motion'
import useHasMounted from '../../../lib/use-has-mounted'
import { formatted } from '../../../lib/members'
import Link from 'next/link'
import Image from 'next/image'
import { Fade } from 'react-reveal'
import Icon from '../../icon'
import Bank from './bank'
const Content2 = () => (
<Container
sx={{
textAlign: 'center',
zIndex: 999,
py: 6,
color: 'white',
'h2,p': { textShadow: 'text' },
textAlign: [null, 'center'],
position: 'relative',
overflow: 'hidden'
}}
>
<Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
A full-stack financial toolkit
</Text>
<Heading as="h2" variant="title">
Hack Club Bank and Gadzooks!
<Text
as="span"
sx={{
borderRadius: 'default',
px: 2,
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'currentColor',
bg: 'green'
}}
>
best friend
</Text>
.
</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!
</Text>
<Link href="/slack" passHref>
<Button
as="a"
variant="ctaLg"
sx={{
background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
}}
>
Apply for Hack Club Bank →
</Button>
</Link>
</Container>
)
const Content = () => (
<>
<Container
variant="container"
sx={{
display: 'flex',
flexDirection: ['column'],
width: ['100%', '100%', '100%', '85%'],
color: 'smoke',
px: 4,
py: [4, 5, 6],
borderRadius: 'default',
position: 'relative'
}}
>
<Container maxWidth={28} sx={{ mx: 0, py: 4 }}>
<Text variant="eyebrow">Hack Club Bank & Gadzooks</Text>
<br />
<Text
as="span"
variant="title"
sx={{
WebkitTextStroke: 'currentColor',
WebkitTextStrokeWidth: '2px',
WebkitTextFillColor: theme => theme.colors.white,
textShadow: theme => `0 0 12px ${theme.colors.red}`
}}
>
Grants, no-fees, and more!
</Text>
</Container>
<List>
<ListItem
icon="payment"
leadText="$10k in grants."
body={`Thanks to our friends at Gadzooks!, in-person hackathons running on Hack Club Bank
are eligible for a $500 grant (with proof of venue).`}
/>
<ListItem
icon="bolt"
leadText="No more Bank fees."
body={`
For hackathons running this semester, we're waiving the 7% Hack Club Bank fee. Focus on
raising money, not calculating the money you'll lose from fees.`}
/>
</List>
</Container>
</>
)
const List = ({ children }) => (
<Box sx={{ maxWidth: 800 }}>
<ol style={{ listStyle: 'none', paddingLeft: 0 }}>{children}</ol>
</Box>
)
const ListItem = ({ icon, leadText, body }) => (
<Fade bottom>
<li
style={{
lineHeight: 1.25,
display: 'flex',
pl: 0
}}
>
<Icon
glyph={icon}
size={45}
sx={{
color: 'primary',
flexShrink: 'none',
flexShrink: 0,
mr: 2
}}
/>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Text sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}>
{leadText}
</Text>
<Text variant="lead">{body}</Text>
</Box>
</li>
</Fade>
)
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage:
'linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.45) 25%,rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.9) 100%)',
opacity: 0.875,
zIndex: 0
}}
/>
)
const Static = () => (
<Box
as="section"
id="slack"
sx={{
position: 'relative',
overflow: 'hidden',
backgroundImage: `url('/bank/bg.webp')`,
backgroundSize: 'cover'
}}
>
<Cover />
<Content />
{/* <Bank /> */}
</Box>
)
const Money = () => {
return <Static />
}
export default Money

146
components/hackathons/features/slack.js Normal file
View file

@ -0,0 +1,146 @@
import { Button, Box, Container, Heading, Flex, Grid, Text } from 'theme-ui'
import styled from '@emotion/styled'
import usePrefersMotion from '../../../lib/use-prefers-motion'
import useHasMounted from '../../../lib/use-has-mounted'
import { formatted } from '../../../lib/members'
import Link from 'next/link'
const Content = () => (
<Container
sx={{
textAlign: 'center',
zIndex: 999,
py: 6,
color: 'white',
'h2,p': { textShadow: 'text' },
textAlign: [null, 'center'],
position: 'relative',
overflow: 'hidden'
}}
>
<Text as="p" variant="eyebrow" sx={{ color: 'white', opacity: 0.75 }}>
The Hack Club 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: 'currentColor',
bg: 'green'
}}
>
best friend
</Text>
.
</Heading>
<Text as="p" variant="lead" sx={{ maxWidth: 'copyPlus', mx: 'auto' }}>
On the Slack, you'll find a community of hackathon organizers new and
experienced alike. Ask questions, get help, and share your own
experiences. We'll be there to help you out.
</Text>
<Link href="/slack" passHref>
<Button
as="a"
variant="ctaLg"
sx={{
background: 'linear-gradient(-132deg, #338eda 14%, #33d6a6 82%)'
}}
>
Join the community →
</Button>
</Link>
</Container>
)
const Cover = () => (
<Box
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundImage: t => t.util.gx('cyan', 'purple'),
opacity: 0.825,
zIndex: 1
}}
/>
)
const Static = ({
img = 'https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png'
// img="https://cloud-re5hkabx0.vercel.app/2020-07-25_hn13qhejqrzu4n1jy9yacxxgrgp3wf5u.png"
}) => (
<Box
as="section"
id="slack"
sx={{
position: 'relative',
overflow: 'hidden',
backgroundImage: `url(${img})`,
backgroundSize: 'cover'
}}
>
<Cover />
<Content />
</Box>
)
const Slack = () => {
const hasMounted = useHasMounted()
const prefersMotion = usePrefersMotion()
if (hasMounted && prefersMotion) {
return (
<Box
as="section"
id="slack"
sx={{ overflow: 'hidden', position: 'relative' }}
>
<Box
as="video"
autoPlay
muted
loop
playsInline
poster="https://cloud-nykwtt0z7.vercel.app/2020-07-25_a1tcva4ch6mmr6j2cfmcb4e9ync3yhar.png"
duration={2000}
sx={{
position: 'absolute',
bottom: 0,
top: 0,
left: 0,
right: 0,
height: '100%',
zIndex: -1,
width: '100vw',
objectFit: 'cover'
}}
>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.hecv.mp4?v=1590780967658"
type="video/mp4; codecs=hevc"
/>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.webm?v=1590781698834"
type="video/webm; codecs=vp9,opus"
/>
<source
src="https://cdn.glitch.com/2d637c98-ed35-417a-bf89-cecc165d7398%2Foutput-no-duplicate-frames.mov?v=1590781491717"
type="video/quicktime"
/>
</Box>
<Cover />
<Content />
</Box>
)
} else {
return <Static />
}
}
export default Slack

7
components/hackathons/landing.js
View file

@ -29,13 +29,10 @@ export default function Landing() {
variant="ultratitle"
>
<Text variant="eyebrow" sx={{ color: 'white', opacity: 0.875 }}>
This semester, we're helping to kickstart
Welcome to the high school hackathon
</Text>
<Heading as="h1" variant="ultratitle" sx={{ mb: [3, 4] }}>
A renaissance of IRL{' '}
{/* highlight or outline? */}
A renaissance of IRL {/* highlight or outline? */}
{/* <Highlight>high school hackathons.</Highlight> */}
<Text
as="span"

32
components/hackathons/landing2.js
View file

@ -40,17 +40,17 @@ export default function Landing2({ showButton, eventsCount }) {
variant="translucent"
sx={{
variant: 'layout.container',
maxWidth: [null, 700, 1200],
maxWidth: [null, 700, 1000],
borderRadius: 'extra',
p: [3, 4],
position: 'relative',
color: 'black'
}}
>
{/* <Button
<Button
as="a"
variant="cta"
href="https://hack.af/som-stickers"
href="https://hackathons.hackclub.com"
sx={{
backgroundImage: t => t.util.gx('yellow', 'pink'),
position: 'absolute',
@ -62,11 +62,10 @@ export default function Landing2({ showButton, eventsCount }) {
]
}}
>
Get stickers
</Button> */}
Looking for hackathons?
</Button>
<Text as="p" variant="headline" sx={{ mt: 0, color: 'muted' }}>
The last IRL hackathon was 2 years ago. This semester, we're
helping to kickstart
Leading text
</Text>
<Heading
as="h2"
@ -76,7 +75,7 @@ export default function Landing2({ showButton, eventsCount }) {
span: { color: 'white', display: 'block' }
}}
>
A renaissance of IRL{' '}
Welcome to the{' '}
<Text
as="span"
variant="ultratitle"
@ -86,13 +85,22 @@ export default function Landing2({ showButton, eventsCount }) {
WebkitTextFillColor: '#33D6A6'
}}
>
high&nbsp;school&nbsp;hackathons.
high&nbsp;school&nbsp;hackathon.
</Text>
</Heading>
<Text as="p" variant="subtitle" mt={3}>
Hack Club is providing the support and resources to help you
run an amazing event. We're distributing $10k in grants &
providing a space for hackathon organizers to Slack c.
<strong>
It's not an extracurricular or a club. It's not a class or a
lecture.
</strong>{' '}
Hackathons are a place to build things for fun and meet others
doing the same.
</Text>
<Text as="p" variant="subtitle" mt={3}>
To help kickstart a new renaissance for IRL high school
hacakthons this semester, we’re distributing $10,000 in grants
(thanks Gadzooks!) & providing the tools and resources for you
to run the best events.
</Text>
</Card>
{/* <Container

24
components/hackathons/philosophy.js
View file

@ -18,21 +18,20 @@ export default function Philosophy() {
}}
>
<Heading as="h2" sx={{ fontSize: [36, 48] }} color="rgb(115, 45, 228);">
Wack hack wack!
Welcome to the high school hackathon.
</Heading>
<Box sx={{ fontSize: [3, 3] }}>
<strong>The goal of Hack Club is to help you become a hacker.</strong>{' '}
We want a space at every school where people are making interesting
things with code, every week. Schools don’t provide that, so we’re
creating it in every school to make building things accessible to
everyone.
Hackathons are a place to build things for fun and meet others doing
the same. If you're currently a high schoooler, chances are you've
never been to an IRL hackathon. They vanished when the pandemic hit,
and now they're missing from our new normal.
</Box>
</Container>
<Container
sx={{
px: 3,
py: [4, 5],
pb: [4, 5],
color: 'black',
display: 'grid',
textAlign: 'left',
@ -44,14 +43,13 @@ export default function Philosophy() {
}}
>
<Heading as="h2" sx={{ fontSize: [36, 48] }} color="rgb(22, 209, 219);">
Wack hack wack!
Hackathons are just the beginning.
</Heading>
<Box sx={{ fontSize: [3, 3] }}>
<strong>The goal of Hack Club is to help you become a hacker.</strong>{' '}
We want a space at every school where people are making interesting
things with code, every week. Schools don’t provide that, so we’re
creating it in every school to make building things accessible to
everyone.
<strong>We're at our best when we're making.</strong> Hackathons
create a space for people to learn, build, and share their creations.
The hacking doesn't stop there. After the hackathon, attendees will
feel inspired to keep building and sharing their creations.
</Box>
</Container>
</>

6
components/hackathons/rundown.js
View file

@ -6,7 +6,7 @@ export default function Rundown() {
<>
<Box as="header" sx={{ textAlign: [null, 'center'], pt: [4, 5] }}>
<Text as="p" variant="eyebrow">
The rundown
Let's recap
</Text>
<Heading as="h2" variant="title">
Resources so you can organize an{' '}
@ -73,7 +73,7 @@ export default function Rundown() {
icon="bank-account"
color="white"
name="$10k in grants"
desc="We've partnered with ___ to provide $500 grants for IRL high school hackathons this semester."
desc="We've partnered with Gadzooks to provide $500 grants for IRL high school hackathons this semester."
/>
</Card>
<Card
@ -88,7 +88,7 @@ export default function Rundown() {
icon="event-check"
color="white"
name="Marketing"
desc="Listed on the front page of hackathons.hackclub.com & email blasted to subscriber list of xx."
desc="List your event the front page of Google and emailed to high school hackers in your area."
/>
</Card>
</Grid>

62
pages/hackathons.js
View file

@ -11,6 +11,10 @@ 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 Slack from '../components/hackathons/features/slack'
import Money from '../components/hackathons/features/money'
import Landing2 from '../components/hackathons/landing2'
import Marketing from '../components/hackathons/features/marketing'
export default function Hackathons() {
return (
@ -25,47 +29,25 @@ export default function Hackathons() {
image="/hackathons/og-image.png"
/>
<Box as="main">
<Landing />
<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 */}
<Slack />
<Money />
<Marketing />
<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 }}>
{/* old heading for the slack sectoin */}
{/* <Container as="section" sx={{ mt: 5 }}>
<Text as="p" variant="eyebrow">
The Slack community
</Text>
@ -79,16 +61,19 @@ export default function Hackathons() {
mx: [-2, 0],
whiteSpace: 'nowrap',
color: 'white',
bg: '#6f31b7'
bg: 'rgb(255, 212, 64)'
}}
>
best friend
</Text>
.
</Heading>
</Container>
<MovingCards />
<Grid
</Container> */}
{/* <MovingCards /> */}
{/* mdx section that might be useful */}
{/* <Grid
columns={[null, null, 2]}
gap={[3, 4]}
variant="layout.container"
@ -101,9 +86,10 @@ export default function Hackathons() {
}}
>
<Content />
</Grid>
</Grid> */}
<Cta />
{/* boring card cta that shows up at the bottom of mdx pages usually */}
{/* <Cta /> */}
</Box>
</Box>
<Footer key="footer" />