feat(web): add Valentines Day theme to homepage#11201
feat(web): add Valentines Day theme to homepage#11201roomote[bot] wants to merge 2 commits intomainfrom
Conversation
Review complete. No new issues found in the latest changes. 2 previously flagged issues remain unresolved:
Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues. |
|
🚀 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) |
There was a problem hiding this comment.
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.
| const [isVisible, setIsVisible] = useState(true) | |
| const [isVisible, setIsVisible] = useState(false) |
Fix it with Roo Code or mention @roomote and request a fix.
| 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() |
There was a problem hiding this comment.
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.
Add a festive Valentines Day theme to the marketing homepage that automatically activates from February 1-15.
Features
Implementation
ValentinesBannerandFloatingHeartsheartbeatandfloat-upImportant
Adds Valentine's Day theme to homepage with animations and components active Feb 1-15.
ValentinesBannerandFloatingHeartscomponents inhomepage.isValentinesSeason()function inpage.tsxto check date range.heartbeatandfloat-upanimations inglobals.css.page.tsxandvalentines-banner.tsx.This description was created by
for c0977ae. You can customize this summary. It will automatically update as commits are pushed.