From 219aaa3fb2952d5ea725a255fea894c936bf98fa Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 12 Aug 2024 19:49:00 +0100
Subject: [PATCH] Update roadmap header

---
 src/components/RoadmapHeader.astro |  2 +-
 src/components/TabLink.tsx         | 10 +++++++++-
 src/pages/get-started.astro        |  8 +++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 338b9bf43..103f3dbda 100644
--- a/src/components/RoadmapHeader.astro
+++ b/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>
 
diff --git a/src/components/TabLink.tsx b/src/components/TabLink.tsx
index 2bc452d6d..2314d02c8 100644
--- a/src/components/TabLink.tsx
+++ b/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>
   );
diff --git a/src/pages/get-started.astro b/src/pages/get-started.astro
index 8cd1a5533..cda3f75d1 100644
--- a/src/pages/get-started.astro
+++ b/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>