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 ❤️
+
+ 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