mirror of
https://github.com/System-End/site.git
synced 2026-04-20 00:25:19 +00:00
Add AMAs section
This commit is contained in:
Lachlan Campbell
parent
3c5e37e23b
commit
a81f0da5bc
1 changed files with 177 additions and 95 deletions
272
pages/index.js
272
pages/index.js
|
|
@ -36,6 +36,37 @@ const CardLink = (props) => (
|
|||
/>
|
||||
)
|
||||
|
||||
const Event = ({ title, month, day }) => (
|
||||
<Grid columns="auto 1fr" gap={3} sx={{ alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: 'default',
|
||||
lineHeight: 'caption',
|
||||
textAlign: 'center',
|
||||
border: '3px solid',
|
||||
borderColor: 'primary',
|
||||
width: 60
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bg: 'primary',
|
||||
color: 'white',
|
||||
letterSpacing: 'headline',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 0
|
||||
}}
|
||||
>
|
||||
{month}
|
||||
</Box>
|
||||
<Box sx={{ color: 'white', fontSize: [2, 3] }}>{day}</Box>
|
||||
</Box>
|
||||
<Text as="p" variant="subheadline" sx={{ my: 0 }}>
|
||||
{title}
|
||||
</Text>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
const grad = (theme, from, to) => `radial-gradient(
|
||||
ellipse farthest-corner at top left, ${theme.colors[from] || from}, ${
|
||||
theme.colors[to] || to
|
||||
|
|
@ -140,103 +171,56 @@ export default () => (
|
|||
</Button>
|
||||
</Container>
|
||||
</Box>
|
||||
<Box as="section" sx={{ bg: 'snow', color: 'black', py: [4, 5, 6] }}>
|
||||
<Container>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="title"
|
||||
sx={{ maxWidth: 'copyUltra', span: { display: ['inline', 'block'] } }}
|
||||
>
|
||||
<Text as="span" color="muted">
|
||||
We’re some of the 15 million U.S. high schoolers isolated.{' '}
|
||||
</Text>
|
||||
<Text as="span" color="orange">
|
||||
Here’s how we’re coming together.
|
||||
</Text>
|
||||
</Heading>
|
||||
<Grid
|
||||
columns={[null, 2]}
|
||||
gap={[3, 4]}
|
||||
sx={{
|
||||
mt: [4, 5],
|
||||
'> div': {
|
||||
p: [3, 4],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
// justifyContent: 'center',
|
||||
position: 'relative'
|
||||
},
|
||||
h3: {
|
||||
mt: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
AMAs with some of the most interesting people in tech.
|
||||
</Heading>
|
||||
<Text as="p" sx={{ color: 'muted', fontSize: 2 }}>
|
||||
Elon Musk, Simone Giertz, Tom Preston-Werner, & more
|
||||
</Text>
|
||||
<CardLink href="https://youtu.be/1pn8h2q3Cas">
|
||||
Watch a recent AMA
|
||||
</CardLink>
|
||||
</Card>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
Social coding events to keep you leveling up.
|
||||
</Heading>
|
||||
<CardLink href="https://events.hackclub.com/">
|
||||
See upcoming events
|
||||
</CardLink>
|
||||
</Card>
|
||||
<Card bg="dark" color="white">
|
||||
<Heading
|
||||
as="h3"
|
||||
variant="headline"
|
||||
my={0}
|
||||
sx={{ wordBreak: 'break-word' }}
|
||||
<Box as="section" sx={{ bg: 'dark', color: 'white', py: [4, 5, 6] }}>
|
||||
<Grid
|
||||
variant="layout.container"
|
||||
columns={[null, '1fr 2fr']}
|
||||
gap={[4, 5]}
|
||||
sx={{ alignItems: 'end' }}
|
||||
>
|
||||
<Box as="aside">
|
||||
<Heading as="h2" variant="headline">
|
||||
<Text as="span" variant="title">
|
||||
Weekly AMAs
|
||||
</Text>{' '}
|
||||
with the most interesting people in tech.
|
||||
</Heading>
|
||||
<Grid columns={[2, 'initial']} gap={3} mt={4}>
|
||||
<Event month="April" day={24} title="Elon Musk" />
|
||||
<Event month="April" day={30} title="Jack Conte" />
|
||||
<Event month="May" day={7} title="Simone Giertz" />
|
||||
<Event month="May" day={14} title="Guillermo Rauch" />
|
||||
</Grid>
|
||||
</Box>
|
||||
<Slide up>
|
||||
<Card sx={{ p: [0, 0], lineHeight: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
bg: 'muted',
|
||||
backgroundImage: (theme) => `linear-gradient(#C0CCDA, #8492A6)`,
|
||||
p: 2,
|
||||
lineHeight: 'body',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
Student-run workshops on coding, cooking, drawing, everything.
|
||||
</Heading>
|
||||
<Grid columns={[null, '3fr 2fr']} gap={[3, 4]} mt={3}>
|
||||
<Image
|
||||
src="/home/workshops.jpg"
|
||||
alt="Video call with students going wild"
|
||||
sx={{ borderRadius: 'default', maxWidth: '100%' }}
|
||||
/>
|
||||
<CardLink href="https://youtu.be/Xy_owni1ZVk">
|
||||
Watch a recent live-code
|
||||
</CardLink>
|
||||
</Grid>
|
||||
Weekly Hack Club AMA
|
||||
</Box>
|
||||
<Box
|
||||
as="video"
|
||||
src="https://d2wkqk610zk1ag.cloudfront.net/items/0k222h2k1Z2h1S1y3t0u/chris-cox-ama.mov"
|
||||
controls
|
||||
sx={{
|
||||
width: '100%',
|
||||
borderRadiusBottomLeft: 'default',
|
||||
borderRadiusBottomRight: 'default',
|
||||
mt: '-2px'
|
||||
}}
|
||||
>
|
||||
chris-cox-ama.mov
|
||||
</Box>
|
||||
</Card>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
Online hackathons like the{' '}
|
||||
<Link
|
||||
href="https://covidglobalhackathon.com"
|
||||
sx={{
|
||||
color: '#0f65ff',
|
||||
display: ['inline', 'block'],
|
||||
textDecoration: 'none',
|
||||
':focus,:hover': {
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: '1px',
|
||||
WebkitTextFillColor: (theme) => theme.colors.white,
|
||||
textShadow: '0 0 4px currentColor'
|
||||
}
|
||||
}}
|
||||
>
|
||||
COVID-19 Global Hackathon
|
||||
</Link>{' '}
|
||||
to grow as a developer.
|
||||
</Heading>
|
||||
<CardLink href="https://hackathons.hackclub.com/">
|
||||
See upcoming hackathons
|
||||
</CardLink>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Slide>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box
|
||||
as="section"
|
||||
|
|
@ -394,6 +378,104 @@ export default () => (
|
|||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
<Box as="section" sx={{ bg: 'snow', color: 'black', py: [4, 5, 6] }}>
|
||||
<Container>
|
||||
<Heading
|
||||
as="h2"
|
||||
variant="title"
|
||||
sx={{ maxWidth: 'copyUltra', span: { display: ['inline', 'block'] } }}
|
||||
>
|
||||
<Text as="span" color="muted">
|
||||
We’re some of the 15 million U.S. high schoolers isolated.{' '}
|
||||
</Text>
|
||||
<Text as="span" color="orange">
|
||||
Here’s how we’re coming together.
|
||||
</Text>
|
||||
</Heading>
|
||||
<Grid
|
||||
columns={[null, 2]}
|
||||
gap={[3, 4]}
|
||||
sx={{
|
||||
mt: [4, 5],
|
||||
'> div': {
|
||||
p: [3, 4],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
// justifyContent: 'center',
|
||||
position: 'relative'
|
||||
},
|
||||
h3: {
|
||||
mt: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
AMAs with some of the most interesting people in tech.
|
||||
</Heading>
|
||||
<Text as="p" sx={{ color: 'muted', fontSize: 2 }}>
|
||||
Elon Musk, Simone Giertz, Tom Preston-Werner, & more
|
||||
</Text>
|
||||
<CardLink href="https://youtu.be/1pn8h2q3Cas">
|
||||
Watch a recent AMA
|
||||
</CardLink>
|
||||
</Card>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
Social coding events to keep you leveling up.
|
||||
</Heading>
|
||||
<CardLink href="https://events.hackclub.com/">
|
||||
See upcoming events
|
||||
</CardLink>
|
||||
</Card>
|
||||
<Card bg="dark" color="white">
|
||||
<Heading
|
||||
as="h3"
|
||||
variant="headline"
|
||||
my={0}
|
||||
sx={{ wordBreak: 'break-word' }}
|
||||
>
|
||||
Student-run workshops on coding, cooking, drawing, everything.
|
||||
</Heading>
|
||||
<Grid columns={[null, '3fr 2fr']} gap={[3, 4]} mt={3}>
|
||||
<Image
|
||||
src="/home/workshops.jpg"
|
||||
alt="Video call with students going wild"
|
||||
sx={{ borderRadius: 'default', maxWidth: '100%' }}
|
||||
/>
|
||||
<CardLink href="https://youtu.be/Xy_owni1ZVk">
|
||||
Watch a recent live-code
|
||||
</CardLink>
|
||||
</Grid>
|
||||
</Card>
|
||||
<Card>
|
||||
<Heading as="h3" variant="headline">
|
||||
Online hackathons like the{' '}
|
||||
<Link
|
||||
href="https://covidglobalhackathon.com"
|
||||
sx={{
|
||||
color: '#0f65ff',
|
||||
display: ['inline', 'block'],
|
||||
textDecoration: 'none',
|
||||
':focus,:hover': {
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: '1px',
|
||||
WebkitTextFillColor: (theme) => theme.colors.white,
|
||||
textShadow: '0 0 4px currentColor'
|
||||
}
|
||||
}}
|
||||
>
|
||||
COVID-19 Global Hackathon
|
||||
</Link>{' '}
|
||||
to grow as a developer.
|
||||
</Heading>
|
||||
<CardLink href="https://hackathons.hackclub.com/">
|
||||
See upcoming hackathons
|
||||
</CardLink>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
<Box
|
||||
as="footer"
|
||||
sx={{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue