diff --git a/components/home/featured-roadmaps-list.tsx b/components/home/featured-roadmaps-list.tsx
index 8d350f6bf..2b9952ee0 100644
--- a/components/home/featured-roadmaps-list.tsx
+++ b/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 = [
diff --git a/components/related-roadmaps.tsx b/components/related-roadmaps.tsx
new file mode 100644
index 000000000..4600babb9
--- /dev/null
+++ b/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 (
+
+
+
+
+ Other Related Roadmaps
+
+
+
+
+
+
+ { roadmaps.map(roadmap => (
+
+ { roadmap.featuredTitle }
+ { roadmap.featuredDescription }
+
+ ))}
+
+
+
+ );
+}
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index b3feeb9df..8447b81b2 100644
--- a/pages/[roadmap]/index.tsx
+++ b/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}
/>
-
+
-
+
diff --git a/pages/index.tsx b/pages/index.tsx
index 023d3ea49..74070f15c 100644
--- a/pages/index.tsx
+++ b/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';