import { Heading, Text, Link, Flex, Box } from 'rebass'

function HomePage() {
  return (
    <Box
      sx={{
        maxWidth: 1100,
        mx: 'auto',
        px: 3,
        textAlign: 'center',
      }}
    >
      <Heading
        as="h1"
        children="Next.js + Rebass"
        mb={3}
        fontSize={[4, 5, 6]}
      />

      <Box>
        <Flex px={2} color="white" bg="black" alignItems="center">
          <Link
            p={2}
            fontWeight="bold"
            href="https://github.com/vercel/next.js/"
            sx={{
              fontWeight: '600',
              color: 'white',
              textDecoration: 'none',
            }}
          >
            Next.js
          </Link>
          <Box mx="auto" />
          <Link
            variant="nav"
            href="http://jxnblk.com/rebass/"
            sx={{
              fontWeight: '600',
              color: 'white',
              textDecoration: 'none',
            }}
          >
            REBASS
          </Link>
        </Flex>

        <Box>
          <Text center fontSize={3} py={4}>
            "Next.js is a minimalistic framework for server-rendered React
            applications."
          </Text>
        </Box>
        <Box>
          <Text center fontSize={3} py={2}>
            "Functional React UI component library, built with
            styled-components"
          </Text>
        </Box>
      </Box>
    </Box>
  )
}

export default HomePage
