feat: replace cloud waitlist ad with direct Cloud link in navigation (#7742)

Co-authored-by: Roo Code <[email protected]>

Author: roomote[bot]

apps/web-roo-code/next.config.ts

@@ -21,7 +21,7 @@ const nextConfig: NextConfig = {
 				destination: "https://roocode.com/:path*",
 				permanent: true,
 			},
-			// Redirect cloud waitlist to Notion page
+			// Redirect cloud waitlist to Notion page (kept for extension compatibility)
 			{
 				source: "/cloud-waitlist",
 				destination: "https://roo-code.notion.site/238fd1401b0a8087b858e1ad431507cf?pvs=105",

apps/web-roo-code/src/components/chromes/nav-bar.tsx

@@ -69,19 +69,13 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
 						Community
 					</a>
-					<div className="flex items-center rounded-full bg-gradient-to-r from-blue-400 to-cyan-400 p-0.5 text-xs">
-						<div className="rounded-full bg-background px-2 py-1.5">
-							<span className="text-muted-foreground border-r-2 border-foreground/50 pr-1.5">
-								Roo Code Cloud is coming
-							</span>
-							<a
-								href="/cloud-waitlist"
-								rel="noopener noreferrer"
-								className="font-medium text-primary hover:underline pl-1.5">
-								Sign up
-							</a>
-						</div>
-					</div>
+					<a
+						href={EXTERNAL_LINKS.CLOUD_APP}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-muted-foreground transition-transform duration-200 hover:scale-105 hover:text-foreground">
+						Cloud
+					</a>
 				</nav>
 
 				<div className="hidden md:flex md:items-center md:space-x-4">
@@ -121,19 +115,6 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 			<div
 				className={`absolute left-0 right-0 top-16 z-50 transform border-b border-border bg-background shadow-lg backdrop-blur-none transition-all duration-200 md:hidden ${isMenuOpen ? "translate-y-0 opacity-100" : "pointer-events-none -translate-y-2 opacity-0"}`}>
 				<nav className="flex flex-col py-2">
-					<div className="mx-5 mb-2 flex items-center rounded-full bg-gradient-to-r from-blue-400 to-cyan-400 p-0.5 text-xs">
-						<div className="flex-grow text-center rounded-full bg-background px-2 py-1.5">
-							<span className="text-muted-foreground border-r-2 border-foreground/50 pr-3">
-								Roo Code Cloud is coming
-							</span>
-							<a
-								href="/cloud-waitlist"
-								rel="noopener noreferrer"
-								className="font-medium text-primary hover:underline pl-3">
-								Sign up
-							</a>
-						</div>
-					</div>
 					<ScrollButton
 						targetId="features"
 						className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
@@ -181,6 +162,14 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						onClick={() => setIsMenuOpen(false)}>
 						Community
 					</a>
+					<a
+						href={EXTERNAL_LINKS.CLOUD_APP}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="w-full px-8 py-3 text-left text-sm font-medium text-foreground/80 transition-colors hover:bg-accent hover:text-foreground"
+						onClick={() => setIsMenuOpen(false)}>
+						Cloud
+					</a>
 
 					<hr className="mx-8 my-2 border-t border-border/50" />
 

apps/web-roo-code/src/lib/constants.ts

@@ -24,6 +24,7 @@ export const EXTERNAL_LINKS = {
 	OFFICE_HOURS_PODCAST: "https://www.youtube.com/@RooCodeYT/podcasts",
 	FAQ: "https://roocode.com/#faq",
 	TESTIMONIALS: "https://roocode.com/#testimonials",
+	CLOUD_APP: "https://app.roocode.com",
 }
 
 export const INTERNAL_LINKS = {