Prepare related roadmaps component

components/home/featured-roadmaps-list.tsx

@@ -5,7 +5,6 @@ import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
 type FeaturedRoadmapsListProps = {
   roadmaps: RoadmapType[];
   title: string;
-
 };
 
 export const upcomingRoadmaps = [

components/related-roadmaps.tsx

@@ -0,0 +1,40 @@
+import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react';
+import { RoadmapType } from '../lib/roadmap';
+
+type RelatedRoadmapsProps = {
+  roadmaps: RoadmapType[];
+};
+
+export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
+  const { roadmaps } = props;
+  if (!roadmaps.length) {
+    return null;
+  }
+
+  return (
+    <Box borderTopWidth={1} bgColor='gray.50' pb='35px' pt='5px'>
+      <Container maxW='container.md'>
+        <Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
+          <Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
+            <Text as='span' display={['none', 'none', 'inline']}>Other</Text> Related Roadmaps
+          </Text>
+
+          <Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }} href='/'>
+            <Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
+            <Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
+          </Button>
+        </Box>
+
+        <Stack spacing='5px'>
+          { roadmaps.map(roadmap => (
+            <Link href={`/${roadmap.id}`} key={roadmap.id} borderWidth={1} display='block' py='5px' px='10px' rounded='md' bg='white'
+                  textDecoration={'none'} _hover={{ bg: 'gray.50' }}>
+              <Badge display={['none', 'inline']} position='relative' top='-1px' colorScheme='blue' mr='7px'>{ roadmap.featuredTitle }</Badge>
+              <Text as='span' display={['block', 'inline']} fontSize={['sm', 'sm', 'md']}>{ roadmap.featuredDescription }</Text>
+            </Link>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

pages/[roadmap]/index.tsx

@@ -10,6 +10,7 @@ import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'
 import { InteractiveRoadmapRenderer } from './interactive';
 import { FreeSignUp, SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
 import { BellIcon, EmailIcon } from '@chakra-ui/icons';
+import { RelatedRoadmaps } from '../../components/related-roadmaps';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -88,13 +89,13 @@ export default function Roadmap(props: RoadmapProps) {
         keywords={roadmap?.seo.keywords || []}
         roadmap={roadmap}
       />
-      <Box mb='60px'>
+      <Box  mb='60px'>
         <RoadmapPageHeader roadmap={roadmap} />
         <ImageRoadmap roadmap={roadmap} />
         <TextualRoadmap roadmap={roadmap} />
         <UpcomingRoadmap roadmap={roadmap} />
       </Box>
-
+      <RelatedRoadmaps roadmaps={[]} />
       <OpensourceBanner />
       <Footer />
     </Box>

pages/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Heading, SimpleGrid, Tag, Text } from '@chakra-ui/react';
+import { Box, Container, Heading, Text } from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
 import { OpensourceBanner } from '../components/opensource-banner';
@@ -6,7 +6,6 @@ import { DimmedMore } from '../components/dimmed-more';
 import { LinksListItem } from '../components/links-list-item';
 import { VideoIcon } from '../components/icons/video-icon';
 import { LinksList } from '../components/links-list';
-import { HomeRoadmapItem } from '../components/roadmap/home-roadmap-item';
 import { getFeaturedRoadmaps, RoadmapType } from '../lib/roadmap';
 import { getAllGuides, GuideType } from '../lib/guide';
 import { getAllVideos, VideoType } from '../lib/video';