Add banner for teams

src/components/HeroSection/HeroSection.astro

@@ -2,11 +2,24 @@
 import { FavoriteRoadmaps } from './FavoriteRoadmaps';
 ---
 
-<div class='relative min-h-auto min-h-[192px] sm:min-h-[281px] border-b border-b-[#1e293c]'>
+<div
+  class='min-h-auto relative min-h-[192px] border-b border-b-[#1e293c] sm:min-h-[281px]'
+>
   <div
-    class='container px-6 py-6 pb-14 text-left sm:px-0 sm:py-20 sm:text-center transition-opacity duration-300'
+    class='container px-5 py-6 pb-14 text-left transition-opacity duration-300 sm:px-0 sm:py-20 sm:text-center'
     id='hero-text'
   >
+    <p class='-mt-4 sm:-mt-10 mb-4 text-gray-300'>
+      <a href='/teams' class="hover:text-white">
+        <span
+          class='mr-1 rounded-sm border-black bg-white px-1 py-0.5 text-center text-xs font-semibold uppercase text-black group-hover:bg-white'
+          >New</span
+        >
+        <span class="hidden sm:inline ml-1">Announcing roadmaps for teams.</span>
+        <span class="inline-block sm:hidden ml-1">Roadmaps for teams.</span>
+      </a>
+    </p>
+
     <h1
       class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl'
     >
@@ -24,5 +37,5 @@ import { FavoriteRoadmaps } from './FavoriteRoadmaps';
       their career.
     </p>
   </div>
-  <FavoriteRoadmaps client:only="react" />
+  <FavoriteRoadmaps client:only='react' />
 </div>