developer-roadmap/src/pages/index.astro

---
import FeaturedGuides from '../components/FeaturedGuides.astro';
import FeaturedItems from '../components/FeaturedItems/FeaturedItems.astro';
import FeaturedVideos from '../components/FeaturedVideos.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getAllBestPractices } from '../lib/best-pratice';
import { getAllGuides } from '../lib/guide';
import { getRoadmapsByTag } from '../lib/roadmap';
import { getAllVideos } from '../lib/video';

const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
const bestPractices = await getAllBestPractices();

const guides = await getAllGuides();
const videos = await getAllVideos();
---

<BaseLayout
  title='Developer Roadmaps - roadmap.sh'
  description={'Community driven roadmaps, articles and guides for developers to grow in their career.'}
  permalink={'/'}
>
  <div class='bg-gradient-to-b from-slate-900 to-black'>
    <div class='border-b border-b-[#1e293c]'>
      <div
        class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center'
      >
        <h1
          class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
        >
          Developer Roadmaps
        </h1>

        <p class='hidden px-4 text-lg text-gray-400 sm:block'>
          <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 developers in picking up the path and guide their learnings.
        </p>

        <p class='text-md block px-0 text-gray-400 sm:hidden'>
          Community created roadmaps, guides and articles to help developers
          grow in their career.
        </p>
      </div>
    </div>

    <FeaturedItems
      heading='Role based Roadmaps'
      featuredItems={roleRoadmaps.map((roadmapItem) => ({
        text: roadmapItem.frontmatter.briefTitle,
        url: `/${roadmapItem.id}`,
        isNew: roadmapItem.frontmatter.isNew,
        isUpcoming: roadmapItem.frontmatter.isUpcoming,
      }))}
    />

    <FeaturedItems
      heading='Skill based Roadmaps'
      featuredItems={skillRoadmaps.map((roadmapItem) => ({
        text:
          roadmapItem.frontmatter.briefTitle === 'Go'
            ? 'Go Roadmap'
            : roadmapItem.frontmatter.briefTitle,
        url: `/${roadmapItem.id}`,
        isNew: roadmapItem.frontmatter.isNew,
        isUpcoming: roadmapItem.frontmatter.isUpcoming,
      }))}
    />

    <FeaturedItems
      heading='Best Practices'
      featuredItems={bestPractices.map((bestPractice) => ({
        text: bestPractice.frontmatter.briefTitle,
        url: `/best-practices/${bestPractice.id}`,
        isNew: bestPractice.frontmatter.isNew,
        isUpcoming: bestPractice.frontmatter.isUpcoming,
      }))}
    />

    <div class='grid grid-cols-1 gap-7 bg-gray-50 py-7 sm:gap-16 sm:py-16'>
      <FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />
      <FeaturedVideos heading='Videos' videos={videos.slice(0, 7)} />
    </div>
  </div>

  <script src='../lib/home-progress.ts'></script>
</BaseLayout>