diff --git a/apps/web-roo-code/src/app/globals.css b/apps/web-roo-code/src/app/globals.css
index e7a3a03e9d8..ad82569577f 100644
--- a/apps/web-roo-code/src/app/globals.css
+++ b/apps/web-roo-code/src/app/globals.css
@@ -70,3 +70,48 @@
@apply bg-background text-foreground;
}
}
+
+/* Valentine's Day Theme Animations */
+@keyframes heartbeat {
+ 0%,
+ 100% {
+ transform: scale(1);
+ }
+ 15% {
+ transform: scale(1.2);
+ }
+ 30% {
+ transform: scale(1);
+ }
+ 45% {
+ transform: scale(1.15);
+ }
+ 60% {
+ transform: scale(1);
+ }
+}
+
+@keyframes float-up {
+ 0% {
+ transform: translateY(0) rotate(0deg);
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-100vh) rotate(360deg);
+ opacity: 0;
+ }
+}
+
+.animate-heartbeat {
+ animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+.animate-float-up {
+ animation: float-up linear infinite;
+}
diff --git a/apps/web-roo-code/src/app/page.tsx b/apps/web-roo-code/src/app/page.tsx
index f7ac47cf93e..071e143084d 100644
--- a/apps/web-roo-code/src/app/page.tsx
+++ b/apps/web-roo-code/src/app/page.tsx
@@ -7,35 +7,81 @@ 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.
export const revalidate = 3600
+// Check if current date is Valentine's season (Feb 1-15)
+function isValentinesSeason() {
+ const now = new Date()
+ const month = now.getMonth() // 0-indexed, so February is 1
+ const day = now.getDate()
+ return month === 1 && day >= 1 && day <= 15
+}
+
export default async function Home() {
+ const isValentines = isValentinesSeason()
+
return (
<>
+
- Your AI Software Engineering Team is here.
-
- Interactive in the IDE, autonomous in the cloud.
+ {isValentines ? (
+ <>
+
+ Fall in{" "}
+ {" "}
+ with coding again.
+
+
+
+ Your AI pair that truly cares.
+
+ >
+ ) : (
+ <>
+ Your AI Software Engineering Team is here.
+
+
+ Interactive in the IDE, autonomous in the cloud.
+
+ >
+ )}
-
- Use the Roo Code Extension on your computer for
- full control, or delegate work to your{" "}
- Roo Code Cloud Agents from the web, Slack, Github
- or wherever your team is.
-
+ {isValentines ? (
+
+ This Valentine's season, let{" "}
+ Roo Code be your perfect coding
+ companion. Use the Extension for hands-on
+ collaboration, or let your Cloud Agents handle
+ the heavy lifting while you focus on what you love.
+
+ ) : (
+
+ Use the Roo Code Extension on your computer for
+ full control, or delegate work to your{" "}
+ Roo Code Cloud Agents from the web, Slack,
+ Github or wherever your team is.
+
+ )}
@@ -65,9 +111,11 @@ export default async function Home() {
-
-
-
+ {!isValentines && (
+
+
+
+ )}
diff --git a/apps/web-roo-code/src/app/shell.tsx b/apps/web-roo-code/src/app/shell.tsx
index 84a42bed21b..c54826ba3f2 100644
--- a/apps/web-roo-code/src/app/shell.tsx
+++ b/apps/web-roo-code/src/app/shell.tsx
@@ -1,6 +1,7 @@
import { getGitHubStars, getVSCodeDownloads } from "@/lib/stats"
import { NavBar, Footer } from "@/components/chromes"
+import { ValentinesBanner } from "@/components/homepage"
// Invalidate cache when a request comes in, at most once every hour.
export const revalidate = 3600
@@ -10,6 +11,7 @@ export default async function Shell({ children }: { children: React.ReactNode })
return (
+
{children}
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..53616b8f9c3
--- /dev/null
+++ b/apps/web-roo-code/src/components/homepage/floating-hearts.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+interface FloatingHeart {
+ id: number
+ left: number
+ size: number
+ duration: number
+ delay: number
+ opacity: number
+}
+
+export function FloatingHearts() {
+ const [hearts, setHearts] = useState
([])
+ const [isVisible, setIsVisible] = useState(true)
+
+ useEffect(() => {
+ // Check if we're in the Valentine's date range (Feb 1-15)
+ const now = new Date()
+ const month = now.getMonth() // 0-indexed, so February is 1
+ const day = now.getDate()
+ const isValentinesSeason = month === 1 && day >= 1 && day <= 15
+ setIsVisible(isValentinesSeason)
+
+ if (!isValentinesSeason) return
+
+ // Generate random hearts
+ const generatedHearts: FloatingHeart[] = Array.from({ length: 15 }, (_, i) => ({
+ id: i,
+ left: Math.random() * 100,
+ size: 12 + Math.random() * 16,
+ duration: 8 + Math.random() * 12,
+ delay: Math.random() * 10,
+ opacity: 0.1 + Math.random() * 0.2,
+ }))
+ setHearts(generatedHearts)
+ }, [])
+
+ if (!isVisible || hearts.length === 0) return null
+
+ return (
+
+ {hearts.map((heart) => (
+
+ ❤
+
+ ))}
+
+ )
+}
diff --git a/apps/web-roo-code/src/components/homepage/index.ts b/apps/web-roo-code/src/components/homepage/index.ts
index faafc908cc1..745148adbd3 100644
--- a/apps/web-roo-code/src/components/homepage/index.ts
+++ b/apps/web-roo-code/src/components/homepage/index.ts
@@ -12,3 +12,5 @@ export * from "./cloud-section"
export * from "./ecosystem-section"
export * from "./cta-section"
export * from "./use-examples-section"
+export * from "./valentines-banner"
+export * from "./floating-hearts"
diff --git a/apps/web-roo-code/src/components/homepage/valentines-banner.tsx b/apps/web-roo-code/src/components/homepage/valentines-banner.tsx
new file mode 100644
index 00000000000..1c99dfe5fec
--- /dev/null
+++ b/apps/web-roo-code/src/components/homepage/valentines-banner.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import { Heart, Sparkles } from "lucide-react"
+import { useEffect, useState } from "react"
+
+export function ValentinesBanner() {
+ const [isVisible, setIsVisible] = useState(true)
+
+ // Check if we're in the Valentine's date range (Feb 1-15)
+ useEffect(() => {
+ const now = new Date()
+ const month = now.getMonth() // 0-indexed, so February is 1
+ const day = now.getDate()
+ // Show banner from Feb 1-15
+ const isValentinesSeason = month === 1 && day >= 1 && day <= 15
+ setIsVisible(isValentinesSeason)
+ }, [])
+
+ if (!isVisible) return null
+
+ return (
+
+ {/* Animated sparkles background */}
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+
+
+
+ Happy Valentine's Day! Spread the love and build something amazing with Roo Code
+
+
+
+ )
+}