Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -1,159 +1,140 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React, { useState, useMemo } from "react";
 import ReactLenis from "lenis/react";
-import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
-import { Heart, Sparkles } from "lucide-react";
+
+// Move the random generation outside the component to ensure purity during render
+const generateHeartStyles = () => {
+  return Array.from({ length: 30 }).map(() => ({
+    left: `${Math.random() * 100}vw`,
+    animationDelay: `${Math.random() * 5}s`,
+    animationDuration: `${5 + Math.random() * 5}s`,
+    transform: `scale(${0.5 + Math.random()})`
+  }));
+};
+
+const initialHeartStyles = generateHeartStyles(); // Generate once when module loads
+
+const CelebrationOverlay = () => {
+  const heartStyles = useMemo(() => initialHeartStyles, []); // Reference the pre-generated styles
+
+  const hearts = heartStyles.map((style, i) => (
+    <div
+      key={i}
+      className="absolute text-pink-500 text-3xl opacity-0 animate-heart-fall"
+      style={style}
+    >
+      ❤️
+    </div>
+  ));
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-pink-100 bg-opacity-90 overflow-hidden">
+      <div className="relative text-center text-pink-700 text-5xl font-bold p-8 animate-fade-in">
+        I Love You Bisma ❤️
+        <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
+          {hearts}
+        </div>
+      </div>
+    </div>
+  );
+};
 
 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? ✨"
