developer-roadmap/src/components/OpenSourceBanner.astro

---
import { getFormattedStars } from '../lib/github';
import Icon from './AstroIcon.astro';

const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
---

<div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
  <div class='max-w-[600px] container'>
    <h2 class='text-2xl sm:text-5xl font-bold'>Community</h2>
    <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
      roadmap.sh is the <a
        href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
        target='_blank'
        class='font-medium text-gray-600 hover:text-black underline underline-offset-2'
        >6th most starred project on GitHub</a
      > and is visited by hundreds of thousands of developers every month.
    </p>

    <div class='flex justify-start flex-col sm:flex-row sm:justify-center gap-2 sm:gap-3 mb-1.5 sm:mb-0'>
      <a
        href='https://github.com/kamranahmedse/developer-roadmap'
        target='_blank'
        class='inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white'
      >
          <Icon icon='star' class='mr-1 -ml-1 fill-current' />

          <span class='lowercase'>{starCount}</span>
          <span class='ml-2 hover:block'>GitHub Stars</span>
      </a>

      <a
        href="https://discord.gg/cJpEt5Qbwa"
        target='_blank'
        class='relative pointer inline-flex items-center border border-black py-1.5 px-3 rounded-lg text-sm hover:text-white hover:bg-black bg-white group'
      >
        <Icon icon='discord' class='h-[14px] mr-2 -ml-1 fill-current' />
        Join on Discord
      </a>
    </div>
  </div>
</div>