site/components/hackathons/overview.js

import { Box, Heading, Container, Text, Grid, Flex } from 'theme-ui'
import Photo from '../photo'

export default function Overview() {
  return (
    <>
      <Box as="section" sx={{ py: [4, 5], color: 'black' }}>
        <Container sx={{ width: '95vw' }}>
          <Heading
            sx={{
              fontSize: [36, 50, 50, 50, 48],
              mb: 3,
              color: 'purple'
            }}
          >
            A hackathon is a social coding marathon where teenagers{' '}
            <Highlight>come together</Highlight> to{' '}
            <Highlight>build projects</Highlight> for a weekend and{' '}
            <Highlight>share them with the world</Highlight>.
          </Heading>
          <Grid columns={[null, null, 2]} gap={[3, 4]}>
            <Text as="p" variant="subtitle">
              <Box sx={{ color: 'blue', fontSize: 28, mb: 2 }}>
                The best way to learn is by <b>building</b>.
              </Box>
              A hackathon is a space that helps give makers everything they
              need to start building–mentors, collaborators, inspiration, and
              a goal to work towards. Hackers will leave a hackathon with a
              project of their own, ready and excited to keep hacking once
              they get home.
            </Text>
            <Text as="p" variant="subtitle">
              <Box sx={{ color: 'green', fontSize: 28, mb: 2 }}>
                We're at our best when we're <b>making</b>.
              </Box>
              Hack Club is a global community of thousands of high school
              makers. We're organizers, coders, hackers, painters, engineers,
              musicians, writers, volunteers. We make things. We want others
              to make things too.
            </Text>
          </Grid>
          <Grid columns={[null, null, 2]} gap={[3, 4]} mt={4}>
            <iframe width="100%" height="300px" src="https://www.youtube.com/embed/PnK4gzO6S3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            <iframe width="100%" height="300px" src="https://www.youtube.com/embed/KLx4NZZPzMc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
          </Grid>
        </Container>
      </Box>
    </>
  )
}

function Highlight({ children }) {
  return (
    <Text
      as="span"
      sx={{ bg: 'yellow', borderRadius: 'default', px: 1, color: '#5d114c', lineHeight: '1.3' }}
    >
      {children}
    </Text>
  )
}