developer-roadmap/src/components/OpenSourceBanner.astro

---
import { getFormattedStars, getRepositoryRank } from '../lib/github';
import { getDiscordInfo } from '../lib/discord';

import OpenSourceStat from './OpenSourceStat.astro';

const repoName = 'kamranahmedse/developer-roadmap';

const starCount = await getFormattedStars(repoName);
const repoRank = await getRepositoryRank(repoName);
const discordInfo = await getDiscordInfo();
---

<div class='border-b border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
  <div class='container !max-w-[650px]'>
    <p class='text-2xl font-bold sm:text-5xl'>Join the Community</p>
    <p class='my-2.5 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
      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 underline underline-offset-2 hover:text-black'
        >{repoRank} most starred project on GitHub</a
      > and is visited by hundreds of thousands of developers every month.
    </p>

    <div
      class='mt-5 grid grid-cols-1 justify-between gap-2 divide-x-0 sm:my-11 sm:grid-cols-3 sm:gap-0 sm:divide-x mb-4 sm:mb-0'
    >
      <OpenSourceStat text='GitHub Stars' value={starCount} secondaryValue={repoRank} />
      <OpenSourceStat text='Registered Users' value={'+1.5M'} secondaryValue="+90k" />
      <OpenSourceStat
        text='Discord Members'
        value={discordInfo.totalFormatted}
        secondaryValue="+2k"
      />
    </div>
  </div>
</div>