Feature/footer

components/DiscordConnect.tsx → components/DiscordInvite.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Flex, Image, SimpleGrid, Button, Link } from '@chakra-ui/core';
+import { Flex, Button, Link } from '@chakra-ui/core';
 import { Text } from '../components';
 
-const DiscordConnect = () => (
+const DiscordInvite = () => (
   <>
     <Flex
       w="100%"
-      h="50vh"
-      alignItems="center"
+      h="17rem"
+      alignItems="flex-end"
       justifyContent="center"
       bg="#f26840"
-      mt="10vh"
     >
       <Flex
         direction="column"
@@ -62,4 +61,4 @@ const DiscordConnect = () => (
   </>
 );
 
-export default DiscordConnect;
+export default DiscordInvite;

components/Footer.tsx

@@ -1,50 +1,62 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Image, Box, Link, useColorMode, Button, Flex } from '@chakra-ui/core';
-
+import DiscordInvite from '../components/DiscordInvite';
 export const Footer = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
-    <Flex
-      w="100%"
-      px="3.1%"
-      py="2.5%"
-      bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="space-between"
-      as="footer"
-    >
-      <Button
-        color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
-        onClick={toggleColorMode}
-        variant="outlined"
-      >
-        Theme
-      </Button>
-      <Box
-        d="flex"
-        w={['50%', '36%', '22%']}
+    <>
+      <Image
+        src="../waveup.svg"
+        alt="wave up"
+        w="100%"
+        mb={['-0.8px', '-1px', '-1px', '-1px', '-1px']}
+        transform="rotate(-180deg)"
+        bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
+        h="7rem"
+      />
+      <DiscordInvite />
+      <Flex
+        w="100%"
+        px="3.1%"
+        py="2.5%"
+        bg="#f26840"
+        flexDirection="row"
+        alignItems="center"
         justifyContent="space-between"
-        mr="5"
+        as="footer"
       >
-        <Link
-          w="9%"
-          href="https://www.youtube.com/channel/UCZiR1u5RtSYYt8qcenxr-Uw"
+        <Button
+          color={colorMode === 'light' ? 'gray.300' : 'gray.800'}
+          onClick={toggleColorMode}
+          variant="outlined"
+        >
+          Theme
+        </Button>
+        <Box
+          d="flex"
+          w={['50%', '36%', '22%']}
+          justifyContent="space-between"
+          mr="5"
         >
-          <Image src="youtube.svg" />
-        </Link>
-        <Link w="7%" href="https://twitter.com/coderhood_dev">
-          <Image src="twitter.svg" />
-        </Link>
-        <Link w="7%" href="https://www.instagram.com/coderhood.dev/">
-          <Image src="instagram.svg" />
-        </Link>
-        <Link w="7%" href="https://www.linkedin.com/company/coderhood/">
-          <Image src="linkedin.svg" />
-        </Link>
-      </Box>
-    </Flex>
+          <Link
+            w="9%"
+            href="https://www.youtube.com/channel/UCZiR1u5RtSYYt8qcenxr-Uw"
+          >
+            <Image src="youtube.svg" />
+          </Link>
+          <Link w="7%" href="https://twitter.com/coderhood_dev">
+            <Image src="twitter.svg" />
+          </Link>
+          <Link w="7%" href="https://www.instagram.com/coderhood.dev/">
+            <Image src="instagram.svg" />
+          </Link>
+          <Link w="7%" href="https://www.linkedin.com/company/coderhood/">
+            <Image src="linkedin.svg" />
+          </Link>
+        </Box>
+      </Flex>
+    </>
   );
 };

pages/index.tsx

@@ -11,7 +11,6 @@ import {
 import { GetRoadmapsResponse } from '../api/roadmaps';
 import { Text } from '../components';
 import CardHowDoesItWork from '../components/CardHowDoesItWork';
-import DiscordConnect from '../components/DiscordConnect';
 
 interface Props {
   roadmaps: GetRoadmapsResponse;
@@ -117,7 +116,7 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
         />
       ))}
 
-      <Flex w="100%" h="100vh" alignItems="center">
+      <Flex w="100%" h="100vh" alignItems="center" mb="5rem">
         <Flex w="100%" h="60vh" alignItems="center" justifyContent="center">
           <Flex
             direction="column"
@@ -205,8 +204,6 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
           </Flex>
         </Flex>
       </Flex>
-
-      <DiscordConnect />
     </>
   );
 };