diff --git a/src/app/page.tsx b/src/app/page.tsx index 8592a49..13a1f88 100644 --- a/src/app/page.tsx +++ b/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(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 ( - {Array.from({ length: 12 }).map((_, i) => ( + {particleAnimations.map((particle) => (
@@ -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; } }