From f67c97c1fd9f64def06e35e75ab09923d428f31a Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 7 Jun 2026 23:06:21 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 136 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 92 insertions(+), 44 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index ef6386d..80ac900 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,37 +5,74 @@ 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(() => ({ +// Helper to generate styles for floating elements (hearts, balloons, confetti) +const generateFloatingStyles = (count: number, type: 'heart' | 'balloon' | 'confetti', scaleMin: number, scaleMax: number, durationMin: number, durationMax: number, delayMin: number, delayMax: number) => { + return Array.from({ length: count }).map((_, i) => ({ + type, left: `${Math.random() * 100}vw`, - animationDelay: `${Math.random() * 5}s`, - animationDuration: `${5 + Math.random() * 5}s`, - transform: `scale(${0.5 + Math.random()})` + animationDelay: `${delayMin + Math.random() * (delayMax - delayMin)}s`, + animationDuration: `${durationMin + Math.random() * (durationMax - durationMin)}s`, + transform: `scale(${scaleMin + Math.random() * (scaleMax - scaleMin)})`, + zIndex: Math.floor(Math.random() * 10) + 1, // Random z-index for depth })); }; -const initialHeartStyles = generateHeartStyles(); // Generate once when module loads +const getEmojiForType = (type: 'heart' | 'balloon' | 'confetti') => { + if (type === 'heart') return '❤️'; + if (type === 'balloon') return '🎈'; + const confettiEmojis = ['✨', '🥳', '🎉']; + return confettiEmojis[Math.floor(Math.random() * confettiEmojis.length)]; +}; + +const initialFloatingElements = { + hearts: generateFloatingStyles(50, 'heart', 0.5, 1.5, 5, 10, 0, 5), + balloons: generateFloatingStyles(30, 'balloon', 0.8, 1.2, 7, 12, 0, 7), + confetti: generateFloatingStyles(100, 'confetti', 0.3, 0.8, 3, 7, 0, 4), +}; + +const FloatingElements = () => { + const elements = useMemo(() => { + return [ + ...initialFloatingElements.hearts, + ...initialFloatingElements.balloons, + ...initialFloatingElements.confetti, + ]; + }, []); + + return ( + <> + {elements.map((style, i) => ( +
+ {getEmojiForType(style.type)} +
+ ))} + + ); +}; const CelebrationOverlay = () => { - const heartStyles = useMemo(() => initialHeartStyles, []); // Reference the pre-generated styles - - const hearts = heartStyles.map((style, i) => ( -
- ❤️ -
- )); - return (
- I Love You Bisma ❤️ + USA-style engagement ring + I love you Bisma ❤️
- {hearts} +
@@ -44,8 +81,7 @@ const CelebrationOverlay = () => { export default function LandingPage() { const noMessages = [ - "Are you sure, Bisma? Think about our future... 🫠", "Please reconsider, my love. My heart aches at the thought. 💔", "Don't say no! We're meant to be. This isn't a game. 😭", "Just one more chance... Say yes! 🙏", "My world stops without you. Please, Bisma. Yes? ✨" - ]; + "Please kar lo na 🥺", "Main tum se bohat pyar karta hoon ❤️", "Ab to yes kar do na 🥹", "Please Bisma, maan jao na ❤️", "Mere liye yes kar do 💕", "Last time bol raha hoon, yes kar do ❤️"]; const [noClickCount, setNoClickCount] = useState(0); const [showCelebration, setShowCelebration] = useState(false); @@ -57,36 +93,48 @@ export default function LandingPage() { setNoClickCount((prevCount) => prevCount + 1); }; - const currentDescription = noClickCount < 5 - ? "My dearest Bisma, from the moment I met you, my world changed. Every day with you is a joy, an adventure, and a blessing. You are the most beautiful, kind, and brilliant person I know. My love for you grows with each passing moment, and I can't imagine a future without you by my side. Let's start our forever now." + const initialProposalDescription = "You are the most beautiful, kind, and brilliant person I know. My love for you grows with each passing moment, and I can't imagine a future without you by my side. Will you make me the happiest man alive?"; + + const currentHeroDescription = noClickCount === 0 + ? initialProposalDescription : noMessages[Math.min(noClickCount - 1, noMessages.length - 1)]; - const buttons = noClickCount < 5 + const buttons = noClickCount < 6 ? [ { text: "Yes", onClick: handleYesClick }, { 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 + // Tailwind keyframes for floating elements and fade-in const globalStyles = ` - @keyframes heart-fall { - 0% { transform: translateY(-100vh) rotate(0deg) scale(0); opacity: 0; } - 10% { opacity: 1; } - 100% { transform: translateY(100vh) rotate(360deg) scale(1.5); opacity: 0; } + @keyframes floating { + 0% { transform: translateY(-100vh) scale(0) rotate(0deg); opacity: 0; } + 10% { opacity: 1; transform: translateY(-80vh) scale(1) rotate(20deg); } + 50% { opacity: 1; transform: translateY(0vh) scale(1.2) rotate(-20deg); } + 100% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; } } @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } - .animate-heart-fall { - animation: heart-fall linear infinite; + @keyframes ring-pop { + 0% { transform: scale(0); opacity: 0; } + 50% { transform: scale(1.2); opacity: 1; } + 100% { transform: scale(1); opacity: 1; } + } + .animate-floating { + animation: floating linear infinite; } .animate-fade-in { animation: fade-in 1s ease-out forwards; } + .animate-ring-pop { + animation: ring-pop 0.8s ease-out forwards; + } html, body, #__next { height: 100%; margin: 0; @@ -116,26 +164,26 @@ export default function LandingPage() { )} ); -} +} \ No newline at end of file -- 2.49.1