From c6526081ba96c0f2810aac291ac73678f5f8d33b Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Mon, 20 Apr 2026 19:41:34 +0000
Subject: [PATCH] feat(web): redesign Roomote announcement banner with violet
 branding

---
 apps/web-roo-code/src/app/globals.css         |  9 ++++++
 apps/web-roo-code/src/app/layout.tsx          | 12 ++-----
 .../components/RoomoteAnnouncementBanner.tsx  | 32 +++++++++++++++++++
 apps/web-roo-code/tailwind.config.ts          |  1 +
 4 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx

diff --git a/apps/web-roo-code/src/app/globals.css b/apps/web-roo-code/src/app/globals.css
index e7a3a03e9d..cb06940bfb 100644
--- a/apps/web-roo-code/src/app/globals.css
+++ b/apps/web-roo-code/src/app/globals.css
@@ -70,3 +70,12 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+@keyframes banner-shimmer {
+	0% {
+		background-position: 200% 0;
+	}
+	100% {
+		background-position: -200% 0;
+	}
+}
diff --git a/apps/web-roo-code/src/app/layout.tsx b/apps/web-roo-code/src/app/layout.tsx
index 2691e96ebd..b23a258f15 100644
--- a/apps/web-roo-code/src/app/layout.tsx
+++ b/apps/web-roo-code/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from "next/font/google"
 import { SEO } from "@/lib/seo"
 import { ogImageUrl } from "@/lib/og"
 import { CookieConsentWrapper } from "@/components/CookieConsentWrapper"
+import { RoomoteAnnouncementBanner } from "@/components/RoomoteAnnouncementBanner"
 
 import { Providers } from "@/components/providers"
 
@@ -97,16 +98,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 				/>
 			</head>
 			<body className={inter.className}>
-				<div className="bg-black text-white text-center py-4 px-4 text-sm">
-					The Roo Code team is about to launch something new.{" "}
-					<a
-						href="https://roomote.dev"
-						target="_blank"
-						rel="noopener noreferrer"
-						className="inline-block ml-2 rounded-full bg-white text-black px-4 py-1 text-sm font-medium hover:bg-gray-200 transition-colors">
-						Check out Roomote
-					</a>
-				</div>
+				<RoomoteAnnouncementBanner />
 				<div itemScope itemType="https://schema.org/WebSite">
 					<link itemProp="url" href={SEO.url} />
 					<meta itemProp="name" content={SEO.name} />
diff --git a/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx b/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx
new file mode 100644
index 0000000000..8d126629ab
--- /dev/null
+++ b/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { ArrowRight, Sparkles } from "lucide-react"
+
+export function RoomoteAnnouncementBanner() {
+	return (
+		<div className="relative overflow-hidden bg-gradient-to-r from-violet-700 via-purple-600 to-violet-700 text-white">
+			{/* Animated shimmer overlay */}
+			<div className="pointer-events-none absolute inset-0 bg-[length:200%_100%] animate-banner-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+
+			<div className="relative flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4 py-3 sm:py-4">
+				<div className="flex items-center gap-2">
+					<span className="inline-flex items-center gap-1.5 rounded-full bg-white/20 backdrop-blur-sm px-3 py-1 text-xs font-semibold uppercase tracking-wider">
+						<Sparkles className="size-3.5" />
+						New
+					</span>
+					<p className="text-sm sm:text-base font-medium">
+						Introducing <span className="font-bold">Roomote</span> — AI-powered coding, now in Slack
+					</p>
+				</div>
+				<a
+					href="https://roomote.dev"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="group inline-flex items-center gap-1.5 rounded-full bg-white text-violet-700 px-5 py-2 text-sm font-bold shadow-lg shadow-violet-900/30 hover:bg-violet-50 hover:shadow-violet-900/40 transition-all duration-300">
+					Explore Roomote
+					<ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
+				</a>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/web-roo-code/tailwind.config.ts b/apps/web-roo-code/tailwind.config.ts
index 870371f32f..723a1806fe 100644
--- a/apps/web-roo-code/tailwind.config.ts
+++ b/apps/web-roo-code/tailwind.config.ts
@@ -106,6 +106,7 @@ const config: Config = {
 				"fade-in": "fade-in 0.5s ease-out",
 				"fade-out": "fade-out 0.5s ease-out",
 				"pulse-glow": "pulse-glow 3s infinite",
+				"banner-shimmer": "banner-shimmer 3s ease-in-out infinite",
 			},
 			screens: {
 				xs: "420px",