sponsor section

Author: josurodriguez

pages/index.tsx

@@ -7,6 +7,7 @@ import {
   Button,
   Link,
   useColorMode,
+  Center,
 } from '@chakra-ui/core';
 import { GetRoadmapsResponse } from '../api/roadmaps';
 import { Text } from '../components';
@@ -205,6 +206,105 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
           </Flex>
         </Flex>
       </Flex>
+      <Flex
+        w="100%"
+        h="90vh"
+        justifyContent="flex-end"
+        p="3rem"
+        flexWrap="wrap"
+      >
+        <Center
+          width={['100%', '33.3%', '33.3%', '33.3%', '33.3%']}
+          flexDirection="column"
+        >
+          <Text
+            color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
+            fontFamily="Poppins"
+            fontWeight="700"
+            fontSize={['1.2rem', '1.2rem', '2rem', '2.4rem', '2.8rem']}
+            mb="1.5rem"
+          >
+            Nuestros sponsors <span style={{ color: '#f26840' }}>.</span>
+          </Text>
+
+          <Image
+            src="foxbox.jpg"
+            alt="fox-box"
+            w="7rem"
+            h="7rem"
+            margin="0.8rem"
+            borderRadius="0.4rem"
+            style={{ opacity: 0.5 }}
+            _hover={{ opacity: 1 }}
+          />
+          <Link href="https://foxbox.com/">
+            <Text
+              _hover={{ color: '#f26840' }}
+              color="#f26840"
+              fontFamily="Public Sans"
+              fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
+            >
+              fox-box digital
+            </Text>
+          </Link>
+        </Center>
+        <Flex
+          w={['100%', '33.3%', '33.3%', '33.3%', '33.3%']}
+          alignItems="flex-end"
+          justifyContent="flex-end"
+        >
+          <Flex
+            borderWidth="0.1rem"
+            borderColor="#f26840"
+            borderRadius="0.2rem"
+            flexDirection="column"
+            p="1rem"
+            alignItems="center"
+            w={['100%', '17rem', '17rem', '17rem', '20rem']}
+            h={['16rem', '19rem', '19rem', '19rem', '22rem']}
+          >
+            <Text
+              color="#f26840"
+              fontFamily="Poppins"
+              fontWeight="700"
+              textAlign="center"
+              fontSize={['1.1rem', '1.1rem', '1.2rem', '1.2rem', '1.5rem']}
+            >
+              Convertite en Sponsor
+            </Text>
+            <Text
+              color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
+              fontFamily="Public Sans"
+              fontSize={['0.9rem', '0.9rem', '1rem', '1rem', '1.4rem']}
+              textAlign="center"
+            >
+              y ayudanos a ayudar a cada vez mas devs
+              <span style={{ color: '#f26840' }}>.</span>
+            </Text>
+            <Link
+              width={['4rem', '6rem', '6rem', '6rem', '6rem']}
+              href="mailto:hello@coderhood.dev"
+              _hover={{ color: 'gray.300' }}
+              target="_blank"
+              color="gray.300"
+              textAlign="center"
+              fontSize="0.9rem"
+              bg="#f26840"
+              borderRadius="0.2rem"
+              p="0.3rem"
+              mt="0.3rem"
+            >
+              Contactanos
+            </Link>
+            <Image
+              src="rocketsponsor.svg"
+              alt="rocket-sponsor"
+              w="12rem"
+              h="12rem"
+            />
+          </Flex>
+        </Flex>
+      </Flex>
 
       <DiscordConnect />
     </>