site/pages/relon.js
2022-12-17 20:51:20 -05:00

103 lines
2.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
Avatar,
Badge,
BaseStyles,
Box,
Button,
Container,
Flex,
Grid,
Heading,
Text
} from 'theme-ui'
import {
PillHolder,
AuthorPill,
DatePill
} from '../components/announcements/pills'
import Head from 'next/head'
import NextLink from 'next/link'
import styled from '@emotion/styled'
import theme from '../lib/theme'
import Meta from '@hackclub/meta'
import Nav from '../components/nav'
import ForceTheme from '../components/force-theme'
import Footer from '../components/footer'
import ElonCopy from '../components/announcements/relon.mdx'
import Amount from '../components/announcements/amount'
import SlackCTA from '../components/announcements/cta'
import AnnouncementHolder from '../components/announcements/holder'
const StyledLink = styled.a`
text-decoration: none;
color: ${theme.colors.white};
`
const RelonLink = props => {
const { href } = props
return (
<NextLink href={href} passHref>
<StyledLink>{props.children}</StyledLink>
</NextLink>
)
}
const RelonPage = () => (
<>
<Meta
as={Head}
title="Elon Musk's $1M Donation"
description="Were thrilled to announce Elon Musk has donated $1M to Hack Club, a global nonprofit network of high school hackers & coding clubs."
image="https://cloud-6w46cupdh-hack-club-bot.vercel.app/0social-card.png"
/>
<ForceTheme theme="light" />
<Nav />
<Box
as="section"
sx={{
pt: [5, 6],
pb: [4, 5],
bg: 'rgb(104, 41, 205)',
backgroundImage: theme => theme.util.gx('purple', 'orange')
}}
>
<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'
}
}}
>
Elon Musk is donating <Amount amount="$1,000,000" /> to{' '}
<RelonLink href="/">Hack Club</RelonLink>
</Heading>
</Container>
</Box>
<AnnouncementHolder>
<PillHolder>
<AuthorPill
firstName="Christina"
tag="Christina Asquith, COO"
image="https://hackclub.com/team/christina.jpg"
/>
<AuthorPill
firstName="Zach"
tag="Zach Latta, founder"
image="https://hackclub.com/team/zach.jpg"
/>
<DatePill tag="Oct 8, 2021" />
</PillHolder>
<ElonCopy />
</AnnouncementHolder>
<SlackCTA />
<Footer />
</>
)
export default RelonPage