ux: Updates announcement banner to Reviewer (#386)

* Changes top announcementbanner to be more reusable and changes content to be about the reviewer

* Visual tweak

* Typo

* Undo asdf shennaniggans

Author: brunobergher

src/components/AnnouncementBanner/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import { VscGitPullRequest, VscClose } from 'react-icons/vsc';
+import styles from './styles.module.css';
+
+// Change this key whenever you change the banner
+// to announce something new
+const BANNER_DISMISSED_KEY = 'reviewer-banner-dismissed';
+
+export function AnnouncementBanner() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Check if banner was previously dismissed
+    const isDismissed = localStorage.getItem(BANNER_DISMISSED_KEY);
+    if (!isDismissed) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  const handleDismiss = () => {
+    setIsVisible(false);
+    localStorage.setItem(BANNER_DISMISSED_KEY, 'true');
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.announcementBanner} role="complementary" aria-label="Product announcement">
+      <div className={styles.bannerContent}>
+        <VscGitPullRequest size={20} color="#ffffff" />
+        <span className={styles.bannerHeadline}>
+          Get comprehensive, actionable reviews directly in your PRs.
+        </span>
+        <a
+          className={styles.bannerLink}
+          href="https://roocode.com/reviewer?utm_source=docs&utm_medium=banner&utm_campaign=reviewer_promo"
+          target="_blank"
+          rel="noopener noreferrer">
+          Try Roo&apos;s PR Reviewer
+        </a>
+        <button
+          className={styles.dismissButton}
+          onClick={handleDismiss}
+          aria-label="Dismiss announcement"
+          type="button">
+          <VscClose size={18} />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/AnnouncementBanner/styles.module.css

@@ -0,0 +1,84 @@
+.announcementBanner {
+  position: relative;
+  width: 100%;
+  background: linear-gradient(90deg, #4f46e5, #2563eb);
+  border-bottom: 1px solid rgba(147, 197, 253, 0.5);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+}
+
+.bannerContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.75rem 3rem;
+  color: #ffffff;
+  position: relative;
+}
+
+.bannerHeadline {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.bannerLink {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.7);
+  text-decoration-thickness: 2px;
+  transition: text-decoration-color 0.2s ease;
+}
+
+.bannerLink:hover {
+  color: #ffffff;
+  text-decoration-color: rgba(255, 255, 255, 0.95);
+}
+
+.dismissButton {
+  position: absolute;
+  right: 1rem;
+  top: 1.5rem;
+  transform: translateY(-50%);
+  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;
+}
+
+.dismissButton:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dismissButton:focus {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+@media (max-width: 768px) {
+  .bannerContent {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem 3rem 1rem 1rem;
+    align-items: flex-start;
+  }
+
+  .bannerHeadline {
+    font-size: 0.875rem;
+  }
+
+  .bannerLink {
+    font-size: 0.875rem;
+  }
+
+  .dismissButton {
+    right: 0.5rem;
+  }
+}

src/theme/Layout/index.js

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