Add opensource section

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.14",
     "@chakra-ui/react": "^1.6.5",
-    "@emotion/react": "^11.4.0",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "framer-motion": "^4.1.17",
     "next": "11.0.1",
@@ -19,7 +19,7 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@types/react": "17.0.15",
+    "@types/react": "17.0.16",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "^8.3.0",

pages/index.tsx

@@ -1,24 +1,24 @@
 import {
   Badge,
-  Box,
+  Box, Button,
   Container,
-  Divider,
   Flex,
   Heading,
   Image,
   Link,
   SimpleGrid,
-  Stack, StackDivider,
+  Stack,
+  StackDivider,
   Text,
-  Tooltip, VStack
+  Tooltip,
+  VStack
 } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
-import { TextIcon } from './icons/text-icon';
 import { VideoIcon } from './icons/video-icon';
 
 export default function Home() {
   return (
-    <Box bg='teal.50' minH='100vh' pb='100px'>
+    <Box bg='teal.50' minH='100vh'>
       <Box bg='gray.900' p='20px 30px'>
         <Container maxW='container.md'>
           <Flex justifyContent='space-between'>
@@ -58,7 +58,7 @@ export default function Home() {
               channel</Link> and <Link textDecoration='underline' href={'#'} fontWeight={600}>graphical
               guides</Link> which we hope you are going to love.</Text>
           </Box>
-          <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} isInline spacing='20px'>
+          <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'>
             <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
                   shadow='2xl'
                   bg='blue.900' color='white' p='15px' rounded='10px'>
@@ -114,6 +114,7 @@ export default function Home() {
 
           <Stack>
             <Link d='flex' justifyContent='space-between' href='#' fontSize='15px'
+                  pos='relative'
                   _hover={{
                     textDecoration: 'none',
                     color: 'blue.400',
@@ -588,6 +589,57 @@ export default function Home() {
           </VStack>
         </Container>
       </Box>
+
+      <Box borderTopWidth={1} mt='60px' pt='70px' pb='80px' textAlign='center'>
+        <Container maxW='container.md'>
+          <Heading fontSize='35px' mb='20px'>Open Source</Heading>
+          <Text lineHeight='26px' fontSize='16px' mb='20px'>The project is OpenSource,&nbsp;
+            <Link
+              _hover={{ textDecoration: 'none' }}
+              href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
+              target='_blank'
+              borderBottomWidth={1}
+              fontWeight={600}
+            >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+            developers every month.</Text>
+          <iframe
+            src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'
+            frameBorder='0'
+            scrolling='0'
+            width='170'
+            height='30'
+            style={{ margin: 'auto', marginBottom: '30px' }}
+            title='GitHub'
+          />
+
+          <Text lineHeight='26px' fontSize='16px' mb='15px'>A considerable amount of my time is spent doing unpaid
+            community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
+            produce more open-source and free educational material consumed by hundreds of thousands of developers every month.</Text>
+
+          <Box>
+            <iframe
+              src='https://ghbtns.com/github-btn.html?user=kamranahmedse&type=sponsor&size=large'
+              frameBorder='0'
+              scrolling='0'
+              width='260'
+              height='30'
+              title='GitHub'
+              style={{ margin: 'auto' }}
+            />
+          </Box>
+        </Container>
+      </Box>
+
+      <Box bg='gray.900' p='40px 30px'>
+        <Container maxW='container.md'>
+          <Stack isInline color='white' fontWeight={600} spacing='30px'>
+            <Link href='#'>Home</Link>
+            <Link href='#'>Roadmaps</Link>
+            <Link href='#'>Guides</Link>
+            <Link href='#'>Videos</Link>
+          </Stack>
+        </Container>
+      </Box>
     </Box>
   );
 }