mirror of
https://github.com/System-End/site.git
synced 2026-04-19 18:35:12 +00:00
update philanthropy page + footer (#558)
Co-authored-by: Sam Poder <sam.r.poder@gmail.com>
This commit is contained in:
Belle
GitHub
parent
e4b7ebd341
commit
9ce377418a
3 changed files with 713 additions and 111 deletions
|
|
@ -109,8 +109,8 @@ const Footer = ({ dark = false, children, ...props }) => (
|
|||
<NextLink href="/press" passHref>
|
||||
<Link>Press Inquiries</Link>
|
||||
</NextLink>
|
||||
<NextLink href="/donate" passHref>
|
||||
<Link>Donate</Link>
|
||||
<NextLink href="/philanthropy" passHref>
|
||||
<Link>Support Us</Link>
|
||||
</NextLink>
|
||||
</Box>
|
||||
<Box>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,29 @@ import { keyframes } from '@emotion/react'
|
|||
import Image from 'next/image'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Head from 'next/head'
|
||||
import Nav from '../components/nav'
|
||||
import ForceTheme from '../components/force-theme'
|
||||
import Footer from '../components/footer'
|
||||
import Nav from '../../components/nav'
|
||||
import ForceTheme from '../../components/force-theme'
|
||||
import Footer from '../../components/footer'
|
||||
import ReactBeforeSliderComponent from 'react-before-after-slider-component'
|
||||
import 'react-before-after-slider-component/dist/build.css'
|
||||
import Fade from 'react-reveal/Fade'
|
||||
import Slide from 'react-reveal/Slide'
|
||||
import Marquee from 'react-marquee-slider'
|
||||
import ExecuteBig from '../../public/donate/codedaydc_hack.jpg'
|
||||
import HackCamp from '../../public/donate/sf.jpg'
|
||||
import HackerGames from '../../public/donate/0img_20210830_161125.jpg'
|
||||
import LaptopDonations from '../../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
|
||||
import Kerala from '../../public/donate/0img-20210918-wa0091.jpg'
|
||||
import HackPenn from '../../public/donate/0color_pop.jpg'
|
||||
import ElonAMA from '../../public/donate/elon.jpg'
|
||||
import SpaceX from '../../public/donate/0spacex_and_hack_club.jpg'
|
||||
import Flagship from '../../public/donate/flagship.png'
|
||||
import MAHacks from '../../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
|
||||
import HackCamp2020 from '../../public/donate/0img_6447.jpg'
|
||||
import InnovationCircuit from '../../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
|
||||
import WindyCity from '../../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
|
||||
import ZephyrFun from '../../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
|
||||
import GoldenTrain from '../../public/home/golden-train.png'
|
||||
|
||||
/** @jsxImportSource theme-ui */
|
||||
|
||||
|
|
@ -36,6 +52,47 @@ import {
|
|||
ResponsiveContainer
|
||||
} from 'recharts'
|
||||
|
||||
const Header = styled(Box)`
|
||||
background: url('/pattern.svg');
|
||||
`
|
||||
|
||||
const PhotoRow = ({ photos }) => (
|
||||
<Box sx={{ height: '160px', overflow: 'hidden' }}>
|
||||
<Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
|
||||
<Marquee velocity={12}>
|
||||
{photos.map((photo, index) => (
|
||||
<Image
|
||||
placeholder="blur"
|
||||
src={photo}
|
||||
objectFit="cover"
|
||||
className="next-image"
|
||||
height="200px"
|
||||
width="300px"
|
||||
alt="Hack Club students"
|
||||
key={'image-' + index}
|
||||
/>
|
||||
))}
|
||||
</Marquee>
|
||||
</Box>
|
||||
<Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
|
||||
<Marquee velocity={12}>
|
||||
{photos.map((photo, index) => (
|
||||
<Image
|
||||
placeholder="blur"
|
||||
src={photo}
|
||||
objectFit="cover"
|
||||
className="next-image"
|
||||
height="200px"
|
||||
width="600px"
|
||||
key={'image-' + index}
|
||||
alt="Hack Club students"
|
||||
/>
|
||||
))}
|
||||
</Marquee>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
||||
const data = [
|
||||
{ name: '3452 Members', Teenagers: 3452, year: '2018' },
|
||||
{ name: '6932 Members', Teenagers: 6932, year: '2019' },
|
||||
|
|
@ -81,7 +138,8 @@ const Stat = ({ num, words, background }) => {
|
|||
backgroundPosition: '10% -20%',
|
||||
display: 'flex',
|
||||
gap: 2,
|
||||
textAlign: 'left'
|
||||
textAlign: 'left',
|
||||
fontSize: ['14px', '16px', '18px']
|
||||
}}
|
||||
>
|
||||
<Text as="h2" sx={{ color: '#ec3750' }}>
|
||||
|
|
@ -97,7 +155,7 @@ const Graph = () => {
|
|||
<>
|
||||
<Box sx={{ my: 'auto' }}>
|
||||
<Heading as="h2" sx={{ textAlign: 'center' }}>
|
||||
Teenagers in slack per year
|
||||
Teenagers in Slack per year
|
||||
</Heading>
|
||||
<ResponsiveContainer
|
||||
width="90%"
|
||||
|
|
@ -114,10 +172,10 @@ const Graph = () => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
{/* <Tooltip
|
||||
cursor={false}
|
||||
contentStyle={{ border: 'none', borderRadius: 5, opacity: 0.9 }}
|
||||
/>
|
||||
/> */}
|
||||
<Bar type="monotone" dataKey="Teenagers" fill="#1f2d3d" />
|
||||
<YAxis />
|
||||
<XAxis dataKey="year"></XAxis>
|
||||
|
|
@ -272,17 +330,18 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<ForceTheme theme="light" />
|
||||
<Nav color="white" />
|
||||
<Box sx={{ overflowX: 'hidden' }}>
|
||||
<Box
|
||||
{/* <Box
|
||||
sx={{
|
||||
width: '100vw',
|
||||
height: '50vh',
|
||||
// maxHeight: '1400px',
|
||||
maxHeight: '1400px',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundImage:
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://cloud-51qsxafpt-hack-club-bot.vercel.app/0hackpenn_1__1___1_-min.jpg)',
|
||||
'linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://cloud-51qsxafpt-hack-club-bot.vercel.app/0hackpenn_1__1___1_-min.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'top center'
|
||||
}}
|
||||
|
|
@ -298,37 +357,156 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
>
|
||||
Investing in the future
|
||||
</Text>
|
||||
<Fade bottom delay={90}>
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
my={3}
|
||||
sx={{ width: ['100%', 'auto'] }}
|
||||
as="a"
|
||||
href="https://bank.hackclub.com/donations/start/hq"
|
||||
>
|
||||
Donate
|
||||
<Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
|
||||
to Hack Club
|
||||
</Text>
|
||||
</Button>
|
||||
<Text
|
||||
sx={{ mt: 1, display: 'block', opacity: 0.8 }}
|
||||
fontSize={2}
|
||||
color="white"
|
||||
>
|
||||
Your contribution is tax-deductible.
|
||||
<br />
|
||||
Hack Club is a 501(c)(3) nonprofit with the EIN 81-2908499.
|
||||
</Text>
|
||||
</Fade>
|
||||
</Box>
|
||||
</Box> */}
|
||||
<Header sx={{ position: 'relative' }}>
|
||||
<Box
|
||||
sx={{
|
||||
background: 'rgba(0,0,0, 0.8)',
|
||||
zIndex: 1,
|
||||
position: 'relative',
|
||||
color: 'white!important',
|
||||
height: '480px'
|
||||
}}
|
||||
pt={[5, 5, '110px']}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '64rem',
|
||||
mx: 'auto',
|
||||
zIndex: 1,
|
||||
position: 'relative'
|
||||
}}
|
||||
align="center"
|
||||
py={2}
|
||||
px={[1, 3]}
|
||||
>
|
||||
<Container sx={{ maxWidth: '48rem' }}>
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: ['42px', '54px', '72px'],
|
||||
my: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
Invest in the future.
|
||||
</Heading>
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: ['22px', '23px', '28px'],
|
||||
maxWidth: '40rem',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
Contribute today to empower the next generation.
|
||||
</Box>
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
my={3}
|
||||
sx={{ width: ['100%', 'auto'] }}
|
||||
as="a"
|
||||
href="https://bank.hackclub.com/donations/start/hq"
|
||||
>
|
||||
Donate
|
||||
<Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
|
||||
to Hack Club
|
||||
</Text>
|
||||
</Button>
|
||||
<Text
|
||||
sx={{ mt: 1, display: 'block', opacity: 0.8 }}
|
||||
fontSize={2}
|
||||
color="white"
|
||||
>
|
||||
Your contribution is tax-deductible.
|
||||
<br />
|
||||
Hack Club is a 501(c)(3) nonprofit with the EIN 81-2908499.
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
zIndex: 0,
|
||||
width: '100%',
|
||||
display: 'block'
|
||||
}}
|
||||
>
|
||||
<PhotoRow
|
||||
photos={[
|
||||
ExecuteBig,
|
||||
HackCamp,
|
||||
HackerGames,
|
||||
LaptopDonations,
|
||||
Kerala
|
||||
]}
|
||||
/>
|
||||
<PhotoRow
|
||||
photos={[HackPenn, ElonAMA, SpaceX, GoldenTrain, Flagship]}
|
||||
/>
|
||||
<PhotoRow
|
||||
photos={[
|
||||
HackCamp2020,
|
||||
InnovationCircuit,
|
||||
WindyCity,
|
||||
MAHacks,
|
||||
ZephyrFun
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Header>
|
||||
<Container
|
||||
sx={{
|
||||
width: 'container',
|
||||
margin: 'auto',
|
||||
'p, li': {
|
||||
fontSize: '1.2em',
|
||||
color: 'slate'
|
||||
'p, li, a': {
|
||||
fontSize: '1.3em'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Fade bottom>
|
||||
<Fade bottom delay={60}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mt: 4
|
||||
mt: 4,
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<Text as="h1">
|
||||
<Quote>“</Quote>With major support, I am confident Hack Club
|
||||
will change the world.<Quote>”</Quote>
|
||||
</Text>
|
||||
<Text as="p" sx={{ color: 'muted' }}>
|
||||
<Text as="p">
|
||||
—Tom Preston-Werner, GitHub Co-founder
|
||||
</Text>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Line />
|
||||
<Fade bottom>
|
||||
<Text as="h2" mb={2}>
|
||||
<Text as="h1" mb={2} mt={4}>
|
||||
In the next ten years, Hack Club will discover, foster and inspire
|
||||
thousands more teenagers to use technical skills to solve
|
||||
problems.
|
||||
|
|
@ -408,16 +586,11 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Grid>
|
||||
<Fade bottom>
|
||||
<Text as="h2" mt={5}>
|
||||
Make a gift:
|
||||
To discuss a gift:
|
||||
</Text>
|
||||
</Fade>
|
||||
<Fade bottom>
|
||||
<Grid
|
||||
gap={[4, 2, 2]}
|
||||
columns={[1, '2fr 1fr', '2fr 1fr']}
|
||||
mt={2}
|
||||
sx={{ color: 'muted' }}
|
||||
>
|
||||
<Grid gap={[4, 2, 2]} columns={[1, '2fr 1fr', '2fr 1fr']} mt={2}>
|
||||
<Box>
|
||||
<Text as="h4">The Hack Foundation</Text>
|
||||
<Text as="p" sx={{ width: '70%' }}>
|
||||
|
|
@ -427,10 +600,21 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Text as="p">EIN: 81-2908499</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text as="h4">Contact</Text>
|
||||
<Text as="h4">Reach out to</Text>
|
||||
<Text as="p">Christina Asquith</Text>
|
||||
<Text as="p">Co-founder, COO, and Board Member</Text>
|
||||
<Text as="a">christina@hackclub.com</Text>
|
||||
<Text
|
||||
as="a"
|
||||
href="mailto:christina@hackclub.com"
|
||||
sx={{
|
||||
':link': {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
christina@hackclub.com
|
||||
</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Fade>
|
||||
|
|
@ -440,7 +624,11 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
mt={2}
|
||||
href="https://bank.hackclub.com/donations/start/hq"
|
||||
target="_blank"
|
||||
sx={{ color: '#ec3750', textDecoration: 'none' }}
|
||||
sx={{
|
||||
color: '#ec3750',
|
||||
textDecoration: 'none',
|
||||
fontSize: '1.2em'
|
||||
}}
|
||||
>
|
||||
Donate ▶
|
||||
</Text>
|
||||
|
|
@ -458,9 +646,11 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
>
|
||||
<Container sx={{ textAlign: 'center' }}>
|
||||
<Fade bottom>
|
||||
<Text as="h1">Hack Club is already making a difference!</Text>
|
||||
<Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
|
||||
Hack Club is already making a difference!
|
||||
</Text>
|
||||
</Fade>
|
||||
<Grid my="4" gap={2} columns={[1, 1, 2]}>
|
||||
<Grid my="4" gap={2} columns={[1, 1, 1, 2]}>
|
||||
<Fade bottom delay={30}>
|
||||
<Graph />
|
||||
</Fade>
|
||||
|
|
@ -480,7 +670,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Fade bottom delay={120}>
|
||||
<Stat
|
||||
num="400"
|
||||
words="active Hack Clubs around the world"
|
||||
words="Hack Clubs around the world"
|
||||
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:event-code.svg"
|
||||
/>
|
||||
</Fade>
|
||||
|
|
@ -489,7 +679,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
num="500"
|
||||
words="nonprofits supported"
|
||||
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:member-add.svg"
|
||||
></Stat>
|
||||
/>
|
||||
</Fade>
|
||||
<Fade bottom delay={180}>
|
||||
<Stat
|
||||
|
|
@ -508,29 +698,34 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Box>
|
||||
</Grid>
|
||||
<Fade delay={210} bottom>
|
||||
<Text as="h2">
|
||||
“Hack Club helped me fall in love with creating and made me feel
|
||||
like I belong.”
|
||||
</Text>
|
||||
<Text as="h2">
|
||||
“Hack Club helped me fall in love with creating and made me feel
|
||||
like I belong.”
|
||||
</Text>
|
||||
<Text
|
||||
sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}
|
||||
>
|
||||
<Image
|
||||
src="/philanthropy/belle.png"
|
||||
width="20"
|
||||
height="20"
|
||||
sx={{ borderRadius: '100%' }}
|
||||
/>
|
||||
Belle, 17, Malaysia
|
||||
</Text>
|
||||
</Fade>
|
||||
<Text sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
|
||||
<Image
|
||||
src="/philanthropy/belle.png"
|
||||
width="20"
|
||||
height="20"
|
||||
sx={{ borderRadius: '100%' }}
|
||||
/>
|
||||
Belle, 17, Malaysia
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
<Container
|
||||
sx={{
|
||||
width: 'container',
|
||||
margin: 'auto',
|
||||
'p, li': {
|
||||
fontSize: '1.2em',
|
||||
color: 'slate'
|
||||
px: [2, 3, 4],
|
||||
'p, li, a': {
|
||||
fontSize: '1.3em'
|
||||
},
|
||||
h1: {
|
||||
fontSize: ['28px', '28px', '36px']
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
|
@ -590,42 +785,122 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Box>
|
||||
<Fade bottom>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Tom Preston-Werner</b>
|
||||
</Text>
|
||||
<Text as="p">Co-founder, GitHub</Text>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '100%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundImage: `url(https://cloud-80nhjzldl-hack-club-bot.vercel.app/0.jpeg)`,
|
||||
backgroundSize: 'cover',
|
||||
marginRight: 2
|
||||
}}
|
||||
></Box>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Tom Preston-Werner</b>
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{
|
||||
lineHeight: '1em',
|
||||
fontSize: '1.1em !important',
|
||||
fontSize: '1.1em !important'
|
||||
}}
|
||||
>
|
||||
Co-founder, GitHub
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Fade bottom delay={200}>
|
||||
<br />
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Quinn Slack</b>
|
||||
</Text>
|
||||
<Text as="p">Co-founder and CEO, Sourcegraph</Text>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '100%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundImage: `url(https://philanthropy.hackclub.com/_next/image?url=/quinn.png&w=1200&q=75)`,
|
||||
backgroundSize: 'cover',
|
||||
marginRight: 2
|
||||
}}
|
||||
></Box>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Quinn Slack</b>
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
|
||||
>
|
||||
Co-founder and CEO, Sourcegraph
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Fade bottom delay={400}>
|
||||
<br />
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Zach Latta</b>
|
||||
</Text>
|
||||
<Text as="p">Founder and Executive Director, Hack Club</Text>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '100%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundImage: `url(/team/zach.jpg)`,
|
||||
backgroundSize: 'cover',
|
||||
marginRight: 2
|
||||
}}
|
||||
></Box>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Zach Latta</b>
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
|
||||
>
|
||||
Founder and Executive Director, Hack Club
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Fade bottom delay={600}>
|
||||
<br />
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Christina Asquith</b>
|
||||
</Text>
|
||||
<Text as="p">Co-founder and COO, Hack Club</Text>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '100%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundImage: `url(/team/christina.jpg)`,
|
||||
backgroundSize: 'cover',
|
||||
marginRight: 2
|
||||
}}
|
||||
></Box>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
<b>Christina Asquith</b>
|
||||
</Text>
|
||||
<Text
|
||||
as="p"
|
||||
sx={{ lineHeight: '1em', fontSize: '1.1em !important' }}
|
||||
>
|
||||
Co-founder and COO, Hack Club
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Fade bottom delay={800}>
|
||||
<br />
|
||||
<Text sx={{ color: 'muted', fontSize: '80%' }}>
|
||||
<Text sx={{ color: 'muted', fontSize: '90%' }}>
|
||||
Board advisor: John Abele (Founder, Boston Scientific)
|
||||
</Text>
|
||||
</Fade>
|
||||
|
|
@ -663,7 +938,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Line />
|
||||
<Box>
|
||||
<Fade bottom>
|
||||
<Text as="h1">We're grateful to our supporters:</Text>
|
||||
<Text as="h1">Join our community of generous donors</Text>
|
||||
</Fade>
|
||||
<Grid gap={2} columns={[2, 4, 4]} mt={2}>
|
||||
<Box>
|
||||
|
|
@ -743,6 +1018,28 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Fade bottom delay={300}>
|
||||
<Text
|
||||
as="a"
|
||||
mt={2}
|
||||
href="/philanthropy/supporters"
|
||||
target="_blank"
|
||||
sx={{
|
||||
color: 'slate',
|
||||
textDecoration: 'none',
|
||||
fontSize: '1.1em !important',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#f9fafc',
|
||||
borderRadius: '50px',
|
||||
transition: '0.5s ease',
|
||||
':hover': {
|
||||
backgroundColor: '#e0e6ed',
|
||||
}
|
||||
}}
|
||||
>
|
||||
and many more...
|
||||
</Text>
|
||||
</Fade>
|
||||
<Fade bottom>
|
||||
<Text as="h2" mt={4} mb={2}>
|
||||
A few others who support Hack Club
|
||||
|
|
@ -823,8 +1120,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Heading>
|
||||
<Heading
|
||||
fontSize={[4, 5]}
|
||||
sx={{ fontWeight: '700', fontSize: ['18px', '22px'] }}
|
||||
as="h1"
|
||||
sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
|
||||
>
|
||||
Thanks to our donor-funded laptop program, Hack Club sent him
|
||||
a MacBook Air. In his Hack Club, Obrey and his best friend
|
||||
|
|
@ -856,8 +1152,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Heading>
|
||||
<Heading
|
||||
fontSize={[4, 5]}
|
||||
sx={{ fontWeight: '700', fontSize: ['18px', '22px'] }}
|
||||
as="h1"
|
||||
sx={{ fontWeight: '700', fontSize: ['18px', '20px', '22px'] }}
|
||||
>
|
||||
At 16, she started her own club Hack Club, and 20 other
|
||||
students joined. She raised funds on Hack Club Bank to run a
|
||||
|
|
@ -882,15 +1177,43 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Q>
|
||||
</Fade>
|
||||
</Grid>
|
||||
<Fade bottom>
|
||||
{/* <Grid gap={[4, 2, 2]} columns={[1, '1fr 1fr', '1fr 1fr']} mt={2} sx={{color: 'muted'}}> */}
|
||||
<Box sx={{ color: 'muted' }}>
|
||||
<Text as="p" sx={{ fontWeight: '700' }}>
|
||||
Reach out to discuss a gift
|
||||
</Text>
|
||||
<Text as="p">
|
||||
Christina Asquith,{' '}
|
||||
<Text
|
||||
as="a"
|
||||
href="mailto:christina@hackclub.com"
|
||||
sx={{
|
||||
':link': {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
fontSize: '1em !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
christina@hackclub.com
|
||||
</Text>
|
||||
</Text>
|
||||
<Text as="p" sx={{ fontSize: '90% !important' }}>
|
||||
Hack Club is a 501(c)(3) nonprofit with the EIN 81-2908499.
|
||||
</Text>
|
||||
</Box>
|
||||
{/* </Grid> */}
|
||||
</Fade>
|
||||
<Line />
|
||||
<Fade bottom>
|
||||
<Text as="h1" sx={{ textAlign: 'center' }} mb={4}>
|
||||
<Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
|
||||
Hack Club invites the 21st century’s leading thinkers, builders
|
||||
and disrupters to join our small, core network of donors with a
|
||||
gift.
|
||||
</Text>
|
||||
</Fade>
|
||||
<Grid columns={['1fr', '1fr', '0.8fr 1.2fr']}>
|
||||
<Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
|
||||
<Fade bottom>
|
||||
<Box>
|
||||
<Text as="p">
|
||||
|
|
@ -904,10 +1227,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Text as="p">
|
||||
Founded in 2014, Hack Club grew 700 percent during the
|
||||
COVID-19 pandemic, and Hack Club’s team of engineers can’t
|
||||
keep up with demand. With your gift, Hack Club could increase
|
||||
support to serve thousands more teenagers, with a strong focus
|
||||
on serving those who face additional barriers to contributing
|
||||
their talents to the world.
|
||||
keep up with demand.
|
||||
</Text>
|
||||
</Box>
|
||||
</Fade>
|
||||
|
|
@ -919,6 +1239,13 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</Text>
|
||||
</Fade>
|
||||
<ul>
|
||||
<Fade bottom>
|
||||
<li>
|
||||
Increase support to serve thousands more teenagers, with a
|
||||
strong focus on serving those who face additional barriers to
|
||||
contributing their talents to the world
|
||||
</li>
|
||||
</Fade>
|
||||
<Fade bottom delay={30}>
|
||||
<li>
|
||||
Create hundreds more Hack Clubs in high schools and communities
|
||||
|
|
@ -972,38 +1299,40 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
</li>
|
||||
</Fade>
|
||||
</ul>
|
||||
<Fade bottom delay={350}>
|
||||
<Text as="h2" sx={{ mb: 0, pb: 0, mt: 2 }}>
|
||||
Thank you for your consideration!
|
||||
</Text>
|
||||
</Fade>
|
||||
<Fade bottom delay={380}>
|
||||
<Text as="h2" sx={{ mt: 0 }}>
|
||||
Sincerely,
|
||||
</Text>
|
||||
</Fade>
|
||||
<Flex mb={4}>
|
||||
<Fade bottom delay={410}>
|
||||
<Box sx={{ marginRight: 3 }}>
|
||||
<Image
|
||||
src="/philanthropy/christina-s.png"
|
||||
width={250}
|
||||
height={100}
|
||||
/>
|
||||
<Text as="p">Christina Asquith, Co-founder and COO</Text>
|
||||
</Box>
|
||||
<Box my={4}>
|
||||
<Fade bottom delay={350}>
|
||||
<Text as="h2" sx={{ mb: 0, pb: 0, mt: 2 }}>
|
||||
Thank you for your consideration!
|
||||
</Text>
|
||||
</Fade>
|
||||
<Fade bottom delay={440}>
|
||||
<Box>
|
||||
<Image
|
||||
src="/philanthropy/zach-s.png"
|
||||
width={150}
|
||||
height={100}
|
||||
/>
|
||||
<Text as="p">Zach Latta, Founder and Executive Director</Text>
|
||||
</Box>
|
||||
<Fade bottom delay={380}>
|
||||
<Text as="h2" sx={{ mt: 0 }}>
|
||||
Sincerely,
|
||||
</Text>
|
||||
</Fade>
|
||||
</Flex>
|
||||
<Flex mb={4}>
|
||||
<Fade bottom delay={410}>
|
||||
<Box sx={{ marginRight: 3 }}>
|
||||
<Image
|
||||
src="/philanthropy/christina-s.png"
|
||||
width={250}
|
||||
height={100}
|
||||
/>
|
||||
<Text as="p">Christina Asquith, Co-founder and COO</Text>
|
||||
</Box>
|
||||
</Fade>
|
||||
<Fade bottom delay={440}>
|
||||
<Box>
|
||||
<Image
|
||||
src="/philanthropy/zach-s.png"
|
||||
width={150}
|
||||
height={100}
|
||||
/>
|
||||
<Text as="p">Zach Latta, Founder and Executive Director</Text>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Fade bottom delay={200}>
|
||||
<Grid
|
||||
gap={4}
|
||||
|
|
@ -1012,7 +1341,7 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
sx={{ color: 'muted' }}
|
||||
>
|
||||
<Box>
|
||||
<Text as="h4">The Hack Foundation</Text>
|
||||
<Text as="h3">The Hack Foundation</Text>
|
||||
<Text as="p" sx={{ width: '70%' }}>
|
||||
Address: The Hack Foundation at 8605 Santa Monica Blvd #86294,
|
||||
West Hollywood, CA, 90069
|
||||
|
|
@ -1020,10 +1349,21 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
<Text as="p">EIN: 81-2908499</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text as="h4">Contact</Text>
|
||||
<Text as="h3">Reach out to</Text>
|
||||
<Text as="p">Christina Asquith</Text>
|
||||
<Text as="p">Co-founder, COO, and Board Member</Text>
|
||||
<Text as="a">christina@hackclub.com</Text>
|
||||
<Text
|
||||
as="a"
|
||||
href="mailto:christina@hackclub.com"
|
||||
sx={{
|
||||
':link': {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
christina@hackclub.com
|
||||
</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Fade>
|
||||
|
|
@ -1033,10 +1373,16 @@ const Philanthropy = ({ posts = [] }) => {
|
|||
href="/philanthropy/hackclub.pdf"
|
||||
download="HackClub"
|
||||
mb={4}
|
||||
sx={{fontSize: '1em !important'}}
|
||||
>
|
||||
Download as PDF
|
||||
</Button>
|
||||
</Fade>
|
||||
<Fade bottom>
|
||||
<Text as="p" sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}>
|
||||
Site by Belle, 17, Hack Clubber
|
||||
</Text>
|
||||
</Fade>
|
||||
</Container>
|
||||
<Footer />
|
||||
</Box>
|
||||
256
pages/philanthropy/supporters.js
Normal file
256
pages/philanthropy/supporters.js
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
Card,
|
||||
Grid,
|
||||
Link as A,
|
||||
Text,
|
||||
Avatar
|
||||
} from 'theme-ui'
|
||||
import Photo from '../../components/photo'
|
||||
import Image from 'next/image'
|
||||
import Head from 'next/head'
|
||||
import Meta from '@hackclub/meta'
|
||||
import ForceTheme from '../../components/force-theme'
|
||||
import Nav from '../../components/nav'
|
||||
import Sponsors from '../../components/donate/sponsors'
|
||||
import donors from '../../components/donate/donors.json'
|
||||
import Footer from '../../components/footer'
|
||||
|
||||
|
||||
const Header = styled(Box)`
|
||||
background: url('/pattern.svg');
|
||||
`
|
||||
|
||||
const Sheet = styled(Card)`
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
`
|
||||
Sheet.defaultProps = {
|
||||
sx: {
|
||||
bg: 'rgba(255, 255, 255, 0.875)',
|
||||
p: [3, 4],
|
||||
color: 'black',
|
||||
width: 1,
|
||||
mb: 4
|
||||
}
|
||||
}
|
||||
|
||||
const Row = styled(Box)`
|
||||
text-align: left;
|
||||
@media screen and (min-width: 48em) {
|
||||
display: grid;
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: ${({ reverse }) =>
|
||||
reverse ? '3fr 2fr' : '2fr 3fr'};
|
||||
}
|
||||
`
|
||||
|
||||
Sheet.defaultProps = {
|
||||
sx: {
|
||||
maxWidth: '52rem',
|
||||
fontSize: 3,
|
||||
p: [4, 5],
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
|
||||
|
||||
const contentContainer = {
|
||||
maxWidth: 72,
|
||||
width: 1,
|
||||
p: 3,
|
||||
color: 'black',
|
||||
style: { position: 'relative' }
|
||||
}
|
||||
const content = { maxWidth: 48, mx: 0, color: 'black' }
|
||||
|
||||
const title = 'Donate'
|
||||
const desc =
|
||||
'Contribute today to empower the next generation and help start a coding club at every high school.'
|
||||
|
||||
const DonorGrid = styled(Box)`
|
||||
display: grid;
|
||||
grid-gap: 6px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
align-items: center;
|
||||
p,
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
grid-gap: 18px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
|
||||
}
|
||||
`
|
||||
|
||||
const DonorCardBase = styled(Sheet)`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@media screen and (max-width: 32em) {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
`
|
||||
const DonorCard = ({ name, link = false }) => (
|
||||
<DonorCardBase bg="white" p="18px!important" mb={0}>
|
||||
<Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
|
||||
{name}
|
||||
</Text>
|
||||
</DonorCardBase>
|
||||
)
|
||||
const DonorListing = ({ name, url }) => {
|
||||
if (url) {
|
||||
return (
|
||||
<A target="_blank" href={url} color="black" underline>
|
||||
<DonorCard name={name} link />
|
||||
</A>
|
||||
)
|
||||
} else {
|
||||
return <DonorCard name={name} />
|
||||
}
|
||||
}
|
||||
|
||||
export default function Donate({ sprig }) {
|
||||
useEffect(() => {
|
||||
if (sprig) {
|
||||
window.document.getElementById('sprig-donation').scrollIntoView()
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
<Box>
|
||||
<Meta
|
||||
as={Head}
|
||||
title={title}
|
||||
description={desc}
|
||||
image="https://cloud-cz9a6kt0a-hack-club-bot.vercel.app/0social-photo_2.jpg"
|
||||
/>
|
||||
<Nav color="muted" />
|
||||
<ForceTheme theme="light" />
|
||||
<Header sx={{ position: 'relative' }}>
|
||||
<Box
|
||||
sx={{
|
||||
background: 'rgba(0,0,0, 0.8)',
|
||||
zIndex: 1,
|
||||
position: 'relative',
|
||||
color: 'white!important',
|
||||
height: '600px'
|
||||
}}
|
||||
pt={[5, 5, '110px']}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: '64rem',
|
||||
mx: 'auto',
|
||||
zIndex: 1,
|
||||
position: 'relative'
|
||||
}}
|
||||
align="center"
|
||||
py={2}
|
||||
px={[1, 3]}
|
||||
>
|
||||
<Container sx={{ maxWidth: '48rem' }}>
|
||||
<Heading
|
||||
sx={{
|
||||
fontSize: ['42px', '54px', '72px'],
|
||||
my: 2,
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
We rely on people like you to bring coding to the world.
|
||||
</Heading>
|
||||
<Box
|
||||
sx={{
|
||||
fontSize: ['22px', '23px', '28px'],
|
||||
maxWidth: '40rem',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
Contribute today to empower the next generation. Help start a
|
||||
Hack Club at every high school.
|
||||
</Box>
|
||||
<Button
|
||||
variant="ctaLg"
|
||||
my={3}
|
||||
sx={{ width: ['100%', 'auto'] }}
|
||||
as="a"
|
||||
href="https://bank.hackclub.com/donations/start/hq"
|
||||
>
|
||||
Donate
|
||||
<Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
|
||||
to Hack Club
|
||||
</Text>
|
||||
</Button>
|
||||
<Text
|
||||
sx={{ mt: 1, display: 'block', opacity: 0.8 }}
|
||||
fontSize={2}
|
||||
color="white"
|
||||
>
|
||||
Your contribution is tax-deductible.
|
||||
<br />
|
||||
Hack Club is a 501(c)(3) nonprofit with the EIN 81-2908499.
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
</Header>
|
||||
<Flex justify="center" bg="snow" color="black">
|
||||
<Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
|
||||
<Heading
|
||||
px={3}
|
||||
mt={[3, 4]}
|
||||
mb={[3, 4]}
|
||||
mx="auto"
|
||||
as="h1"
|
||||
sx={{ fontSize: [5, 6] }}
|
||||
>
|
||||
A few of our amazing donors.
|
||||
</Heading>
|
||||
<DonorGrid mt={4} mb={4}>
|
||||
{Object.keys(donors).map(name => (
|
||||
<DonorListing key={name} name={name} url={donors[name]} />
|
||||
))}
|
||||
</DonorGrid>
|
||||
<Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
|
||||
and many more…
|
||||
</Heading>
|
||||
</Container>
|
||||
</Flex>
|
||||
<Container {...contentContainer}>
|
||||
<Row my={5} {...content}>
|
||||
<Heading {...subhline} mb={4} sx={{ fontSize: [4, 5] }}>
|
||||
These fabulous companies donate their products to us.
|
||||
</Heading>
|
||||
<Sponsors />
|
||||
</Row>
|
||||
<Button
|
||||
as="a"
|
||||
href="/philanthropy"
|
||||
target="_blank"
|
||||
mb={4}
|
||||
sx={{fontSize: '1em !important', background: 'slate', textAlign: 'center'}}
|
||||
>
|
||||
Learn more about Hack Club
|
||||
</Button>
|
||||
</Container>
|
||||
<Footer />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
return {
|
||||
props: {
|
||||
sprig: Object.keys(context.query).includes('gl')
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue