From 8bb36c1451ef51441ac3d5a2c1c057d2a0cac523 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 28 Aug 2021 13:04:40 +0200
Subject: [PATCH] Add responsive footer

---
 components/footer.tsx | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/components/footer.tsx b/components/footer.tsx
index bf2b999d8..cb6d11eba 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,17 +1,35 @@
 import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
 
+function NavigationLinks() {
+  return (
+    <>
+      <Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
+        <Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
+        <Link _hover={{ color: 'white' }} href='#'>Guides</Link>
+        <Link _hover={{ color: 'white' }} href='#'>Videos</Link>
+        <Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
+        <Link _hover={{ color: 'white' }} href='#'>About</Link>
+        <Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
+      </Stack>
+
+      <Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link>
+        <Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link>
+        <Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link>
+      </Stack>
+    </>
+  );
+}
+
 export function Footer() {
   return (
-    <Box bg='gray.900' p='40px 30px'>
+    <Box bg='gray.900' p='40px 0'>
       <Container maxW='container.md'>
-        <Stack isInline color='gray.400' fontWeight={600} spacing='30px'>
-          <Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
-          <Link _hover={{ color: 'white' }} href='#'>Guides</Link>
-          <Link _hover={{ color: 'white' }} href='#'>Videos</Link>
-          <Link _hover={{ color: 'white' }} href='#'>Podcasts</Link>
-          <Link _hover={{ color: 'white' }} href='#'>About</Link>
-          <Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
-        </Stack>
+        <NavigationLinks />
 
         <Box my='50px' maxW='500px'>
           <Flex spacing={0} alignItems='center' color='gray.400'>