feat(web): redesign Roomote announcement banner with violet branding (#12161)

roomote-v0[bot] · roomote · web-flow · commit c4547d25c56c · 2026-04-21T11:40:35.000-06:00
Co-authored-by: Roo Code &lt;roomote@roocode.com&gt;
diff --git a/apps/web-roo-code/public/logos/roomote-logo.png b/apps/web-roo-code/public/logos/roomote-logo.png
diff --git 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
@@ -0,0 +1,37 @@
+"use client"
+
+import Image from "next/image"
+import { DM_Sans } from "next/font/google"
+import { ArrowRight } from "lucide-react"
+
+const dmSans = DM_Sans({
+	subsets: ["latin"],
+	weight: ["500", "700", "800"],
+})
+
+export function RoomoteAnnouncementBanner() {
+	return (
+		<div className={`relative overflow-hidden bg-[#d8f14b] text-black ${dmSans.className}`}>
+			<div className="relative flex flex-col items-center justify-center gap-3 px-6 py-5 sm:py-6">
+				<p className="text-base sm:text-lg md:text-xl font-extrabold tracking-tight">
+					The Roo Code team just launched something new.
+				</p>
+				<a
+					href="https://roomote.dev"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="group inline-flex shrink-0 items-center gap-2 rounded-full bg-black text-white px-6 py-2.5 text-sm sm:text-base font-bold hover:bg-gray-900 transition-colors duration-200">
+					Check out
+					<Image
+						src="/logos/roomote-logo.png"
+						alt="Roomote"
+						width={100}
+						height={37}
+						className="h-5 sm:h-6 w-auto invert"
+					/>
+					<ArrowRight className="size-4 sm:size-5 transition-transform duration-200 group-hover:translate-x-0.5" />
+				</a>
+			</div>
+		</div>
+	)
+}
