Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -1,160 +1,189 @@
 "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";
+
+// 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: `${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 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) => (
+        <div
+          key={i}
+          className="absolute opacity-0 animate-floating"
+          style={{
+            left: style.left,
+            animationDelay: style.animationDelay,
+            animationDuration: style.animationDuration,
+            transform: style.transform,
+            zIndex: style.zIndex,
+            fontSize: style.type === 'heart' ? '2rem' : (style.type === 'balloon' ? '2.5rem' : '1.5rem')
+          }}
+        >
+          {getEmojiForType(style.type)}
+        </div>
+      ))}
+    </>
+  );
+};
+
+const CelebrationOverlay = () => {
+  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">
+        <img
+          src="https://imagedelivery.net/qN7d-a1E2_g_t-wwxG89gQ/cb330456-e41c-4384-a82f-2f8021c33c00/public" // Placeholder engagement ring
+          alt="USA-style engagement ring"
+          className="mx-auto mb-8 w-48 h-48 object-contain animate-ring-pop"
+        />
+        I love you Bisma ❤️
+        <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
+          <FloatingElements />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default function LandingPage() {
+  const noMessages = [
+    "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);
+
+  const handleYesClick = () => {
+    setShowCelebration(true);
+  };
+
+  const handleNoClick = () => {
+    setNoClickCount((prevCount) => prevCount + 1);
+  };
+
+  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 < 6
+    ? [
+        { text: "Yes", onClick: handleYesClick },
+        { text: "No", onClick: handleNoClick }
+      ]
+    : [
+        { text: "Yes ❤️", onClick: handleYesClick },
+        { text: "Yes ❤️", onClick: handleYesClick }
+      ];
+
+  // Tailwind keyframes for floating elements and fade-in
+  const globalStyles = `
+    @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); }
+    }
+    @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;
+      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={currentHeroDescription}
+              tag="My Dearest Love"
+              buttons={buttons}
+              mediaItems={[
+                { imageSrc: 'https://imagedelivery.net/qN7d-a1E2_g_t-wwxG89gQ/cb330456-e41c-4384-a82f-2f8021c33c00/public?_wi=1', imageAlt: 'Diamond ring placeholder' },
+                { imageSrc: 'https://imagedelivery.net/qN7d-a1E2_g_t-wwxG89gQ/cb330456-e41c-4384-a82f-2f8021c33c00/public?_wi=2', imageAlt: 'Diamond ring placeholder' },
+              ]}
+              mediaAnimation="none"
+              rating={0}
+              ratingText=""
+              containerClassName="p-8 max-w-3xl text-center"
+              titleClassName="text-5xl md:text-6xl lg:text-7xl font-extrabold mb-4 text-pink-800"
+              descriptionClassName="text-xl md:text-2xl text-pink-700 mb-8"
+              buttonContainerClassName="flex justify-center gap-4 mt-8"
+              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 text-lg"
+              tagClassName="text-pink-500 mb-2 font-medium"
+            />
+          </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);