fix: restart icon animations from top on page refresh

Add animation restart mechanism using React key prop to ensure tea icons
always begin their falling animation from the top of the viewport when
the page is refreshed, providing a consistent user experience.

Changes:
- Add useState and useEffect to manage animation restart
- Set unique key based on timestamp on component mount
- Icons container remounts on each page load, resetting CSS animations
- All 35 tea icons now restart their descent from -100vh on refresh

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-20 20:11:08 +01:00
parent 510eab7794
commit 7e079dfede

View File

@ -7,8 +7,16 @@ import CountdownTimer from "@/components/CountdownTimer";
import GamePeriod from "@/components/GamePeriod";
import GrandPrize from "@/components/GrandPrize";
import AboutContest from "@/components/AboutContest";
import { useState, useEffect } from "react";
export default function HomePage() {
const [animationKey, setAnimationKey] = useState(0);
useEffect(() => {
// Redémarrer l'animation à chaque chargement de la page
setAnimationKey(Date.now());
}, []);
return (
<div className="min-h-screen -mt-[4.5rem] relative">
{/* Background avec icônes de thé */}
@ -17,7 +25,7 @@ export default function HomePage() {
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
<div className="absolute inset-0 opacity-[0.5]">
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
{/* Ligne 1 - 5 icons */}
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDelay: '0s', animationDuration: '28s'}} />
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />