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

Commit 44ff569

Browse files
roomoteroomote
committed
feat: add cute valentines day theme to homepage
1 parent 40b2bdc commit 44ff569

5 files changed

Lines changed: 184 additions & 15 deletions

File tree

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
--chart-12: 298 100% 50%;
3939
--chart-13: 324 100% 50%;
4040
--chart-14: 358 100% 50%;
41+
42+
/* Valentine's Day Theme Colors */
43+
--valentine-pink: 330 81% 60%;
44+
--valentine-pink-light: 330 81% 75%;
45+
--valentine-red: 350 80% 55%;
46+
--valentine-rose: 340 82% 52%;
4147
}
4248

4349
.dark {
@@ -60,6 +66,12 @@
6066
--border: 0 0% 14.9%;
6167
--input: 0 0% 14.9%;
6268
--ring: 0 0% 83.1%;
69+
70+
/* Valentine's Day Theme Colors (Dark Mode) */
71+
--valentine-pink: 330 70% 50%;
72+
--valentine-pink-light: 330 70% 65%;
73+
--valentine-red: 350 70% 45%;
74+
--valentine-rose: 340 72% 42%;
6375
}
6476

6577
@layer base {
@@ -70,3 +82,57 @@
7082
@apply bg-background text-foreground;
7183
}
7284
}
85+
86+
/* Valentine's Day Floating Hearts Animation */
87+
@keyframes float-heart {
88+
0% {
89+
transform: translateY(100vh) rotate(0deg) scale(0);
90+
opacity: 0;
91+
}
92+
10% {
93+
opacity: 1;
94+
transform: translateY(90vh) rotate(15deg) scale(1);
95+
}
96+
90% {
97+
opacity: 1;
98+
}
99+
100% {
100+
transform: translateY(-10vh) rotate(-15deg) scale(0.8);
101+
opacity: 0;
102+
}
103+
}
104+
105+
@keyframes pulse-heart {
106+
0%,
107+
100% {
108+
transform: scale(1);
109+
}
110+
50% {
111+
transform: scale(1.1);
112+
}
113+
}
114+
115+
@keyframes sparkle {
116+
0%,
117+
100% {
118+
opacity: 0;
119+
transform: scale(0);
120+
}
121+
50% {
122+
opacity: 1;
123+
transform: scale(1);
124+
}
125+
}
126+
127+
.floating-heart {
128+
animation: float-heart linear forwards;
129+
pointer-events: none;
130+
}
131+
132+
.pulse-heart {
133+
animation: pulse-heart 1.5s ease-in-out infinite;
134+
}
135+
136+
.sparkle {
137+
animation: sparkle 2s ease-in-out infinite;
138+
}

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

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import {
77
OptionOverviewSection,
88
PillarsSection,
99
UseExamplesSection,
10+
FloatingHearts,
1011
} from "@/components/homepage"
1112
import { EXTERNAL_LINKS } from "@/lib/constants"
12-
import { ArrowRight } from "lucide-react"
13+
import { ArrowRight, Heart } from "lucide-react"
1314
import { StructuredData } from "@/components/structured-data"
1415

1516
// Invalidate cache when a request comes in, at most once every hour.
@@ -19,32 +20,47 @@ export default async function Home() {
1920
return (
2021
<>
2122
<StructuredData />
23+
<FloatingHearts />
2224
<section className="relative flex flex-col items-center overflow-hidden pt-20 pb-12 md:pt-32 md:pb-16">
2325
<div className="absolute inset-y-0 left-1/2 h-full w-full max-w-[1200px] -translate-x-1/2 z-1">
24-
<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]" />
26+
<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]" />
27+
<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]" />
28+
<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]" />
2529
</div>
2630
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
31+
{/* Valentine's Day Banner */}
32+
<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">
33+
<Heart className="h-4 w-4 fill-current pulse-heart" />
34+
<span>Happy Valentine&apos;s Day from Roo Code!</span>
35+
<Heart className="h-4 w-4 fill-current pulse-heart" />
36+
</div>
2737
<h1 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground max-w-4xl mb-6">
28-
Your AI Software Engineering Team is here.
38+
Fall in <span className="text-pink-500 dark:text-pink-400">love</span> with coding again.
2939
<br />
30-
<span className="text-muted-foreground">Interactive in the IDE, autonomous in the cloud.</span>
40+
<span className="text-muted-foreground">Your AI pair that truly cares.</span>
3141
</h1>
3242
<div className="mt-2 max-w-3xl text-lg text-muted-foreground mb-10 space-y-3">
3343
<p>
34-
Use the <strong className="text-nowrap">Roo Code Extension</strong> on your computer for
35-
full control, or delegate work to your{" "}
36-
<strong className="text-nowrap">Roo Code Cloud Agents</strong> from the web, Slack, Github
37-
or wherever your team is.
44+
Use the{" "}
45+
<strong className="text-pink-600 dark:text-pink-400 text-nowrap">Roo Code Extension</strong>{" "}
46+
on your computer for full control, or delegate work to your{" "}
47+
<strong className="text-rose-600 dark:text-rose-400 text-nowrap">
48+
Roo Code Cloud Agents
49+
</strong>{" "}
50+
from the web, Slack, Github or wherever your team is.
3851
</p>
3952
</div>
4053
<div className="flex flex-col sm:flex-row gap-4 mb-16">
4154
<div className="flex flex-col items-center gap-2">
42-
<Button size="xl" className="w-full">
55+
<Button
56+
size="xl"
57+
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">
4358
<a
4459
href={EXTERNAL_LINKS.MARKETPLACE}
4560
target="_blank"
4661
rel="noreferrer"
4762
className="flex items-center justify-center">
63+
<Heart className="mr-2 size-5 fill-current" />
4864
Install VS Code Extension
4965
<ArrowRight className="ml-2 size-5" />
5066
</a>
@@ -53,10 +69,13 @@ export default async function Home() {
5369
</div>
5470

5571
<div className="flex flex-col items-center gap-2">
56-
<Button size="xl" className="w-full">
72+
<Button
73+
size="xl"
74+
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">
5775
<a
5876
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP_HOME}
5977
className="flex items-center justify-center">
78+
<Heart className="mr-2 size-5 fill-current" />
6079
Try Cloud for Free
6180
<ArrowRight className="ml-2 size-5" />
6281
</a>

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

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
import { Button } from "@/components/ui"
2-
import { ArrowRight, Download } from "lucide-react"
2+
import { ArrowRight, Download, Heart } from "lucide-react"
33
import { EXTERNAL_LINKS } from "@/lib/constants"
44

