224342c410
Introduced a ChristmasDecorations component with animated snowflakes, twinkling stars, and festive emojis. Updated global CSS and Tailwind config to include Christmas-themed animations, colors, and effects. Integrated the decorations into the main layout for a seasonal appearance.
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
export function ChristmasDecorations() {
|
|
const [snowflakes, setSnowflakes] = useState<Array<{ id: number; left: number; delay: number; duration: number }>>([])
|
|
|
|
useEffect(() => {
|
|
// Generate snowflakes
|
|
const flakes = Array.from({ length: 30 }, (_, i) => ({
|
|
id: i,
|
|
left: Math.random() * 100,
|
|
delay: Math.random() * 5,
|
|
duration: 8 + Math.random() * 4,
|
|
}))
|
|
setSnowflakes(flakes)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
|
|
{/* Snowflakes */}
|
|
{snowflakes.map((flake) => (
|
|
<div
|
|
key={flake.id}
|
|
className="absolute top-0 text-white/60 text-xs animate-snowflake"
|
|
style={{
|
|
left: `${flake.left}%`,
|
|
animationDelay: `${flake.delay}s`,
|
|
animationDuration: `${flake.duration}s`,
|
|
}}
|
|
>
|
|
❄
|
|
</div>
|
|
))}
|
|
|
|
{/* Twinkling stars in corners */}
|
|
<div className="absolute top-4 left-4 text-yellow-300 animate-twinkle text-lg">
|
|
✨
|
|
</div>
|
|
<div className="absolute top-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '0.5s' }}>
|
|
✨
|
|
</div>
|
|
<div className="absolute bottom-4 left-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1s' }}>
|
|
✨
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 text-yellow-300 animate-twinkle text-lg" style={{ animationDelay: '1.5s' }}>
|
|
✨
|
|
</div>
|
|
|
|
{/* Christmas tree emoji decorations */}
|
|
<div className="absolute top-8 left-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '2s' }}>
|
|
🎄
|
|
</div>
|
|
<div className="absolute top-8 right-1/4 text-green-500/40 animate-sparkle text-xl" style={{ animationDelay: '3s' }}>
|
|
🎄
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|