Add frontend courses page

src/components/courses/CourseStep.astro

@@ -0,0 +1,77 @@
+<div class='flex flex-col'>
+  <p
+    class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400'
+  >
+    <span class='h-3 w-3 rounded-full bg-black'></span>
+    <span class='h-[1px] w-[15px] bg-black'></span>
+    <span class='rounded-md border border-black bg-black px-3 py-2 text-white'>
+      Learn the absolute basics i.e. HTML and CSS
+    </span>
+  </p>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    Purchase and watch one of the following <span
+      class='font-medium text-black'>premium courses</span
+    >
+  </p>
+
+  <div class='rounded-lg border p-3'>
+    <ul class='flex flex-col gap-1 text-sm'>
+      <li>
+        <a href='#' class='group font-medium text-gray-800 hover:text-black'>
+          <span
+            class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
+          >
+            Course
+          </span>
+
+          <span class='underline underline-offset-1'
+            >HTML and CSS with Mosh</span
+          >
+        </a>
+      </li>
+      <li>
+        <a href='#' class='group font-medium text-gray-800 hover:text-black'>
+          <span
+              class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
+          >
+            Course
+          </span>
+
+          <span class='underline underline-offset-1'
+            >Learn HTML with 50 Projects</span
+          >
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <p class='mt-3 text-sm text-gray-500'>
+    Once done, build the <span class='font-medium text-black'
+      >following projects</span
+    > to test and practice your skills
+  </p>
+
+  <div class='mt-3 flex flex-col gap-1'>
+    <a
+        href='/projects/task-tracker'
+        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      Build a login page for a website.
+    </a>
+
+    <a
+        href='/projects/task-tracker'
+        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      Create a landing page for an e-commerce website.
+    </a>
+
+    <a
+        href='/projects/task-tracker'
+        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      Create a responsive website for a restaurant.
+    </a>
+  </div>
+</div>

src/pages/[roadmapId]/courses.astro

@@ -0,0 +1,108 @@
+---
+import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
+import FAQs, { type FAQType } from '../../components/FAQs/FAQs.astro';
+import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
+import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
+import RoadmapHeader from '../../components/RoadmapHeader.astro';
+import { FolderKanbanIcon } from 'lucide-react';
+import { EmptyProjects } from '../../components/Projects/EmptyProjects';
+import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
+import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
+import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getProjectsByRoadmapId } from '../../lib/project';
+import {
+  generateArticleSchema,
+  generateFAQSchema,
+} from '../../lib/jsonld-schema';
+import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
+import RoadmapNote from '../../components/RoadmapNote.astro';
+import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
+import ResourceProgressStats from '../../components/ResourceProgressStats.astro';
+import AstroIcon from '../../components/AstroIcon.astro';
+import CourseStep from "../../components/courses/CourseStep.astro";
+
+export async function getStaticPaths() {
+  const roadmapIds = await getRoadmapIds();
+
+  return roadmapIds.map((roadmapId) => ({
+    params: { roadmapId },
+  }));
+}
+
+interface Params extends Record<string, string | undefined> {
+  roadmapId: string;
+}
+
+const { roadmapId } = Astro.params as Params;
+const roadmapFile = await import(
+  `../../data/roadmaps/${roadmapId}/${roadmapId}.md`
+);
+
+const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
+
+// update og for projects
+const ogImageUrl =
+  roadmapData?.seo?.ogImageUrl ||
+  getOpenGraphImageUrl({
+    group: 'roadmap',
+    resourceId: roadmapId,
+  });
+
+const descriptionNoun = {
+  'AI and Data Scientist': 'AI and Data Science',
+  'Game Developer': 'Game Development',
+  'Technical Writer': 'Technical Writing',
+  'Product Manager': 'Product Management',
+};
+
+const title = `${roadmapData.briefTitle} Courses`;
+const description = `Courses and project driven path to help you master ${descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle}`;
+
+const seoTitle = `${roadmapData.briefTitle} Courses`;
+const nounTitle =
+  descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle;
+const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance your skills? Explore our top free and paid courses to help you become a ${nounTitle} expert!`;
+---
+
+<BaseLayout
+  permalink={`/${roadmapId}`}
+  title={seoTitle}
+  description={seoDescription}
+  briefTitle={roadmapData.briefTitle}
+  ogImageUrl={ogImageUrl}
+  keywords={roadmapData.seo.keywords}
+  resourceId={roadmapId}
+  resourceType='roadmap'
+  noIndex={true}
+>
+  <div class='bg-gray-50'>
+    <RoadmapHeader
+      title={title}
+      description={description}
+      note={roadmapData.note}
+      tnsBannerLink={roadmapData.tnsBannerLink}
+      roadmapId={roadmapId}
+      hasTopics={roadmapData.hasTopics}
+      isUpcoming={roadmapData.isUpcoming}
+      isForkable={roadmapData.isForkable}
+      question={roadmapData.question}
+      activeTab='courses'
+    />
+
+    <div class='container'>
+      <div class='relative my-3 rounded-lg border bg-white px-12 py-8'>
+
+        <span class='absolute inset-y-0 left-[26.3px] w-[1px] bg-black'></span>
+
+        <!--Step content curator-->
+        <CourseStep />
+        <div class="mt-8"></div>
+        <CourseStep />
+        <div class="mt-8"></div>
+        <CourseStep />
+      </div>
+    </div>
+  </div>
+</BaseLayout>