import React from 'react'
import {
  Card,
  Box,
  Text,
  Icon,
  Container,
  Flex,
  Link
} from '@hackclub/design-system'

export default () => (
  <Container maxWidth={38}>
    <Link href="challenge">
      <Card bg="blue.1" p={[2, 3]} mt={-2} mb={4}>
        <Flex justify="flex-start">
          <Icon name="open_in_new" size={48} mr={[2, 3]} color="blue.6" />
          <Box color="blue.6">
            <Text f={3} bold>
              Check out the winning challenge submissions
            </Text>
            <Text f={2}>
              Our latest challenge just wrapped up. See the winning projects.
            </Text>
          </Box>
        </Flex>
      </Card>
    </Link>
  </Container>
)

@@ -171,10 +171,18 @@
 th=%7B
+24%7D my=%7B-
 3
-8
 %7D%3E%0A 
@@ -246,23 +246,8 @@
  3%5D%7D
- mt=%7B-2%7D mb=%7B4%7D
 %3E%0A  
@@ -278,16 +278,31 @@
 x-start%22
+ align=%22center%22
 %3E%0A      
@@ -340,10 +340,10 @@
 ze=%7B
+2
 4
-8
 %7D mr
@@ -459,154 +459,21 @@
 out 
-the winning challenge submissions%0A            %3C/Text%3E%0A            %3CText f=%7B2%7D%3E%0A              Our latest challenge just wrapped up. See the winning
+student-built
  pro
@@ -477,17 +477,16 @@
 projects
-.
 %0A       

Simplify project banner on home page