From 44ff569e772a80c03df58451c024034ea2c0e872 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Thu, 29 Jan 2026 13:54:04 +0000
Subject: [PATCH] feat: add cute valentines day theme to homepage

---
 apps/web-roo-code/src/app/globals.css         | 66 +++++++++++++++++++
 apps/web-roo-code/src/app/page.tsx            | 39 ++++++++---
 .../src/components/homepage/cta-section.tsx   | 29 ++++++--
 .../components/homepage/floating-hearts.tsx   | 64 ++++++++++++++++++
 .../src/components/homepage/index.ts          |  1 +
 5 files changed, 184 insertions(+), 15 deletions(-)
 create mode 100644 apps/web-roo-code/src/components/homepage/floating-hearts.tsx

diff --git a/apps/web-roo-code/src/app/globals.css b/apps/web-roo-code/src/app/globals.css
index e7a3a03e9d8..a62e96568c8 100644
--- a/apps/web-roo-code/src/app/globals.css
+++ b/apps/web-roo-code/src/app/globals.css
@@ -38,6 +38,12 @@
 	--chart-12: 298 100% 50%;
 	--chart-13: 324 100% 50%;
 	--chart-14: 358 100% 50%;
+
+	/* Valentine's Day Theme Colors */
+	--valentine-pink: 330 81% 60%;
+	--valentine-pink-light: 330 81% 75%;
+	--valentine-red: 350 80% 55%;
+	--valentine-rose: 340 82% 52%;
 }
 
 .dark {
@@ -60,6 +66,12 @@
 	--border: 0 0% 14.9%;
 	--input: 0 0% 14.9%;
 	--ring: 0 0% 83.1%;
+
+	/* Valentine's Day Theme Colors (Dark Mode) */
+	--valentine-pink: 330 70% 50%;
+	--valentine-pink-light: 330 70% 65%;
+	--valentine-red: 350 70% 45%;
+	--valentine-rose: 340 72% 42%;
 }
 
 @layer base {
@@ -70,3 +82,57 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+/* Valentine's Day Floating Hearts Animation */
+@keyframes float-heart {
+	0% {
+		transform: translateY(100vh) rotate(0deg) scale(0);
+		opacity: 0;
+	}
+	10% {
+		opacity: 1;
+		transform: translateY(90vh) rotate(15deg) scale(1);
+	}
+	90% {
+		opacity: 1;
+	}
+	100% {
+		transform: translateY(-10vh) rotate(-15deg) scale(0.8);
+		opacity: 0;
+	}
+}
+
+@keyframes pulse-heart {
+	0%,
+	100% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.1);
+	}
+}
+
+@keyframes sparkle {
+	0%,
+	100% {
+		opacity: 0;
+		transform: scale(0);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.floating-heart {
+	animation: float-heart linear forwards;
+	pointer-events: none;
+}
+
+.pulse-heart {
+	animation: pulse-heart 1.5s ease-in-out infinite;
+}
+
+.sparkle {
+	animation: sparkle 2s ease-in-out infinite;
+}
diff --git a/apps/web-roo-code/src/app/page.tsx b/apps/web-roo-code/src/app/page.tsx
index f7ac47cf93e..f212573b354 100644
--- a/apps/web-roo-code/src/app/page.tsx
+++ b/apps/web-roo-code/src/app/page.tsx
@@ -7,9 +7,10 @@ import {
 	OptionOverviewSection,
 	PillarsSection,
 	UseExamplesSection,
+	FloatingHearts,
 } from "@/components/homepage"
 import { EXTERNAL_LINKS } from "@/lib/constants"
-import { ArrowRight } from "lucide-react"
+import { ArrowRight, Heart } from "lucide-react"
 import { StructuredData } from "@/components/structured-data"
 
 // Invalidate cache when a request comes in, at most once every hour.
@@ -19,32 +20,47 @@ export default async function Home() {
 	return (
 		<>
 			<StructuredData />
+			<FloatingHearts />
 			<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-12 md:pt-32 md:pb-16">
 				<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
-					<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 dark:bg-violet-700/20 blur-[140px]" />
+					<div className="absolute left-1/2 top-1/2 h-[400px] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-pink-500/20 dark:bg-pink-700/30 blur-[140px]" />
+					<div className="absolute left-1/4 top-1/3 h-[200px] w-[300px] rounded-full bg-rose-400/15 dark:bg-rose-600/20 blur-[100px]" />
+					<div className="absolute right-1/4 top-2/3 h-[250px] w-[350px] rounded-full bg-red-400/10 dark:bg-red-600/15 blur-[120px]" />
 				</div>
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
+					{/* Valentine's Day Banner */}
+					<div className="mb-6 flex items-center gap-2 rounded-full bg-pink-100 dark:bg-pink-950/50 px-4 py-2 text-sm font-medium text-pink-700 dark:text-pink-300 border border-pink-200 dark:border-pink-800">
+						<Heart className="h-4 w-4 fill-current pulse-heart" />
+						<span>Happy Valentine&apos;s Day from Roo Code!</span>
+						<Heart className="h-4 w-4 fill-current pulse-heart" />
+					</div>
 					<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">
-						Your AI Software Engineering Team is here.
+						Fall in <span className="text-pink-500 dark:text-pink-400">love</span> with coding again.
 						<br />
-						<span className="text-muted-foreground">Interactive in the IDE, autonomous in the cloud.</span>
+						<span className="text-muted-foreground">Your AI pair that truly cares.</span>
 					</h1>
 					<div className="mt-2 max-w-3xl text-lg text-muted-foreground mb-10 space-y-3">
 						<p>
-							Use the <strong className="text-nowrap">Roo Code Extension</strong> on your computer for
-							full control, or delegate work to your{" "}
-							<strong className="text-nowrap">Roo Code Cloud Agents</strong> from the web, Slack, Github
-							or wherever your team is.
+							Use the{" "}
+							<strong className="text-pink-600 dark:text-pink-400 text-nowrap">Roo Code Extension</strong>{" "}
+							on your computer for full control, or delegate work to your{" "}
+							<strong className="text-rose-600 dark:text-rose-400 text-nowrap">
+								Roo Code Cloud Agents
+							</strong>{" "}
+							from the web, Slack, Github or wherever your team is.
 						</p>
 					</div>
 					<div className="flex flex-col sm:flex-row gap-4 mb-16">
 						<div className="flex flex-col items-center gap-2">
-							<Button size="xl" className="w-full">
+							<Button
+								size="xl"
+								className="w-full bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white border-0">
 								<a
 									href={EXTERNAL_LINKS.MARKETPLACE}
 									target="_blank"
 									rel="noreferrer"
 									className="flex items-center justify-center">
+									<Heart className="mr-2 size-5 fill-current" />
 									Install VS Code Extension
 									<ArrowRight className="ml-2 size-5" />
 								</a>
@@ -53,10 +69,13 @@ export default async function Home() {
 						</div>
 
 						<div className="flex flex-col items-center gap-2">
-							<Button size="xl" className="w-full">
+							<Button
+								size="xl"
+								className="w-full bg-gradient-to-r from-rose-500 to-red-500 hover:from-rose-600 hover:to-red-600 text-white border-0">
 								<a
 									href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
 									className="flex items-center justify-center">
+									<Heart className="mr-2 size-5 fill-current" />
 									Try Cloud for Free
 									<ArrowRight className="ml-2 size-5" />
 								</a>
diff --git a/apps/web-roo-code/src/components/homepage/cta-section.tsx b/apps/web-roo-code/src/components/homepage/cta-section.tsx
index cd9a54487d9..4859671eb28 100644
--- a/apps/web-roo-code/src/components/homepage/cta-section.tsx
+++ b/apps/web-roo-code/src/components/homepage/cta-section.tsx
@@ -1,15 +1,31 @@
 import { Button } from "@/components/ui"
-import { ArrowRight, Download } from "lucide-react"
+import { ArrowRight, Download, Heart } from "lucide-react"
 import { EXTERNAL_LINKS } from "@/lib/constants"
 
 export function CTASection() {
 	return (
-		<section className="py-24 bg-muted/30 border-t border-border">
+		<section className="py-24 bg-gradient-to-b from-pink-50/50 to-rose-50/30 dark:from-pink-950/20 dark:to-rose-950/10 border-t border-pink-200 dark:border-pink-900/30">
 			<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
-				<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">Build faster. Solo or Together.</h2>
+				<div className="flex items-center justify-center gap-2 mb-4">
+					<Heart className="h-6 w-6 text-pink-500 fill-pink-500 pulse-heart" />
+					<Heart
+						className="h-8 w-8 text-rose-500 fill-rose-500 pulse-heart"
+						style={{ animationDelay: "0.2s" }}
+					/>
+					<Heart
+						className="h-6 w-6 text-red-500 fill-red-500 pulse-heart"
+						style={{ animationDelay: "0.4s" }}
+					/>
+				</div>
+				<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">
+					Code with <span className="text-pink-500 dark:text-pink-400">love</span>.
+				</h2>
+				<p className="text-lg text-muted-foreground mb-8">Build faster. Solo or Together.</p>
 
 				<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-					<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
+					<Button
+						size="lg"
+						className="w-full sm:w-auto h-12 px-8 text-base bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-600 hover:to-rose-600 text-white border-0">
 						<a
 							href={EXTERNAL_LINKS.MARKETPLACE}
 							target="_blank"
@@ -20,7 +36,10 @@ export function CTASection() {
 						</a>
 					</Button>
 
-					<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
+					<Button
+						variant="outline"
+						size="lg"
+						className="w-full sm:w-auto h-12 px-8 text-base border-pink-300 dark:border-pink-700 text-pink-600 dark:text-pink-400 hover:bg-pink-50 dark:hover:bg-pink-950/50">
 						<a
 							href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
 							target="_blank"
diff --git a/apps/web-roo-code/src/components/homepage/floating-hearts.tsx b/apps/web-roo-code/src/components/homepage/floating-hearts.tsx
new file mode 100644
index 00000000000..61e9de67421
--- /dev/null
+++ b/apps/web-roo-code/src/components/homepage/floating-hearts.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+interface Heart {
+	id: number
+	left: number
+	size: number
+	duration: number
+	delay: number
+	opacity: number
+}
+
+export function FloatingHearts() {
+	const [hearts, setHearts] = useState<Heart[]>([])
+
+	useEffect(() => {
+		// Generate initial hearts
+		const initialHearts: Heart[] = Array.from({ length: 15 }, (_, i) => ({
+			id: i,
+			left: Math.random() * 100,
+			size: Math.random() * 20 + 12,
+			duration: Math.random() * 10 + 15,
+			delay: Math.random() * 10,
+			opacity: Math.random() * 0.4 + 0.2,
+		}))
+		setHearts(initialHearts)
+	}, [])
+
+	return (
+		<div className="fixed inset-0 overflow-hidden pointer-events-none z-0" aria-hidden="true">
+			{hearts.map((heart) => (
+				<div
+					key={heart.id}
+					className="absolute floating-heart"
+					style={{
+						left: `${heart.left}%`,
+						fontSize: `${heart.size}px`,
+						animationDuration: `${heart.duration}s`,
+						animationDelay: `${heart.delay}s`,
+						opacity: heart.opacity,
+					}}>
+					<HeartIcon />
+				</div>
+			))}
+		</div>
+	)
+}
+
+function HeartIcon() {
+	const colors = [
+		"hsl(var(--valentine-pink))",
+		"hsl(var(--valentine-pink-light))",
+		"hsl(var(--valentine-red))",
+		"hsl(var(--valentine-rose))",
+	]
+	const color = colors[Math.floor(Math.random() * colors.length)]
+
+	return (
+		<svg viewBox="0 0 24 24" fill={color} className="w-[1em] h-[1em]">
+			<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+		</svg>
+	)
+}
diff --git a/apps/web-roo-code/src/components/homepage/index.ts b/apps/web-roo-code/src/components/homepage/index.ts
index faafc908cc1..f5ad63cccb4 100644
--- a/apps/web-roo-code/src/components/homepage/index.ts
+++ b/apps/web-roo-code/src/components/homepage/index.ts
@@ -3,6 +3,7 @@ export * from "./code-example"
 export * from "./company-logos"
 export * from "./faq-section"
 export * from "./features"
+export * from "./floating-hearts"
 export * from "./install-section"
 export * from "./testimonials"
 export * from "./whats-new-button"