src/app/page.tsx

@@ -1,21 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import ReactLenis from "lenis/react";
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 
 const CelebrationOverlay = () => {
-  const hearts = Array.from({ length: 30 }).map((_, i) => (
+  const heartStyles = useMemo(() => {
+    return Array.from({ length: 30 }).map(() => ({
+      left: `${Math.random() * 100}vw`,
+      animationDelay: `${Math.random() * 5}s`,
+      animationDuration: `${5 + Math.random() * 5}s`,
+      transform: `scale(${0.5 + Math.random()})`
+    }));
+  }, []);
+
+  const hearts = heartStyles.map((style, i) => (
     <div
       key={i}
       className="absolute text-pink-500 text-3xl opacity-0 animate-heart-fall"
-      style={{
-        left: `${Math.random() * 100}vw`,
-        animationDelay: `${Math.random() * 5}s`,
-        animationDuration: `${5 + Math.random() * 5}s`,
-        transform: `scale(${0.5 + Math.random()})`
-      }}
+      style={style}
     >
       ❤️
     </div>