Add roadmaps listing

pages/index.tsx

@@ -4,10 +4,10 @@ import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
 import { OpensourceBanner } from '../components/opensource-banner';
 import { DimmedMore } from '../components/dimmed-more';
-import { RoadmapGridItem } from './roadmaps/components/roadmap-grid-item';
 import { LinksListItem } from '../components/links-list-item';
 import { VideoIcon } from '../icons/video-icon';
 import { LinksList } from '../components/links-list';
+import { HomeRoadmapItem } from './roadmaps/components/home-roadmap-item';
 
 export default function Home() {
   return (
@@ -27,17 +27,17 @@ export default function Home() {
               channel</Link> which we hope you are going to love.</Text>
           </Box>
           <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'>
-            <RoadmapGridItem colorIndex={0} title={'Frontend'}
+            <HomeRoadmapItem colorIndex={0} title={'Frontend'}
                              subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
-            <RoadmapGridItem colorIndex={1} title={'Backend'}
+            <HomeRoadmapItem colorIndex={1} title={'Backend'}
                              subtitle={'Step by step guide to becoming a backend developer in 2021'} />
-            <RoadmapGridItem colorIndex={2} title={'DevOps'}
+            <HomeRoadmapItem colorIndex={2} title={'DevOps'}
                              subtitle={'Step by step guide for DevOps or Operations role in 2021'} />
-            <RoadmapGridItem colorIndex={3} title={'React'}
+            <HomeRoadmapItem colorIndex={3} title={'React'}
                              subtitle={'Step by step guide to become a React Developer in 2021'} />
-            <RoadmapGridItem colorIndex={4} title={'DBA'}
+            <HomeRoadmapItem colorIndex={4} title={'DBA'}
                              subtitle={'Step by step guide to become a PostgreSQL DBA in 2021'} isCommunity />
-            <RoadmapGridItem colorIndex={5} title={'Android'}
+            <HomeRoadmapItem colorIndex={5} title={'Android'}
                              subtitle={'Step by step guide to become an Android Developer in 2021'} isCommunity />
           </SimpleGrid>
         </Container>

pages/roadmaps/components/home-roadmap-item.tsx

@@ -0,0 +1,46 @@
+import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
+
+type RoadmapGridItemProps = {
+  title: string;
+  subtitle: string;
+  isCommunity?: boolean;
+  colorIndex?: number
+};
+
+const bgColorList = [
+  'blue.900',
+  'red.800',
+  'green.800',
+  'teal.800',
+  'gray.800',
+  'red.900'
+];
+
+export function HomeRoadmapItem(props: RoadmapGridItemProps) {
+  const { title, subtitle, isCommunity, colorIndex = 0 } = props;
+
+  return (
+    <Link
+      as={Box}
+      href={'#'}
+      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
+      flex={1}
+      shadow='2xl'
+      bg={bgColorList[colorIndex] ?? bgColorList[0]}
+      color='white'
+      p='15px'
+      rounded='10px'
+      pos='relative'
+    >
+      {isCommunity && (
+        <Tooltip label={'Community contribution'} hasArrow placement='top'>
+          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
+        </Tooltip>
+      )}
+
+      <Heading fontSize='22px' mb='5px'>{title}</Heading>
+      <Text color='gray.200' fontSize='13px'>{subtitle}</Text>
+    </Link>
+  );
+}

pages/roadmaps/components/roadmap-grid-item.tsx

@@ -1,46 +1,66 @@
-import { Box, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
-import { InfoIcon } from '@chakra-ui/icons';
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
 
 type RoadmapGridItemProps = {
   title: string;
   subtitle: string;
+  date: string;
   isCommunity?: boolean;
-  colorIndex?: number
+  colorIndex?: number;
 };
 
 const bgColorList = [
+  'gray.900',
+  'purple.900',
   'blue.900',
+  'red.900',
+  'green.900',
+  'teal.900',
+  'yellow.900',
+  'cyan.900',
+  'pink.900',
+
+  'gray.800',
+  'purple.800',
+  'blue.800',
   'red.800',
   'green.800',
   'teal.800',
-  'gray.800',
-  'red.900'
+  'yellow.800',
+  'cyan.800',
+  'pink.800',
+
+  'gray.700',
+  'purple.700',
+  'blue.700',
+  'red.700',
+  'green.700',
+  'teal.700',
+  'yellow.700',
+  'cyan.700',
+  'pink.700',
+
+  'gray.600',
+  'purple.600',
+  'blue.600',
+  'red.600',
+  'green.600',
+  'teal.600',
+  'yellow.600',
+  'cyan.600',
+  'pink.600'
 ];
 
 export function RoadmapGridItem(props: RoadmapGridItemProps) {
-  const { title, subtitle, isCommunity, colorIndex = 0 } = props;
+  const { title, subtitle, date, isCommunity = false, colorIndex = 0 } = props;
 
   return (
-    <Link
-      as={Box}
-      href={'#'}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }}
-      flex={1}
-      shadow='2xl'
-      bg={bgColorList[colorIndex] ?? bgColorList[0]}
-      color='white'
-      p='15px'
-      rounded='10px'
-      pos='relative'
-    >
-      {isCommunity && (
-        <Tooltip label={'Community contribution'} hasArrow placement='top'>
-          <InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
-        </Tooltip>
-      )}
-
-      <Heading fontSize='22px' mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize='13px'>{subtitle}</Text>
+    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
+          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
+      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
+      {isCommunity && <Text mt='10px' fontSize='13px' color='gray.400'>
+        <Badge colorScheme={'yellow'} mr='10px'>Community</Badge>
+      </Text>}
     </Link>
   );
 }

pages/roadmaps/index.tsx

@@ -1,5 +1,103 @@
+import { Box, Container, SimpleGrid } from '@chakra-ui/react';
+import { Header } from '../../components/header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { PageHeader } from '../../components/page-header';
+import { HomeRoadmapItem } from './components/home-roadmap-item';
+import { RoadmapGridItem } from './components/roadmap-grid-item';
+
 export default function Roadmaps() {
   return (
-    <h1>Hello world</h1>
+    <Box bg='white' minH='100vh'>
+      <Header />
+      <Box mb='60px'>
+        <PageHeader
+          title={'Developer Roadmaps'}
+          subtitle={'Step by step guides and paths to learn different tools or technologies'}
+        />
+        <Container maxW='container.md' position='relative'>
+          <SimpleGrid columns={{ md: 2 }} mb='30px' spacing='15px'>
+            <RoadmapGridItem
+              colorIndex={0} title={'Frontend'}
+              subtitle={'Step by step guide to becoming a frontend developer in 2021'}
+              date={'June 12, 2021'}
+            />
+            <RoadmapGridItem
+              colorIndex={1}
+              title={'Backend'}
+              subtitle={'Step by step guide to becoming a backend developer in 2021'}
+              date='June 15, 2021'
+            />
+
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={2}
+              title={'DevOps'}
+              subtitle={'Step by step guide for DevOps or Operations role in 2021'}
+            />
+
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={3}
+              title={'React'}
+              subtitle={'Step by step guide to become a React Developer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={4}
+              title={'DBA'}
+              subtitle={'Step by step guide to becoming a PostgreSQL Database Administrator in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={5}
+              title={'Android'}
+              subtitle={'Step by step guide to become an Android Developer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={6}
+              title={'QA Engineer'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={7}
+              title={'AI Engineer'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={8}
+              title={'iOS Engineer'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={9}
+              title={'Golang'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={10}
+              title={'Java'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+            <RoadmapGridItem
+              date={'August 25, 2021'}
+              colorIndex={10}
+              title={'Angular'}
+              subtitle={'Step by step guide to become a Quality Assurance Engineer in 2021'}
+            />
+          </SimpleGrid>
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
   );
 }