---
import { FeatureAnnouncement } from "../FeatureAnnouncement";
---

<div
  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] transition-all sm:min-h-[281px]'
>
  <div
    class='container px-5 py-6 pb-14 text-left transition-opacity duration-300 sm:px-0 sm:py-20 sm:text-center'
    id='hero-text'
  >
    <p class='-mt-4 mb-7 sm:-mt-10 sm:mb-4'>
      <FeatureAnnouncement client:load />
    </p>

    <h1
      class='mb-2 bg-linear-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl sm:leading-tight'
    >
      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 a 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>