Update roadmap header

src/components/RoadmapHeader.astro

@@ -125,7 +125,7 @@ const hasTnsBanner = !!tnsBannerLink;
           icon={FolderKanbanIcon}
           text='Projects'
           isActive={activeTab === 'projects'}
-          badgeText={projectCount > 0 ? '' : 'soon'}
+          badgeText={projectCount > 0 ? 'new' : 'soon'}
         />
       </div>
 

src/components/TabLink.tsx

@@ -37,7 +37,15 @@ export function TabLink(props: TabLinkProps) {
   });
 
   const badgeNode = badgeText && (
-    <span className="ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors group-hover:bg-yellow-300 sm:flex">
+    <span
+      className={cn(
+        'ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors sm:flex',
+        {
+          'bg-gray-200 text-black group-hover:bg-gray-300 ': badgeText?.toLowerCase() == 'soon',
+          'bg-yellow-200 text-black group-hover:bg-yellow-300 ': badgeText?.toLowerCase() == 'new',
+        },
+      )}
+    >
       <span className="relative -top-px">{badgeText}</span>
     </span>
   );

src/pages/get-started.astro

@@ -28,7 +28,7 @@ import {
   PenSquare,
   Component,
   Waypoints,
-  CheckSquare, Braces, FolderKanban, Coins, Megaphone,
+  CheckSquare, Braces, FolderKanban, Coins, Megaphone, GitBranch,
 } from 'lucide-react';
 import { SectionBadge } from '../components/GetStarted/SectionBadge';
 import { TipItem } from '../components/GetStarted/TipItem';
@@ -416,6 +416,12 @@ import { TipItem } from '../components/GetStarted/TipItem';
         link='/software-architect'
         description='Learn all you need to know to become a Software Architect.'
       />
+      <RoadmapCard
+        icon={GitBranch}
+        title='Git and GitHub'
+        link='/git-github'
+        description='Learn all you need to know to become a Git and GitHub expert.'
+      />
     </div>
   </RoleRoadmaps>