Add guides listing design

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "@chakra-ui/icons": "^1.0.14",
         "@chakra-ui/react": "^1.6.5",
         "@emotion/react": "^11.4.0",
         "@emotion/styled": "^11.3.0",
@@ -932,6 +933,19 @@
         "react": ">=16.8.6"
       }
     },
+    "node_modules/@chakra-ui/icons": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.0.14.tgz",
+      "integrity": "sha512-VM21FkQc4rWcES1D6ddNIq6VYaCnTwWBIaqM9GRQZ7FpsLeVNk6UFYiE8MMtGWVIXq3k9jEYLbQHm7YdEF9yLQ==",
+      "dependencies": {
+        "@chakra-ui/icon": "1.1.10",
+        "@types/react": "^17.0.0"
+      },
+      "peerDependencies": {
+        "@chakra-ui/system": ">=1.0.0",
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/@chakra-ui/image": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.17.tgz",
@@ -2045,14 +2059,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "17.0.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
       "integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2062,8 +2074,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-      "devOptional": true
     },
     "node_modules/@types/tinycolor2": {
       "version": "1.4.2",
@@ -8372,6 +8383,15 @@
         "@chakra-ui/utils": "1.8.1"
       }
     },
+    "@chakra-ui/icons": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.0.14.tgz",
+      "integrity": "sha512-VM21FkQc4rWcES1D6ddNIq6VYaCnTwWBIaqM9GRQZ7FpsLeVNk6UFYiE8MMtGWVIXq3k9jEYLbQHm7YdEF9yLQ==",
+      "requires": {
+        "@chakra-ui/icon": "1.1.10",
+        "@types/react": "^17.0.0"
+      }
+    },
     "@chakra-ui/image": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.17.tgz",
@@ -9237,14 +9257,12 @@
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-      "devOptional": true
     },
     "@types/react": {
       "version": "17.0.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
       "integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
-      "devOptional": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -9254,8 +9272,7 @@
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-      "devOptional": true
     },
     "@types/tinycolor2": {
       "version": "1.4.2",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.14",
     "@chakra-ui/react": "^1.6.5",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",

pages/index.tsx

@@ -1,27 +1,16 @@
-import {
+import { Box, Container, Flex, Heading, Image, Link, SimpleGrid, Stack, Text, Tooltip } from '@chakra-ui/react';
-  Box,
+import { InfoIcon } from '@chakra-ui/icons';
-  Container,
-  Divider,
-  Heading,
-  Image,
-  Text,
-  Flex,
-  Link,
-  Stack,
-  Button,
-  SimpleGrid,
-  Badge
-} from '@chakra-ui/react';
-import { Head } from 'next/document';
 
 export default function Home() {
   return (
     <Box bg='teal.50' minH='100vh'>
-      <Box bg='black' p='20px 30px'>
+      <Box bg='gray.900' p='20px 30px'>
         <Container maxW='container.md'>
           <Flex justifyContent='space-between'>
-            <Link d='flex' href='/'>
+            <Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
-              <Image h='45px' src='/logo.svg' />
+                  _hover={{ textDecoration: 'none' }} fontSize='18px'>
+              <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
+              roadmap.sh
             </Link>
             {/*<Link d='flex' href='/' color='white' fontWeight={600} fontSize='20px'>*/}
             {/*  roadmap.sh*/}
@@ -50,50 +39,108 @@ export default function Home() {
               to help guide the developers in picking up the path and guide their learnings.
             </Text>
 
-            <Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube channel</Link> and <Link textDecoration='underline' href={'#'} fontWeight={600}>graphical guides</Link> which we hope you are going to love.</Text>
+            <Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube
+              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'>
-            <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
+                  shadow='2xl'
                   bg='blue.900' color='white' p='15px' rounded='10px'>
               <Heading fontSize='22px' mb='5px'>Frontend</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text>
             </Link>
 
-            <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
                   bg='red.800' color='white' p='15px' rounded='10px'>
               <Heading fontSize='22px' mb='5px'>Backend</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide to becoming a backend developer in 2021</Text>
             </Link>
 
-            <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
                   bg='green.800' color='white' p='15px' rounded='10px'>
               <Heading fontSize='22px' mb='5px'>DevOps</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
             </Link>
 
-            <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
                   bg='teal.800' color='white' p='15px' rounded='10px'>
               <Heading fontSize='22px' mb='5px'>React</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
             </Link>
 
-            <Link as={Box} href='#' _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href='#' _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
                   bg='gray.800' color='white' p='15px' rounded='10px'>
               <Heading fontSize='22px' mb='5px'>DBA</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
             </Link>
 
-            <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', shadow: '2xl' }} flex={1} shadow='2xl'
+            <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1}
-                  bg='red.900' color='white' p='15px' rounded='10px'>
+                  shadow='2xl'
+                  bg='red.900' color='white' p='15px' rounded='10px' position='relative'>
+              <Tooltip label={'Community contribution'} hasArrow placement='top'>
+                <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+              </Tooltip>
               <Heading fontSize='22px' mb='5px'>Android</Heading>
               <Text color='gray.200' fontSize='13px'>Step by step guide for DevOps or Operations role in 2021</Text>
-              <Badge mt='10px' variant="subtle" colorScheme="green">
+              {/*<Badge mt='10px' variant="subtle" colorScheme="green">*/}
-                Community
+              {/*  Community*/}
-              </Badge>
+              {/*</Badge>*/}
             </Link>
           </SimpleGrid>
         </Container>
       </Box>
+
+      <Box>
+        <Container maxW='container.md'>
+          <Box pt='40px' mb='20px'>
+            <Heading fontSize='25px' mb='5px'>Visual Guides</Heading>
+            <Text>Programming topics explained succinctly through visuals.</Text>
+          </Box>
+
+          <Stack>
+            <Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
+                  _hover={{
+                    textDecoration: 'none',
+                    color: 'blue.400',
+                    '& .guide-title': {
+                      transform: 'translateX(10px)'
+                    }
+                  }} borderBottomWidth={1}
+                  py='5px' color='gray.600'>
+              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Session based
+                Authentication</Text>
+              <Text fontSize='14px' color='gray.500' as='span'>June 12, 2021</Text>
+            </Link>
+
+            <Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
+                  _hover={{
+                    textDecoration: 'none',
+                    color: 'blue.400',
+                    '& .guide-title': {
+                      transform: 'translateX(10px)'
+                    }
+                  }} borderBottomWidth={1}
+                  py='5px' color='gray.600'>
+              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>JSON Web Tokens</Text>
+              <Text fontSize='14px' color='gray.500' as='span'>June 05, 2021</Text>
+            </Link>
+
+            <Link d='flex' justifyContent='space-between' href='#' fontSize='17px'
+                  _hover={{
+                    textDecoration: 'none',
+                    color: 'blue.400',
+                    '& .guide-title': {
+                      transform: 'translateX(10px)'
+                    }
+                  }} borderBottomWidth={1}
+                  py='5px' color='gray.600'>
+              <Text transition='200ms' className={'guide-title'} fontWeight={500} as='span'>Token Based Authentication</Text>
+              <Text fontSize='14px' color='gray.500' as='span'>May 15, 2021</Text>
+            </Link>
+          </Stack>
+        </Container>
+      </Box>
     </Box>
   );
 }