feat(web): add Valentine's Day themed homepage update

Author: roomote

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

@@ -70,3 +70,25 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+/* Valentine's Day floating hearts animation */
+@keyframes float-up {
+	0% {
+		transform: translateY(100%) rotate(0deg);
+		opacity: 0;
+	}
+	10% {
+		opacity: 0.6;
+	}
+	90% {
+		opacity: 0.6;
+	}
+	100% {
+		transform: translateY(-100vh) rotate(360deg);
+		opacity: 0;
+	}
+}
+
+.animate-float-up {
+	animation: float-up linear infinite;
+}

apps/web-roo-code/src/app/page.tsx

@@ -7,6 +7,7 @@ import {
 	OptionOverviewSection,
 	PillarsSection,
 	UseExamplesSection,
+	ValentinesBanner,
 } from "@/components/homepage"
 import { EXTERNAL_LINKS } from "@/lib/constants"
 import { ArrowRight } from "lucide-react"
@@ -19,9 +20,10 @@ export default async function Home() {
 	return (
 		<>
 			<StructuredData />
+			<ValentinesBanner />
 			<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/10 dark:bg-rose-700/20 blur-[140px]" />
 				</div>
 				<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
 					<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">

apps/web-roo-code/src/components/homepage/cta-section.tsx

@@ -1,15 +1,26 @@
 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-muted/30 to-pink-50/30 dark:to-rose-950/10 border-t border-border">
 			<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 animate-pulse" />
+					<span className="text-pink-500 dark:text-pink-400 font-medium">Valentine&apos;s Special</span>
+					<Heart className="h-6 w-6 text-pink-500 fill-pink-500 animate-pulse" />
+				</div>
+				<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">Fall in Love with AI Coding</h2>
+				<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
+					This Valentine&apos;s Day, give your development workflow the love it deserves. Build faster,
+					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 border-0">
 						<a
 							href={EXTERNAL_LINKS.MARKETPLACE}
 							target="_blank"
@@ -20,7 +31,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-800 hover:bg-pink-50 dark:hover:bg-pink-950/20">
 						<a
 							href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
 							target="_blank"

apps/web-roo-code/src/components/homepage/index.ts

@@ -12,3 +12,4 @@ export * from "./cloud-section"
 export * from "./ecosystem-section"
 export * from "./cta-section"
 export * from "./use-examples-section"
+export * from "./valentines-banner"

apps/web-roo-code/src/components/homepage/valentines-banner.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Heart } from "lucide-react"
+
+interface FloatingHeart {
+	id: number
+	left: number
+	delay: number
+	duration: number
+	size: number
+}
+
+export function ValentinesBanner() {
+	const [hearts, setHearts] = useState<FloatingHeart[]>([])
+
+	useEffect(() => {
+		// Create floating hearts on mount
+		const newHearts: FloatingHeart[] = Array.from({ length: 15 }, (_, i) => ({
+			id: i,
+			left: Math.random() * 100,
+			delay: Math.random() * 5,
+			duration: 3 + Math.random() * 4,
+			size: 12 + Math.random() * 16,
+		}))
+		setHearts(newHearts)
+	}, [])
+
+	return (
+		<div className="relative overflow-hidden bg-gradient-to-r from-pink-500/90 via-rose-500/90 to-red-500/90 py-3">
+			{/* Floating hearts background */}
+			<div className="absolute inset-0 pointer-events-none">
+				{hearts.map((heart) => (
+					<div
+						key={heart.id}
+						className="absolute animate-float-up opacity-60"
+						style={{
+							left: `${heart.left}%`,
+							animationDelay: `${heart.delay}s`,
+							animationDuration: `${heart.duration}s`,
+						}}>
+						<Heart
+							className="text-white/40 fill-white/20"
+							style={{ width: heart.size, height: heart.size }}
+						/>
+					</div>
+				))}
+			</div>
+
+			{/* Banner content */}
+			<div className="container mx-auto px-4 relative z-10">
+				<div className="flex items-center justify-center gap-2 text-white font-medium">
+					<Heart className="h-4 w-4 fill-white animate-pulse" />
+					<span className="text-sm md:text-base">
+						Happy Valentine&apos;s Day! Fall in love with AI-powered coding
+					</span>
+					<Heart className="h-4 w-4 fill-white animate-pulse" />
+				</div>
+			</div>
+		</div>
+	)
+}