55
export function CTASection() {
66
return (
7-
<section className="py-24 bg-muted/30 border-t border-border">
7+
<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">
88
<div className="container px-4 mx-auto sm:px-6 lg:px-8 text-center">
9-
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-8">Build faster. Solo or Together.</h2>
9+
<div className="flex items-center justify-center gap-2 mb-4">
10+
<Heart className="h-6 w-6 text-pink-500 fill-pink-500 pulse-heart" />
11+
<Heart
12+
className="h-8 w-8 text-rose-500 fill-rose-500 pulse-heart"
13+
style={{ animationDelay: "0.2s" }}
14+
/>
15+
<Heart
16+
className="h-6 w-6 text-red-500 fill-red-500 pulse-heart"
17+
style={{ animationDelay: "0.4s" }}
18+
/>
19+
</div>
20+
<h2 className="text-3xl font-bold tracking-tight sm:text-5xl mb-4">
21+
Code with <span className="text-pink-500 dark:text-pink-400">love</span>.
22+
</h2>
23+
<p className="text-lg text-muted-foreground mb-8">Build faster. Solo or Together.</p>
1024

1125
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
12-
<Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
26+
<Button
27+
size="lg"
28+
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">
1329
<a
1430
href={EXTERNAL_LINKS.MARKETPLACE}
1531
target="_blank"
@@ -20,7 +36,10 @@ export function CTASection() {
2036
</a>
2137
</Button>
2238

23-
<Button variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base">
39+
<Button
40+
variant="outline"
41+
size="lg"
42+
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">
2443
<a
2544
href={EXTERNAL_LINKS.CLOUD_APP_SIGNUP}
2645
target="_blank"

‎apps/web-roo-code/src/components/homepage/floating-hearts.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client"
2+
3+
import { useEffect, useState } from "react"
4+
5+
interface Heart {
6+
id: number
7+
left: number
8+
size: number
9+
duration: number
10+
delay: number
11+
opacity: number
12+
}
13+
14+
export function FloatingHearts() {
15+
const [hearts, setHearts] = useState<Heart[]>([])
16+
17+
useEffect(() => {
18+
// Generate initial hearts
19+
const initialHearts: Heart[] = Array.from({ length: 15 }, (_, i) => ({
20+
id: i,
21+
left: Math.random() * 100,
22+
size: Math.random() * 20 + 12,
23+
duration: Math.random() * 10 + 15,
24+
delay: Math.random() * 10,
25+
opacity: Math.random() * 0.4 + 0.2,
26+
}))
27+
setHearts(initialHearts)
28+
}, [])
29+
30+
return (
31+
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0" aria-hidden="true">
32+
{hearts.map((heart) => (
33+
<div
34+
key={heart.id}
35+
className="absolute floating-heart"
36+
style={{
37+
left: `${heart.left}%`,
38+
fontSize: `${heart.size}px`,
39+
animationDuration: `${heart.duration}s`,
40+
animationDelay: `${heart.delay}s`,
41+
opacity: heart.opacity,
42+
}}>
43+
<HeartIcon />
44+
</div>
45+
))}
46+
</div>
47+
)
48+
}
49+
50+
function HeartIcon() {
51+
const colors = [
52+
"hsl(var(--valentine-pink))",
53+
"hsl(var(--valentine-pink-light))",
54+
"hsl(var(--valentine-red))",
55+
"hsl(var(--valentine-rose))",
56+
]
57+
const color = colors[Math.floor(Math.random() * colors.length)]
58+
59+
return (
60+
<svg viewBox="0 0 24 24" fill={color} className="w-[1em] h-[1em]">
61+
<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" />
62+
</svg>
63+
)
64+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * from "./code-example"
33
export * from "./company-logos"
44
export * from "./faq-section"
55
export * from "./features"
6+
export * from "./floating-hearts"
67
export * from "./install-section"
78
export * from "./testimonials"
89
export * from "./whats-new-button"

0 commit comments

Comments
 (0)