mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
Start Preston-Werner gift page (#78)
* Start Preston-Werner gift page * Minor tweaks to get ready for launch * Custom social card, don't stretch Tom in tiny screens Co-authored-by: Zach Latta <zach@zachlatta.com>
This commit is contained in:
Christina Asquith
GitHub
parent
9250dc4bcf
commit
77a15c0bd5
3 changed files with 208 additions and 0 deletions
11
components/preston-werner/amount.js
Normal file
11
components/preston-werner/amount.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import Sparkles from '../sparkles'
|
||||
|
||||
const Amount = () => (
|
||||
<Sparkles sx={{
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: '2px',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}}>$500,000</Sparkles>
|
||||
)
|
||||
|
||||
export default Amount
|
||||
19
components/preston-werner/copy.mdx
Normal file
19
components/preston-werner/copy.mdx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import Amount from './amount'
|
||||
|
||||
# Today, we're proud to share: Tom and Theresa Preston-Werner are donating <Amount /> to [Hack Club](https://hackclub.com).
|
||||
|
||||
We are deeply grateful for this gift.
|
||||
|
||||
In the coming months, we hope you’ll share our excitement as we make 2 new hires directly serving Hack Clubbers. This gift increases Hack Club’s budget by 60%, and helps us build a diverse foundation at the leadership level of Hack Club as we grow.
|
||||
|
||||
We are so honored to be included among the many gifts the Preston-Werners make each year. This is the 3rd year the Preston-Werners have given a gift to Hack Club, and they've supported the organization from the beginning.
|
||||
|
||||
Tom and Theresa inspire Hack Club's values. They are self-made hackers, passionate about constructing a better world in creative ways. They are deeply committed to environmental protection, women’s rights, ending global poverty and injustice; and are tremendous collaborators in making Hack Club a place where all young people can build and create their own solutions through coding and technology, regardless of their background. They apply rigorous-thinking, curiosity, humility, transparency, and deep expertise in academia and coding to the problems that need solving in the world, and inspire us to do the same.
|
||||
|
||||
The Preston-Werners generously donate dozens of hours of their time each year to Hack Club HQ and Hack Clubbers. Theresa has been a steady champion of Hack Club, supporting us with feedback, advice, editing, and meeting with Hack Club students. Tom is a founding board member and a personal mentor of Zach’s for the last 5 years. Just some of the ways they support Hack Club is that they inspired the idea to launch Hack Club’s “Ask Me Anything” series, and Tom was our first speaker last April. In December 2019, they threw an amazing Christmas party at their San Francisco home for Hack Club.
|
||||
|
||||
Their incredible and generous gift ushers Hack Club into a big new year in which we get closer to our vision to build a new cultural institution for the 21st century akin to the Boy and Girl Scouts, in which we support high schoolers to gain critical computer science skills, healthy, fun and wholesome friendships, and a set of modern values that honor kindness, integrity, inclusivity, curiosity, optimism, and building and doing.
|
||||
|
||||
We send them a huge thank you. To every Hack Clubber: Tom and Theresa are now supporting you and your work, so go forth and do amazing things. We can’t wait to show them what you make.
|
||||
|
||||
—Christina Asquith, COO, and Zach Latta, founder
|
||||
178
pages/preston-werner.js
Normal file
178
pages/preston-werner.js
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
BaseStyles,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import Head from 'next/head'
|
||||
import NextLink from 'next/link'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Nav from '../components/nav'
|
||||
import Icon from '../components/icon'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import Footer from '../components/footer'
|
||||
import PrestonWernerCopy from '../components/preston-werner/copy.mdx'
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<Meta
|
||||
as={Head}
|
||||
title="Tom and Theresa Preston-Werner are Giving $500K"
|
||||
description="We’re thrilled to announce Tom and Theresa Preston-Werner have donated $500k to Hack Club, a global nonprofit network of high school hackers & coding clubs."
|
||||
image="https://workshop-cards.hackclub.com/Preston-Werner%20Gift%20Announcement.png?fontSize=175px&brand=HQ"
|
||||
/>
|
||||
<ForceTheme theme="light" />
|
||||
<Nav />
|
||||
<Box
|
||||
as="section"
|
||||
sx={{
|
||||
pt: [5, 6],
|
||||
pb: [4, 5],
|
||||
bg: 'rgb(104, 41, 205)',
|
||||
backgroundImage: theme => theme.util.gx('yellow', 'red')
|
||||
}}
|
||||
>
|
||||
<Container sx={{ textAlign: 'center', color: 'white' }}>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="title"
|
||||
sx={{
|
||||
fontSize: [5, 6, null, 7],
|
||||
span: {
|
||||
WebkitTextStroke: 'currentColor',
|
||||
WebkitTextStrokeWidth: ['2px', '3px'],
|
||||
WebkitTextFillColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
“I love that Hack Club is <span>helping me make it possible</span>{''} for more students to have opportunities like I had as a young person"
|
||||
</Heading>
|
||||
<Text variant="headline" sx={{ display: 'inline-flex' }}>
|
||||
—
|
||||
<Avatar
|
||||
src="https://avatars.githubusercontent.com/u/1?s=460&v=4"
|
||||
alt="Tom"
|
||||
size={36}
|
||||
mr={2}
|
||||
ml={2}
|
||||
style={{ maxHeight: 36 }}
|
||||
/>
|
||||
Tom Preston-Werner
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
<Container
|
||||
as={BaseStyles}
|
||||
variant="copy"
|
||||
sx={{
|
||||
py: [4, 5],
|
||||
fontSize: [2, 3],
|
||||
h1: {
|
||||
textAlign: ['left', 'center'],
|
||||
color: 'cyan',
|
||||
my: 4,
|
||||
a: { color: 'inherit' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
div: {
|
||||
mt: 0,
|
||||
mb: 2,
|
||||
bg: 'white',
|
||||
color: 'muted',
|
||||
border: '1px solid',
|
||||
borderColor: 'border',
|
||||
bg: 'snow',
|
||||
fontSize: 2,
|
||||
fontWeight: 'body',
|
||||
lineHeight: '36px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
mr: [1, 2],
|
||||
pl: 0,
|
||||
pr: 3,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src="https://cloud-macp9mbpq.vercel.app/0image.png"
|
||||
alt="Christina"
|
||||
size={36}
|
||||
ml={2}
|
||||
mr={2}
|
||||
/>
|
||||
Christina Asquith, COO
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="pill"
|
||||
sx={{
|
||||
mr: [1, 2],
|
||||
pl: 0,
|
||||
pr: 3,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src="https://hackclub.com/team/zach.jpg"
|
||||
alt="Zach"
|
||||
size={36}
|
||||
ml={2}
|
||||
mr={2}
|
||||
/>
|
||||
Zach Latta, founder
|
||||
</Badge>
|
||||
<Badge variant="pill" px={3}>
|
||||
Jan 27, 2021
|
||||
</Badge>
|
||||
</Flex>
|
||||
<PrestonWernerCopy/>
|
||||
</Container>
|
||||
<Box
|
||||
as="section"
|
||||
sx={{
|
||||
bg: 'orange',
|
||||
backgroundImage: t => t.util.gx('yellow', 'orange'),
|
||||
color: 'white',
|
||||
py: [4, 5]
|
||||
}}
|
||||
>
|
||||
<Grid gap={[3, 4]} columns={[null, 'auto 1fr']} variant="layout.copy">
|
||||
<Icon glyph="welcome" size={72} />
|
||||
<Box>
|
||||
<Heading as="h2" variant="headline" mt={0}>
|
||||
Teenager? New here? Welcome!
|
||||
</Heading>
|
||||
<Text variant="subtitle" sx={{ lineHeight: 'caption', mb: 3 }}>
|
||||
Hack Club is a global community of high school hackers & student-led
|
||||
Hack Clubs. Join the community-led 24/7 Hack Club Slack of 11k+ teenagers
|
||||
learning to code & building amazing projects. You’ll fit right in.
|
||||
</Text>
|
||||
<NextLink href="/" passHref>
|
||||
<Button bg="cyan" as="a">
|
||||
Learn more
|
||||
</Button>
|
||||
</NextLink>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
Loading…
Add table
Reference in a new issue