feat(web): redesign Roomote announcement banner with violet branding (#12161)
Some checks failed
Code QA Roo Code / check-translations (push) Has been cancelled
Code QA Roo Code / knip (push) Has been cancelled
Code QA Roo Code / compile (push) Has been cancelled
Code QA Roo Code / platform-unit-test (ubuntu-latest) (push) Has been cancelled
Code QA Roo Code / platform-unit-test (windows-latest) (push) Has been cancelled
Deploy roocode.com / check-secrets (push) Has been cancelled
CodeQL Advanced / Analyze (javascript-typescript) (push) Has been cancelled
Nightly Publish / publish-nightly (push) Has been cancelled
Deploy roocode.com / deploy (push) Has been cancelled

Co-authored-by: Roo Code <roomote@roocode.com>
This commit is contained in:
roomote-v0[bot] 2026-04-21 11:40:35 -06:00 committed by GitHub
parent b4f2a242bc
commit c4547d25c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

View file

@ -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} />

View file

@ -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>
)
}