Update opensource banner

src/components/OpenSourceBanner.astro

@@ -16,8 +16,8 @@ const discordInfo = await getDiscordInfo();
         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'
-        >6th most starred project on GitHub</a
-      > and is visited by hundreds of thousands of developers every month.
+        >6th most starred project on GitHub </a>
+      and is visited by hundreds of thousands of developers every month.
     </p>
 
     <div class='my-5 sm:my-11 gap-2 sm:gap-0 grid grid-cols-1 sm:grid-cols-3 justify-between divide-x-0 sm:divide-x'>
@@ -28,29 +28,5 @@ const discordInfo = await getDiscordInfo();
         value={discordInfo.totalFormatted}
       />
     </div>
-
-    <div
-      class='mb-1.5 flex flex-col justify-start gap-2 sm:mb-0 sm:flex-row sm:justify-center sm:gap-3'
-    >
-      <a
-        href='https://github.com/kamranahmedse/developer-roadmap'
-        target='_blank'
-        class='inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
-      >
-        <Icon icon='star' class='-ml-1 mr-1 fill-current' />
-
-        <span class='lowercase'>{starCount}</span>
-        <span class='ml-2 hover:block'>Star on GitHub</span>
-      </a>
-
-      <a
-        href='https://discord.gg/cJpEt5Qbwa'
-        target='_blank'
-        class='pointer group relative inline-flex items-center rounded-lg border border-black bg-white px-3 py-1.5 text-sm hover:bg-black hover:text-white'
-      >
-        <Icon icon='discord' class='-ml-1 mr-2 h-[14px] fill-current' />
-        Join on Discord
-      </a>
-    </div>
   </div>
 </div>

src/components/OpenSourceStat.astro

@@ -1,13 +1,102 @@
 ---
+import { ChevronUp } from 'lucide-react';
+import Icon from './AstroIcon.astro';
 export interface Props {
   value: string;
   text: string;
 }
 
 const { value, text } = Astro.props;
+
+const isGitHubStars = text.toLowerCase() === 'github stars';
+const isRegistered = text.toLowerCase() === 'registered users';
+const isDiscordMembers = text.toLowerCase() === 'discord members';
 ---
 
-<div class='flex flex-row sm:flex-col items-center justify-start sm:justify-center gap-2 sm:gap-1'>
-  <p class='text-base w-[50px] sm:w-auto font-bold lowercase sm:text-5xl'>{value}</p>
-  <p class='text-base leading-relaxed text-gray-500 sm:text-base'>{text}</p>
+<div
+  class='flex flex-row items-center justify-start sm:flex-col sm:justify-center'
+>
+  {
+    isGitHubStars && (
+      <p class='flex items-center text-sm text-blue-500'>
+        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
+        &nbsp;out of 28m!
+      </p>
+    )
+  }
+
+  {
+    isRegistered && (
+      <p class='flex items-center text-sm text-blue-500'>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
+        every month
+      </p>
+    )
+  }
+
+  {
+    isDiscordMembers && (
+      <p class='flex items-center text-sm text-blue-500'>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
+        every month
+      </p>
+    )
+  }
+  <p
+    class='relative my-4 w-[50px] text-base font-bold lowercase sm:w-auto sm:text-5xl'
+  >
+    {value}
+  </p>
+  <p class="text-xs -mt-3 mb-5 tracking-wide text-gray-500">{text}</p>
+  {
+    isGitHubStars && (
+      <a
+        href='https://github.com/kamranahmedse/developer-roadmap'
+        target='_blank'
+        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
+      >
+        <div class='mb-0.5 flex items-center font-semibold'>
+          <Icon icon='star' class='-ml-1 fill-current' />
+          <span class='ml-1.5 hover:block'>Star us on GitHub</span>
+        </div>
+        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
+          Help us reach #1
+        </span>
+      </a>
+    )
+  }
+  {
+    isRegistered && (
+      <a
+        href='/signup'
+        target='_blank'
+        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
+      >
+        <div class='mb-0.5 flex items-center font-semibold'>
+          <Icon icon='users' class='-ml-1 fill-current h-[15px]' />
+          <span class='ml-1 hover:block'>Register yourself</span>
+        </div>
+        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
+          Commit to your growth
+        </span>
+      </a>
+    )
+  }
+  {
+    isDiscordMembers && (
+      <a
+        href='/signup'
+        target='_blank'
+        class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
+      >
+        <div class='mb-0.5 flex items-center font-semibold'>
+          <Icon icon='discord' class='-ml-1 fill-current h-[13px]' />
+          <span class='ml-1 hover:block'>Join on Discord</span>
+        </div>
+        <span class='text-xs text-gray-500 group-hover:text-gray-100'>
+          Join the community
+        </span>
+      </a>
+    )
+  }
 </div>