src/app/page.tsx

@@ -5,15 +5,20 @@ import React, { useState, useMemo } from "react";
 import ReactLenis from "lenis/react";
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 
+// Move the random generation outside the component to ensure purity during render
+const generateHeartStyles = () => {
+  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 initialHeartStyles = generateHeartStyles(); // Generate once when module loads
+
 const CelebrationOverlay = () => {
-  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 heartStyles = useMemo(() => initialHeartStyles, []); // Reference the pre-generated styles
 
   const hearts = heartStyles.map((style, i) => (
     <div
@@ -62,8 +67,7 @@ export default function LandingPage() {
         { text: "No", onClick: handleNoClick }
       ]
     : [
-        { text: "Yes ❤️", onClick: handleYesClick },
-        { text: "Yes ❤️", onClick: handleYesClick }
+        { text: "Yes ❤️", onClick: handleYesClick },        { text: "Yes ❤️", onClick: handleYesClick }
       ];
 
   // Tailwind keyframes for hearts and fade-in