developer-roadmap/src/pages/roadmaps.astro

---
import { RoadmapsPage } from '../components/Roadmaps/RoadmapsPage';
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRoadmapsByTag } from '../lib/roadmap';
---

<BaseLayout
  title='Developer Roadmaps'
  description={'Step by step guides and paths to learn different tools or technologies'}
  permalink={'/roadmaps'}
>
  <div class=''>
    <div class='bg-white py-12'>
      <div class='container'>
        <div class='flex flex-col items-center bg-white'>
          <h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
          <p class='my-3 text-lg'>
            Browse ever-growing list of up-to-date, community driven roadmaps
          </p>
          <p class='flex flex-row gap-3'>
            <a
              class='inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white'
              href='#'
            >
              Draw your own roadmap
            </a>
            <a
              class='inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black'
              href='#'
            >
              Generate Roadmap with AI
            </a>
          </p>
        </div>
      </div>
    </div>

    <RoadmapsPage client:load />
  </div>
</BaseLayout>