src/app/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import HeroSplit from "@/components/sections/hero/HeroSplit";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import { Heart, Sparkles } from "lucide-react";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 
 const noMessages = [
   "Please kar lo na 🥺",  "Main tum se bohat pyar karta hoon ❤️",  "Ab to yes kar do na 🥹",  "Please Jully, maan jao na ❤️",  "Mere liye yes kar do 💕",  "Last time bol raha hoon, yes kar do ❤️"
@@ -18,6 +18,49 @@ export default function LandingPage() {
   const [proposalDescription, setProposalDescription] = useState("My dearest Jully, every moment with you is a treasure. You are my greatest joy, my best friend, and the love of my life. Will you make me the happiest person and say yes to forever?");
   const [showNoButton, setShowNoButton] = useState(true);
 
+  const confettiPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 50 }).map((_, i) => ({
+        key: `confetti-${i}`,
+        left: `${Math.random() * 100}%`,
+        top: `${Math.random() * 100}%`,
+        width: `${Math.random() * 10 + 5}px`,
+        height: `${Math.random() * 10 + 5}px`,
+        animationDelay: `${Math.random() * 2}s`,
+        animationDuration: `${Math.random() * 3 + 2}s`,
+    }));
+  }, [showCelebration]);
+
+  const heartPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 20 }).map((_, i) => ({
+        key: `heart-${i}`,
+        left: `${Math.random() * 100}%`,
+        top: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 2}s`,
+        animationDuration: `${Math.random() * 3 + 2}s`,
+    }));
+  }, [showCelebration]);
+
+  const balloonPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 10 }).map((_, i) => ({
+        key: `balloon-${i}`,
+        left: `${Math.random() * 100}%`,
+        top: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 2}s`,
+        animationDuration: `${Math.random() * 4 + 3}s`,
+    }));
+  }, [showCelebration]);
+
+  const confettiKeyframeEndTransform = useMemo(() => {
+    if (!showCelebration) return `translate(0, 0) rotate(0deg)`;
+    const translateX = Math.random() * 400 - 200;
+    const translateY = Math.random() * 400 - 200;
+    const rotate = Math.random() * 360;
+    return `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`;
+  }, [showCelebration]);
+
   const handleYes = () => {
     setProposalTitle("I love you Jully ❤️");
     setProposalDescription(""); // Clear description on Yes
@@ -125,31 +168,32 @@ export default function LandingPage() {
         {showCelebration && (
           <div className="fixed inset-0 z-[100] pointer-events-none overflow-hidden">
             {/* Confetti Effect */}
-            {Array.from({ length: 50 }).map((_, i) => (
+            {/* Confetti Effect */}
+            {confettiPieces.map((props) => (
               <div
-                key={`confetti-${i}`}
+                key={props.key}
                 className="absolute rounded-full bg-pink-400 opacity-0 animate-confetti"
                 style={{
-                  left: `${Math.random() * 100}%`,
-                  top: `${Math.random() * 100}%`,
-                  width: `${Math.random() * 10 + 5}px`,
-                  height: `${Math.random() * 10 + 5}px`,
-                  animationDelay: `${Math.random() * 2}s`,
-                  animationDuration: `${Math.random() * 3 + 2}s`
+                  left: props.left,
+                  top: props.top,
+                  width: props.width,
+                  height: props.height,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
                 }}
               />
             ))}
 
             {/* Hearts Effect */}
-            {Array.from({ length: 20 }).map((_, i) => (
+            {heartPieces.map((props) => (
               <span
-                key={`heart-${i}`}
+                key={props.key}
                 className="absolute text-red-500 text-3xl opacity-0 animate-heart-float"
                 style={{
-                  left: `${Math.random() * 100}%`,
-                  top: `${Math.random() * 100}%`,
-                  animationDelay: `${Math.random() * 2}s`,
-                  animationDuration: `${Math.random() * 3 + 2}s`
+                  left: props.left,
+                  top: props.top,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
                 }}
               >
                 ❤️
@@ -157,15 +201,15 @@ export default function LandingPage() {
             ))}
 
             {/* Balloons Effect */}
-            {Array.from({ length: 10 }).map((_, i) => (
+            {balloonPieces.map((props) => (
               <span
-                key={`balloon-${i}`}
+                key={props.key}
                 className="absolute text-pink-500 text-4xl opacity-0 animate-balloon-float"
                 style={{
-                  left: `${Math.random() * 100}%`,
-                  top: `${Math.random() * 100}%`,
-                  animationDelay: `${Math.random() * 2}s`,
-                  animationDuration: `${Math.random() * 4 + 3}s`
+                  left: props.left,
+                  top: props.top,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
                 }}
               >
                 🎈
@@ -176,7 +220,7 @@ export default function LandingPage() {
               @keyframes confetti {
                 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
                 10% { opacity: 1; }
-                100% { transform: translate(${Math.random() * 400 - 200}px, ${Math.random() * 400 - 200}px) rotate(${Math.random() * 360}deg); opacity: 0; }
+                100% { transform: ${confettiKeyframeEndTransform}; opacity: 0; }
               }
               @keyframes heart-float {
                 0% { transform: translateY(0) scale(0.5); opacity: 0; }