Add featured guides on homepage

src/components/FeaturedGuides.astro

@@ -0,0 +1,33 @@
+---
+import type { GuideFileType } from '../lib/guide';
+import GuideListItem from './GuideListItem.astro';
+
+export interface Props {
+  heading: string;
+  guides: GuideFileType[];
+}
+
+const { heading, guides } = Astro.props;
+---
+
+<h1 class='text-2xl sm:text-3xl font-bold block'>{heading}</h1>
+
+<div class='mt-3 sm:my-5'>
+  {guides.map((guide) => <GuideListItem guide={guide} />)}
+</div>
+
+<a
+  href='/guides'
+  class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
+>
+  View All Guides &rarr;
+</a>
+
+<div class='block sm:hidden mt-3'>
+  <a
+    href='/guides'
+    class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
+  >
+    View All Guides &nbsp;&rarr;
+  </a>
+</div>

src/pages/index.astro

@@ -1,38 +1,47 @@
 ---
+import FeaturedGuides from '../components/FeaturedGuides.astro';
 import FeaturedRoadmaps from '../components/FeaturedRoadmaps/FeaturedRoadmaps.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import { getAllGuides } from '../lib/guide';
 import { getRoadmapsByTag } from '../lib/roadmap';
 
 const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
 const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
+const guides = await getAllGuides();
 ---
 
-<BaseLayout title="Developer Roadmaps">
+<BaseLayout title='Developer Roadmaps'>
-  <div class="bg-gradient-to-b from-slate-900 to-black">
+  <div class='bg-gradient-to-b from-slate-900 to-black'>
-    <div class="border-b border-b-slate-900">
+    <div class='border-b border-b-slate-900'>
       <div
-        class="container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0"
+        class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'
       >
         <h1
-          class="text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text"
+          class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'
         >
           Developer Roadmaps
         </h1>
 
-        <p class="hidden sm:block text-gray-400 text-lg px-4">
+        <p class='hidden sm:block text-gray-400 text-lg px-4'>
-          <span class="font-medium text-gray-400">roadmap.sh</span> is a community
+          <span class='font-medium text-gray-400'>roadmap.sh</span> is a community
           effort to create roadmaps, guides and other educational content to help
           guide the developers in picking up the path and guide their learnings.
         </p>
 
-        <p class="block sm:hidden text-gray-400 text-md px-0">
+        <p class='block sm:hidden text-gray-400 text-md px-0'>
           Community created roadmaps, guides and articles to help developers
           grow in their career.
         </p>
       </div>
     </div>
 
-    <FeaturedRoadmaps heading="Role based Roadmaps" roadmaps={roleRoadmaps} />
+    <FeaturedRoadmaps heading='Role based Roadmaps' roadmaps={roleRoadmaps} />
-    <FeaturedRoadmaps heading="Skill based Roadmaps" roadmaps={skillRoadmaps} />
+    <FeaturedRoadmaps heading='Skill based Roadmaps' roadmaps={skillRoadmaps} />
+
+    <div class='grid grid-cols-1 gap-7 sm:gap-16 bg-gray-50 py-7 sm:py-16'>
+      <div class='container'>
+        <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />
+      </div>
+    </div>
   </div>
 </BaseLayout>