src/app/page.tsx

@@ -10,8 +10,7 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Sparkles, Heart, Gem, Star, HelpCircle } from 'lucide-react';
-import { useState } from 'react';
-import Link from 'next/link';
+import { useState, useMemo } from 'react';
 
 export default function LandingPage() {
   const [activeProductId, setActiveProductId] = useState<string | null>(null);
@@ -44,6 +43,17 @@ export default function LandingPage() {
     setTimeout(() => setShowSprayAnimation(false), 2000);
   };
 
+  // Generate particle animations with stable values
+  const particleAnimations = useMemo(() => {
+    return Array.from({ length: 12 }).map((_, i) => ({
+      id: i,
+      left: (i * 8.33) % 100,
+      duration: 1 + ((i * 0.7) % 1),
+      delay: (i * 0.04) % 0.5,
+      xOffset: ((i * 13) % 40) - 20,
+    }));
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -140,15 +150,15 @@ export default function LandingPage() {
 
                 {/* Spray particles animation */}
                 <div className="absolute inset-0 overflow-hidden rounded-lg">
-                  {Array.from({ length: 12 }).map((_, i) => (
+                  {particleAnimations.map((particle) => (
                     <div
-                      key={i}
+                      key={particle.id}
                       className="absolute w-2 h-2 bg-gradient-to-b from-white to-transparent rounded-full"
                       style={{
-                        left: `${Math.random() * 100}%`,
+                        left: `${particle.left}%`,
                         top: `-10px`,
-                        animation: `fall ${1 + Math.random() * 1}s ease-out forwards`,
-                        animationDelay: `${Math.random() * 0.5}s`,
+                        animation: `fall ${particle.duration}s ease-out forwards`,
+                        animationDelay: `${particle.delay}s`,
                         opacity: 0.7,
                       }}
                     />
@@ -184,7 +194,7 @@ export default function LandingPage() {
                 }
                 @keyframes fall {
                   to {
-                    transform: translateY(100px) translateX(${Math.random() * 40 - 20}px);
+                    transform: translateY(100px) translateX(0px);
                     opacity: 0;
                   }
                 }