Skip to content

feat(web): add Valentines Day theme to homepage#11201

Draft
roomote[bot] wants to merge 2 commits intomainfrom
feature/valentines-day-theme
Draft

feat(web): add Valentines Day theme to homepage#11201
roomote[bot] wants to merge 2 commits intomainfrom
feature/valentines-day-theme

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Feb 4, 2026

Add a festive Valentines Day theme to the marketing homepage that automatically activates from February 1-15.

Features

  • Animated banner with hearts at the top of the page
  • Floating hearts background animation
  • Themed heading with gradient text and animated heart icon
  • Rose-colored background glow in the hero section
  • Valentine-specific messaging that encourages users to "fall in love with coding again"

Implementation

  • New components: ValentinesBanner and FloatingHearts
  • CSS animations: heartbeat and float-up
  • Date-based activation logic (Feb 1-15)
  • All elements gracefully fall back to the standard theme outside the date range

Important

Adds Valentine's Day theme to homepage with animations and components active Feb 1-15.

  • Behavior:
    • Adds Valentine's Day theme to homepage, active Feb 1-15.
    • Includes animated banner, floating hearts, themed heading, and rose-colored glow.
    • Valentine-specific messaging in hero section.
  • Components:
    • New ValentinesBanner and FloatingHearts components in homepage.
    • isValentinesSeason() function in page.tsx to check date range.
  • CSS:
    • Adds heartbeat and float-up animations in globals.css.
    • Applies animations to relevant elements in page.tsx and valentines-banner.tsx.

This description was created by Ellipsis for c0977ae. You can customize this summary. It will automatically update as commits are pushed.

@roomote
Copy link
Contributor Author

roomote bot commented Feb 4, 2026

Rooviewer Clock   See task on Roo Cloud

Review complete. No new issues found in the latest changes. 2 previously flagged issues remain unresolved:

  • ValentinesBanner flash/layout shift - Initializing isVisible to true causes the banner to flash and disappear outside Valentine's season
  • Server/client date inconsistency - Cached server-side date check can mismatch with real-time client checks at date boundaries
Previous reviews

Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 4, 2026

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-654up0wfr-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

import { useEffect, useState } from "react"

export function ValentinesBanner() {
const [isVisible, setIsVisible] = useState(true)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initializing isVisible to true causes the banner to render on the server and during initial hydration. Outside Valentine's season (before Feb 1 or after Feb 15), the banner will flash briefly then disappear when the useEffect runs, causing both a visual flash and a layout shift as content below moves up. Consider initializing to false so the banner only appears after the date check confirms it's Valentine's season.

Suggested change
const [isVisible, setIsVisible] = useState(true)
const [isVisible, setIsVisible] = useState(false)

Fix it with Roo Code or mention @roomote and request a fix.

Comment on lines 17 to +28
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()
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The server-side isValentinesSeason() check is cached for up to 1 hour (revalidate = 3600), while client components (ValentinesBanner, FloatingHearts) independently check the date in real-time via useEffect. At date boundaries (Jan 31 -> Feb 1 or Feb 15 -> Feb 16), this can cause visual inconsistency where the background glow color (server-determined) doesn't match the banner/hearts visibility (client-determined). Consider passing the server-calculated isValentines value as a prop to client components, or accept this as an acceptable edge case at date boundaries.

Fix it with Roo Code or mention @roomote and request a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant