Skip to content
This repository was archived by the owner on May 15, 2026. It is now read-only.

Commit c652608

Browse files
roomoteroomote
committed
feat(web): redesign Roomote announcement banner with violet branding
1 parent 3e202eb commit c652608

4 files changed

Lines changed: 44 additions & 10 deletions

File tree

‎apps/web-roo-code/src/app/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,12 @@
7070
@apply bg-background text-foreground;
7171
}
7272
}
73+
74+
@keyframes banner-shimmer {
75+
0% {
76+
background-position: 200% 0;
77+
}
78+
100% {
79+
background-position: -200% 0;
80+
}
81+
}

‎apps/web-roo-code/src/app/layout.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Inter } from "next/font/google"
44
import { SEO } from "@/lib/seo"
55
import { ogImageUrl } from "@/lib/og"
66
import { CookieConsentWrapper } from "@/components/CookieConsentWrapper"
7+
import { RoomoteAnnouncementBanner } from "@/components/RoomoteAnnouncementBanner"
78

89
import { Providers } from "@/components/providers"
910

@@ -97,16 +98,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
9798
/>
9899
</head>
99100
<body className={inter.className}>
100-
<div className="bg-black text-white text-center py-4 px-4 text-sm">
101-
The Roo Code team is about to launch something new.{" "}
102-
<a
103-
href="https://roomote.dev"
104-
target="_blank"
105-
rel="noopener noreferrer"
106-
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">
107-
Check out Roomote
108-
</a>
109-
</div>
101+
<RoomoteAnnouncementBanner />
110102
<div itemScope itemType="https://schema.org/WebSite">
111103
<link itemProp="url" href={SEO.url} />
112104
<meta itemProp="name" content={SEO.name} />

‎apps/web-roo-code/src/components/RoomoteAnnouncementBanner.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
"use client"
2+
3+
import { ArrowRight, Sparkles } from "lucide-react"
4+
5+
export function RoomoteAnnouncementBanner() {
6+
return (
7+
<div className="relative overflow-hidden bg-gradient-to-r from-violet-700 via-purple-600 to-violet-700 text-white">
8+
{/* Animated shimmer overlay */}
9+
<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" />
10+
11+
<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">
12+
<div className="flex items-center gap-2">
13+
<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">
14+
<Sparkles className="size-3.5" />
15+
New
16+
</span>
17+
<p className="text-sm sm:text-base font-medium">
18+
Introducing <span className="font-bold">Roomote</span> — AI-powered coding, now in Slack
19+
</p>
20+
</div>
21+
<a
22+
href="https://roomote.dev"
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
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">
26+
Explore Roomote
27+
<ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
28+
</a>
29+
</div>
30+
</div>
31+
)
32+
}

‎apps/web-roo-code/tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ const config: Config = {
106106
"fade-in": "fade-in 0.5s ease-out",
107107
"fade-out": "fade-out 0.5s ease-out",
108108
"pulse-glow": "pulse-glow 3s infinite",
109+
"banner-shimmer": "banner-shimmer 3s ease-in-out infinite",
109110
},
110111
screens: {
111112
xs: "420px",

0 commit comments

Comments
 (0)