From b22fdf46e0918b66b9f958d6b5327f2e3edba8bb Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Mon, 20 Apr 2026 19:45:11 +0000
Subject: [PATCH] fix(web): match Roomote banner to actual roomote.dev lime
 green branding

---
 apps/web-roo-code/src/app/globals.css         |  9 -------
 .../components/RoomoteAnnouncementBanner.tsx  | 24 ++++++++-----------
 apps/web-roo-code/tailwind.config.ts          |  1 -
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/apps/web-roo-code/src/app/globals.css b/apps/web-roo-code/src/app/globals.css
index cb06940bfb..e7a3a03e9d 100644
--- a/apps/web-roo-code/src/app/globals.css
+++ b/apps/web-roo-code/src/app/globals.css
@@ -70,12 +70,3 @@
 		@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/components/RoomoteAnnouncementBanner.tsx b/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx
index 8d126629ab..02448fb0fa 100644
--- a/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx
+++ b/apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx
@@ -1,30 +1,26 @@
 "use client"
 
-import { ArrowRight, Sparkles } from "lucide-react"
+import { ArrowRight } 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" />
+		<div className="relative overflow-hidden bg-[#c8f525] text-black">
+			<div className="relative flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-5 px-4 py-3.5 sm:py-4">
+				<div className="flex items-center gap-3">
+					<span className="inline-flex items-center rounded-full bg-black text-[#c8f525] px-3 py-1 text-xs font-bold uppercase tracking-wider">
 						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 className="text-sm sm:text-base font-bold tracking-tight">
+						Introducing Roomote — the always-on engineer for your entire team
 					</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" />
+					className="group inline-flex items-center gap-1.5 rounded-full bg-black text-white px-5 py-2 text-sm font-bold hover:bg-gray-900 transition-colors duration-200">
+					Learn more
+					<ArrowRight className="size-4 transition-transform duration-200 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 723a1806fe..870371f32f 100644
--- a/apps/web-roo-code/tailwind.config.ts
+++ b/apps/web-roo-code/tailwind.config.ts
@@ -106,7 +106,6 @@ 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",