feat: Move Teams banner to all pages with dismissible functionality

src/components/TeamsBanner/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.css';
+
+export function TeamsBanner(): React.ReactElement | null {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check localStorage to see if banner was dismissed
+    const isDismissed = localStorage.getItem('teamsBannerDismissed');
+    if (!isDismissed) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    setIsVisible(false);
+    localStorage.setItem('teamsBannerDismissed', 'true');
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.teamsBanner} role="banner" aria-label="Roo Code Teams announcement">
+      <div className={styles.teamsBannerContent}>
+        <span className={styles.teamsBannerHeadline}>Ship Faster with Roo Code Teams.</span>
+        <a
+          className={styles.teamsBannerLink}
+          href="https://app.roocode.com/l/teams?utm_source=docs&utm_medium=banner&utm_campaign=teams_promo"
+          target="_blank"
+          rel="noopener noreferrer">
+          Get early access now.
+        </a>
+      </div>
+      <button
+        className={styles.teamsBannerDismiss}
+        onClick={handleDismiss}
+        aria-label="Dismiss banner"
+        type="button">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true">
+          <path
+            d="M12.5 3.5L3.5 12.5M3.5 3.5L12.5 12.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export default TeamsBanner;

src/components/TeamsBanner/styles.module.css

@@ -0,0 +1,85 @@
+.teamsBanner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.85rem 1.1rem;
+  background: linear-gradient(90deg, #4f46e5, #2563eb);
+  color: #ffffff;
+}
+
+.teamsBannerContent {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.teamsBannerHeadline {
+  font-weight: 600;
+}
+
+.teamsBannerLink {
+  color: #ffffff;
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.7);
+  text-decoration-thickness: 2px;
+}
+
+.teamsBannerLink:hover {
+  color: #ffffff;
+  text-decoration-color: rgba(255, 255, 255, 0.95);
+}
+
+.teamsBannerDismiss {
+  position: absolute;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.teamsBannerDismiss:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.teamsBannerDismiss:focus {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+@media (max-width: 768px) {
+  .teamsBanner {
+    padding: 0.75rem 1rem;
+  }
+
+  .teamsBannerContent {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 2rem; /* Space for close button */
+    font-size: 0.875rem; /* Smaller font size for mobile */
+  }
+
+  .teamsBannerHeadline {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .teamsBannerLink {
+    white-space: nowrap;
+  }
+
+  .teamsBannerDismiss {
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

src/theme/DocBreadcrumbs/index.tsx

@@ -60,24 +60,9 @@ export default function DocBreadcrumbs(): ReactNode {
     return null;
   }
 
-  const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
-  const showTeamsBanner = lastBreadcrumb?.label === 'Welcome';
-
   return (
     <>
       <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
-      {showTeamsBanner && (
-        <div className={styles.teamsPromo} role="complementary" aria-label="Roo Code Teams announcement">
-          <span className={styles.teamsPromoHeadline}>Ship Faster with Roo Code Teams.</span>
-          <a
-            className={styles.teamsPromoLink}
-            href="https://app.roocode.com/l/teams?utm_source=docs&utm_medium=banner&utm_campaign=teams_promo"
-            target="_blank"
-            rel="noopener noreferrer">
-            Get early access now.
-          </a>
-        </div>
-      )}
       <nav
         className={clsx(
           ThemeClassNames.docs.docBreadcrumbs,

src/theme/DocBreadcrumbs/styles.module.css

@@ -14,42 +14,3 @@
   margin: 0;
   flex: 1;
 }
-
-.teamsPromo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding: 0.85rem 1.1rem;
-  border-radius: calc(var(--radius) + 8px);
-  background: linear-gradient(90deg, #4f46e5, #2563eb);
-  border: 1px solid rgba(147, 197, 253, 0.5);
-  margin-bottom: 1rem;
-  color: #ffffff;
-  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
-}
-
-.teamsPromoHeadline {
-  font-weight: 600;
-}
-
-.teamsPromoLink {
-  color: #ffffff;
-  font-weight: 600;
-  text-decoration: underline;
-  text-decoration-color: rgba(255, 255, 255, 0.7);
-  text-decoration-thickness: 2px;
-}
-
-.teamsPromoLink:hover {
-  text-decoration-color: rgba(255, 255, 255, 0.95);
-}
-
-@media (max-width: 768px) {
-  .teamsPromo {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding: 1rem;
-  }
-}

src/theme/Layout/index.js

@@ -3,10 +3,12 @@ import OriginalLayout from '@theme-original/Layout';
 import { AnimatedBackground } from '../../components/AnimatedBackground';
 import { CookieConsent } from '../../components/CookieConsent';
 import { PostHogProvider } from '../../components/PostHogProvider';
+import { TeamsBanner } from '../../components/TeamsBanner';
 
 export default function Layout(props) {
   return (
     <PostHogProvider>
+      <TeamsBanner />
       <AnimatedBackground />
       <OriginalLayout {...props} />
       <CookieConsent />