+  ];
+  const [noClickCount, setNoClickCount] = useState(0);
+  const [showCelebration, setShowCelebration] = useState(false);
+
+  const handleYesClick = () => {
+    setShowCelebration(true);
+  };
+
+  const handleNoClick = () => {
+    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."
+    : noMessages[Math.min(noClickCount - 1, noMessages.length - 1)];
+
+  const buttons = noClickCount < 5
+    ? [
+        { text: "Yes", onClick: handleYesClick },
+        { text: "No", onClick: handleNoClick }
+      ]
+    : [
+        { text: "Yes ❤️", onClick: handleYesClick },        { text: "Yes ❤️", onClick: handleYesClick }
+      ];
+
+  // Tailwind keyframes for hearts 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 fade-in {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-heart-fall {
+      animation: heart-fall linear infinite;
+    }
+    .animate-fade-in {
+      animation: fade-in 1s ease-out forwards;
+    }
+    html, body, #__next {
+      height: 100%;
+      margin: 0;
+      overflow: hidden; /* Prevent scrolling during celebration */
+    }
+  `;
+
   return (
     <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="reveal-blur"
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
         borderRadius="soft"
-        contentWidth="mediumLarge"
-        sizing="largeSmall"
-        background="aurora"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="radial-glow"
-        headingFontWeight="light"
+        contentWidth="medium"
+        sizing="medium"
+        background="none"
+        cardStyle="solid"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
+      <style dangerouslySetInnerHTML={{ __html: globalStyles }} />
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Proposal",          id: "#proposal"},
-      ]}
-      brandName="For Bisma"
-    />
-  </div>
-
-  <div id="proposal" data-section="proposal">
-      <HeroSplitDualMedia
-      background={{
-        variant: "plain"}}
-      title="Bisma, will you marry me?"
-      description="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."
-      tag="A Lifetime Together"
-      buttons={[
-        {
-          text: "Yes",          onClick: () => {},
-        },
-        {
-          text: "No",          onClick: () => {},
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-proposing-woman-seashore-beach_107420-10019.jpg",          imageAlt: "Romantic couple holding hands"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-happy-woman-holding-hands-street_23-2148013708.jpg",          imageAlt: "Couple on a date looking at each other lovingly"},
-      ]}
-      mediaAnimation="none"
-      rating={5}
-      ratingText="Forever"
-    />
-  </div>
-
-  <div id="celebration" data-section="celebration">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="I Love You Bisma ❤️"
-      description="Saying 'Yes' is just the beginning of our beautiful journey together. Every shared laugh, every quiet moment, every dream we chase, makes our bond stronger. You are my greatest adventure and my safest harbor. I promise to love you fiercely, to support you always, and to cherish every moment we share. Our story is just getting started, and I can't wait to write every chapter with you."
-      bulletPoints={[
-        {
-          title: "Our Journey Begins",          description: "This 'Yes' marks the first step into our forever, a journey we'll build together.",          icon: Heart,
-        },
-        {
-          title: "Unconditional Love",          description: "My love for you is endless, unwavering, and grows stronger every day.",          icon: Sparkles,
-        },
-        {
-          title: "Future Together",          description: "Excited for all the dreams we'll share and achieve as a united team.",          icon: Heart,
-        },
-      ]}
-      mediaAnimation="none"
-      imageSrc="http://img.b2bpic.net/free-photo/woman-having-date-with-her-boyfriend-valentine-s-day_23-2149162010.jpg"
-      imageAlt="Happy couple celebrating their engagement"
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Our Story, Our Love"
-      description="Every shared glance, every whispered word, every adventure, and every quiet moment has woven the beautiful tapestry of our life together. This is a testament to the journey that brought us here, and the love that will carry us forward."
-      members={[
-        {
-          id: "moment-1",          name: "Our First Date",          role: "A Spark Ignites",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-with-coffee-cup_23-2148758543.jpg",          imageAlt: "Couple on their first date laughing"},
-        {
-          id: "moment-2",          name: "Our Adventures",          role: "Exploring the World Together",          imageSrc: "http://img.b2bpic.net/free-photo/drinking-hot-drink-talking-together_329181-19860.jpg",          imageAlt: "Couple hiking or traveling together"},
-        {
-          id: "moment-3",          name: "Our Quiet Evenings",          role: "Cherished Moments",          imageSrc: "http://img.b2bpic.net/free-photo/charming-boyfriend-holding-his-girlfriend-his-arms_23-2148379180.jpg",          imageAlt: "Couple cuddling on a couch"},
-        {
-          id: "moment-4",          name: "Our Shared Dreams",          role: "Building a Future",          imageSrc: "http://img.b2bpic.net/free-photo/romantic-senior-couple-having-picnic-sunset-beach-man-woman-sitting-blanket-seashore-enjoying-fantastic-seascape-view-back-view-romance-lifestyle-leisure-concept_74855-23381.jpg",          imageAlt: "Couple looking at a sunset together"},
-        {
-          id: "moment-5",          name: "Today's Promise",          role: "A New Beginning",          imageSrc: "http://img.b2bpic.net/free-photo/wedding-rings_1157-640.jpg",          imageAlt: "Close-up of an engagement ring with blurred romantic background"},
-      ]}
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="What Our Hearts Say"
-      description="The feelings that have grown between us, unspoken yet profoundly felt, are the truest form of social proof."
-      names={[
-        "Unconditional Trust",        "Endless Laughter",        "Shared Dreams",        "Deepest Connection",        "Soulmate Bond",        "Eternal Devotion"]}
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="The Numbers of Our Love"
-      description="More than just numbers, these represent the depth and breadth of our journey together, showcasing the beautiful statistics of our affection."
-      metrics={[
-        {
-          id: "years-together",          value: "3+",          title: "Years of Joy",          description: "And countless more beautiful years to come.",          imageSrc: "http://img.b2bpic.net/free-photo/valentine39s-day-background-date-february-14-calendar-flat-lay-top-view_169016-25578.jpg",          imageAlt: "Calendar with hearts"},
-        {
-          id: "adventures",          value: "50+",          title: "Adventures Shared",          description: "From small trips to grand dreams, always together.",          imageSrc: "http://img.b2bpic.net/free-photo/world-map-airplane-miniature-notepad-wooden-table-top-view_169016-49914.jpg",          imageAlt: "Passport and world map"},
-        {
-          id: "laughs",          value: "Infinite",          title: "Moments of Laughter",          description: "The best medicine, always found with you.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-beautiful-girl-her-handsome-boyfriend-casual-summer-clothes-winking_158538-5516.jpg",          imageAlt: "Happy couple laughing"},
-        {
-          id: "dreams",          value: "United",          title: "Dreams Realized",          description: "Building our future, hand in hand, heart to heart.",          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-moon-couple-silhouette-wallpaper_23-2150918965.jpg",          imageAlt: "Couple holding hands looking at stars"},
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Proposal",          items: [
-            {
-              label: "Home",              href: "/"},
-          ],
-        },
-      ]}
-      logoText="Bisma & My Love"
-      copyrightText="© 2024 Bisma & My Love. All rights reserved."
-    />
-  </div>
+        {showCelebration ? (
+          <CelebrationOverlay />
+        ) : (
+          <div id="proposal" data-section="proposal" className="relative min-h-screen flex items-center justify-center bg-pink-100">
+            <HeroSplitDualMedia
+              background={{ variant: "plain" }}
+              title="Bisma, will you marry me?"
+              description={currentDescription}
+              tag="A Lifetime Together"
+              buttons={buttons}
+              mediaItems={[
+                { imageSrc: '', imageAlt: '' },
+                { imageSrc: '', imageAlt: '' },
+              ]}
+              mediaAnimation="none"
+              rating={0}
+              ratingText=""
+              containerClassName="p-8 max-w-3xl text-center"
+              titleClassName="text-5xl font-extrabold mb-4 text-pink-800"
+              descriptionClassName="text-xl text-pink-700 mb-8"
+              buttonContainerClassName="flex justify-center gap-4"
+              buttonClassName="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out"
+              tagClassName="text-pink-500 mb-2"
+            />
+          </div>
+        )}
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #FFFAFA;
-  --card: #FFE0E6;
+  --background: #FFF0F5;
+  --card: #FFFAFA;
   --foreground: #4B0000;
   --primary-cta: #FF69B4;
   --primary-cta-text: #FFFFFF;
-  --secondary-cta: #FFFFFF;
+  --secondary-cta: #FCE4EC;
   --secondary-cta-text: #4B0000;
   --accent: #FFC0CB;
-  --background-accent: #FFB6C1;
+  --background-accent: #FFE0E6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);