Update src/app/page.tsx

Merge version_3 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Public_Sans } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Jully, Will You Marry Me?',
-  description: 'A heartfelt marriage proposal website for Jully, filled with love, memories, and a big question.',
+  title: 'Bisma, Will You Marry Me?',
+  description: 'A heartfelt marriage proposal website for Bisma, filled with love, memories, and a big question.',
   openGraph: {
     "title": "Jully, Will You Marry Me?",
     "description": "A heartfelt marriage proposal website for Jully, filled with love, memories, and a big question.",

src/app/page.tsx

@@ -2,339 +2,258 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TeamCardOne from '@/components/sections/team/TeamCardOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Compass, Heart, Sparkles } from "lucide-react";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { Heart, Sparkles } from "lucide-react";
+import React, { useState, useMemo } from "react";
+
+// Helper functions for random calculations, defined outside the component
+const generateConfettiProperties = () => ({
+  left: `${Math.random() * 100}%`,
+  top: `${Math.random() * 100}%`,
+  width: `${Math.random() * 10 + 5}px`,
+  height: `${Math.random() * 10 + 5}px`,
+  animationDelay: `${Math.random() * 2}s`,
+  animationDuration: `${Math.random() * 3 + 2}s`,
+});
+
+const generateHeartProperties = () => ({
+  left: `${Math.random() * 100}%`,
+  top: `${Math.random() * 100}%`,
+  animationDelay: `${Math.random() * 2}s`,
+  animationDuration: `${Math.random() * 3 + 2}s`,
+});
+
+const generateBalloonProperties = () => ({
+  left: `${Math.random() * 100}%`,
+  top: `${Math.random() * 100}%`,
+  animationDelay: `${Math.random() * 2}s`,
+  animationDuration: `${Math.random() * 4 + 3}s`,
+});
+
+const generateConfettiTransform = () => {
+  const translateX = Math.random() * 400 - 200;
+  const translateY = Math.random() * 400 - 200;
+  const rotate = Math.random() * 360;
+  return `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`;
+};
+
+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 ❤️"
+];
 
 export default function LandingPage() {
+  const [noClickCount, setNoClickCount] = useState(0);
+  const [showCelebration, setShowCelebration] = useState(false);
+  const [proposalTitle, setProposalTitle] = useState("Bisma, will you marry me?");
+  const [proposalDescription, setProposalDescription] = useState("My dearest Bisma, every moment with you is a treasure. You are my greatest joy, my best friend, and the love of my life. Will you make me the happiest person and say yes to forever?");
+
+  const confettiPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 50 }).map((_, i) => ({
+        key: `confetti-${i}`,
+        ...generateConfettiProperties(),
+    }));
+  }, [showCelebration]);
+
+  const heartPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 20 }).map((_, i) => ({
+        key: `heart-${i}`,
+        ...generateHeartProperties(),
+    }));
+  }, [showCelebration]);
+
+  const balloonPieces = useMemo(() => {
+    if (!showCelebration) return [];
+    return Array.from({ length: 10 }).map((_, i) => ({
+        key: `balloon-${i}`,
+        ...generateBalloonProperties(),
+    }));
+  }, [showCelebration]);
+
+  const confettiKeyframeEndTransform = useMemo(() => {
+    if (!showCelebration) return `translate(0, 0) rotate(0deg)`;
+    return generateConfettiTransform();
+  }, [showCelebration]);
+
+  const handleYes = () => {
+    setProposalTitle("I love you Bisma ❤️");
+    setProposalDescription(""); // Clear description on Yes
+    setShowCelebration(true);
+  };
+
+  const handleNo = () => {
+    setNoClickCount(prev => {
+      const nextCount = prev + 1;
+      if (nextCount < noMessages.length) {
+        setProposalDescription(noMessages[nextCount]);
+      } else {
+        setProposalDescription("Seriously, Bisma? Just say yes! ❤️"); // Final plea
+      }
+      return nextCount;
+    });
+  };
+
+  const getHeroButtons = () => {
+    if (showCelebration) {
+      return [];
+    }
+    const buttons = [];
+    buttons.push({ text: "Yes", onClick: handleYes });
+    if (noClickCount < noMessages.length) {
+      buttons.push({ text: "No", onClick: handleNo });
+    } else {
+      // After 6 'No' clicks, show two 'Yes' buttons
+      buttons.push({ text: "Yes", onClick: handleYes });
+      buttons.push({ text: "Yes", onClick: handleYes }); // Add a second 'Yes' button
+    }
+    return buttons;
+  };
+
   return (
     <ThemeProvider
-        defaultButtonVariant="expand-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="medium"
-        background="circleGradient"
-        cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="solid"
-        headingFontWeight="medium"
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "#proposal",
-        },
-      ]}
-      brandName="For Jully"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple navItems={[]} brandName="For Bisma" />
+        </div>
 
-  <div id="proposal" data-section="proposal">
-      <HeroSplit
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      imagePosition="right"
-      title="Jully, will you marry me?"
-      description="My dearest Jully, every moment with you is a treasure. You are my greatest joy, my best friend, and the love of my life. Will you make me the happiest person and say yes to forever?"
-      buttons={[
-        {
-          text: "Yes",
-        },
-        {
-          text: "No",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/christmas-celebration-concept_23-2150976990.jpg"
-      imageAlt="Cute romantic couple illustration for proposal"
-      mediaAnimation="slide-up"
-      fixedMediaHeight={true}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-anime-couple-hugging_23-2150970674.jpg",
-          alt: "Jully's profile picture",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-anime-couple-hugging_23-2150970715.jpg",
-          alt: "My profile picture",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-portrait-couple-tet-vietnamese-new-year-celebration_23-2151077437.jpg",
-          alt: "Happy couple together",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-couple-getting-married_23-2151133180.jpg",
-          alt: "Sweet moment shared",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/3d-rendering-couple-valentine-day-heart_23-2151254189.jpg",
-          alt: "Two people in love",
-        },
-      ]}
-      avatarText="Our Love Story"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Our Journey",
-        },
-        {
-          type: "text",
-          text: "Together Forever",
-        },
-        {
-          type: "text-icon",
-          text: "Love",
-          icon: Heart,
-        },
-        {
-          type: "text-icon",
-          text: "Happiness",
-          icon: Sparkles,
-        },
-        {
-          type: "text",
-          text: "Dreams Come True",
-        },
-      ]}
-      marqueeSpeed={20}
-      showMarqueeCard={true}
-    />
-  </div>
+        <div id="proposal" data-section="proposal">
+          <HeroSplit
+            background={{
+              variant: "sparkles-gradient"
+            }}
+            imagePosition="right"
+            title={proposalTitle}
+            description={proposalDescription}
+            buttons={getHeroButtons()}
+            imageSrc={showCelebration ? "https://images.unsplash.com/photo-1621607502394-a204e5d6d3d7?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" : "https://images.unsplash.com/photo-1540026226198-4a413d9a3b2a?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"}
+            imageAlt={showCelebration ? "USA-style engagement ring" : "Romantic abstract background"}
+            mediaAnimation="slide-up"
+            fixedMediaHeight={true}
+            avatars={[
+              {
+                src: "http://img.b2bpic.net/free-photo/medium-shot-anime-couple-hugging_23-2150970674.jpg",                alt: "Bisma's profile picture"
+              },
+              {
+                src: "http://img.b2bpic.net/free-photo/medium-shot-anime-couple-hugging_23-2150970715.jpg",                alt: "My profile picture"
+              },
+              {
+                src: "http://img.b2bpic.net/free-photo/3d-portrait-couple-tet-vietnamese-new-year-celebration_23-2151077437.jpg",                alt: "Happy couple together"
+              },
+              {
+                src: "http://img.b2bpic.net/free-photo/happy-couple-getting-married_23-2151133180.jpg",                alt: "Sweet moment shared"
+              },
+              {
+                src: "http://img.b2bpic.net/free-photo/3d-rendering-couple-valentine-day-heart_23-2151254189.jpg",                alt: "Two people in love"
+              }
+            ]}
+            avatarText="Our Love Story"
+            marqueeItems={[
+              {
+                type: "text",                text: "Our Journey"
+              },
+              {
+                type: "text",                text: "Together Forever"
+              },
+              {
+                type: "text-icon",                text: "Love",                icon: Heart
+              },
+              {
+                type: "text-icon",                text: "Happiness",                icon: Sparkles
+              },
+              {
+                type: "text",                text: "Dreams Come True"
+              }
+            ]}
+            marqueeSpeed={20}
+            showMarqueeCard={true}
+          />
+        </div>
 
-  <div id="our-story" data-section="our-story">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Our Love Story"
-      description="From the first hello, I knew there was something special about you. Our journey has been filled with laughter, shared dreams, and an unbreakable bond. Every chapter with you is my favorite, and I can't wait to write the rest of our lives together."
-      bulletPoints={[
-        {
-          title: "The Beginning",
-          description: "It all started with a simple meeting, but it felt like fate from day one.",
-          icon: Heart,
-        },
-        {
-          title: "Adventures Together",
-          description: "From spontaneous trips to cozy nights, every adventure with you is unforgettable.",
-          icon: Compass,
-        },
-        {
-          title: "Growing Stronger",
-          description: "Through every high and low, our love has only deepened and flourished.",
-          icon: Heart,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/romantic-couple-sitting-near-tree_23-2148677645.jpg"
-      imageAlt="Happy couple smiling together"
-      mediaAnimation="opacity"
-    />
-  </div>
+        {showCelebration && (
+          <div className="fixed inset-0 z-[100] pointer-events-none overflow-hidden">
+            {/* Confetti Effect */}
+            {confettiPieces.map((props) => (
+              <div
+                key={props.key}
+                className="absolute rounded-full bg-pink-400 opacity-0 animate-confetti"
+                style={{
+                  left: props.left,
+                  top: props.top,
+                  width: props.width,
+                  height: props.height,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
+                }}
+              />
+            ))}
 
-  <div id="reasons" data-section="reasons">
-      <FeatureCardNineteen
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          tag: "Heart of Gold",
-          title: "Your Kindness",
-          subtitle: "Your unwavering empathy brightens every life you touch.",
-          description: "You always know how to make others feel seen and valued, and that's something I adore.",
-          imageSrc: "http://img.b2bpic.net/free-photo/world-happy-pride-day-love-string_23-2148516303.jpg",
-          imageAlt: "Pink heart icon",
-        },
-        {
-          tag: "Bright Spark",
-          title: "Your Spirit",
-          subtitle: "Your infectious energy lights up my world.",
-          description: "You inspire me to be better, to laugh louder, and to embrace every moment.",
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-y2k-geometric-elements-sign-set_1017-52940.jpg",
-          imageAlt: "Pink sparkle star icon",
-        },
-        {
-          tag: "Endless Charm",
-          title: "Your Beauty",
-          subtitle: "Not just outer beauty, but the incredible person within.",
-          description: "Every part of you is beautiful, inside and out. You truly captivate me.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-bouquet-made-white-pink-peonies_8353-1732.jpg",
-          imageAlt: "Pink rose flower icon",
-        },
-      ]}
-      title="Reasons I Love You"
-      description="Every day, you give me countless reasons to fall in love with you all over again. Here are just a few of the things that make you so incredibly special."
-    />
-  </div>
+            {/* Hearts Effect */}
+            {heartPieces.map((props) => (
+              <span
+                key={props.key}
+                className="absolute text-red-500 text-3xl opacity-0 animate-heart-float"
+                style={{
+                  left: props.left,
+                  top: props.top,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
+                }}
+              >
+                ❤️
+              </span>
+            ))}
 
-  <div id="adventure-duo" data-section="adventure-duo">
-      <TeamCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "1",
-          name: "Jully",
-          role: "My Queen",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151033969.jpg",
-          imageAlt: "Avatar of Jully",
-        },
-        {
-          id: "2",
-          name: "Your Love",
-          role: "Her King",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-tattoo-young-man-with-pierced-ears-holding-pink-yellow-carnation-flowers-front-his-mouth_23-2148122083.jpg",
-          imageAlt: "Avatar of her king",
-        },
-      ]}
-      title="Our Adventure Duo"
-      description="Together, we are an unstoppable team, ready to take on the world and create new memories every single day."
-    />
-  </div>
+            {/* Balloons Effect */}
+            {balloonPieces.map((props) => (
+              <span
+                key={props.key}
+                className="absolute text-pink-500 text-4xl opacity-0 animate-balloon-float"
+                style={{
+                  left: props.left,
+                  top: props.top,
+                  animationDelay: props.animationDelay,
+                  animationDuration: props.animationDuration,
+                }}
+              >
+                🎈
+              </span>
+            ))}
 
-  <div id="memories" data-section="memories">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Jully & Me",
-          date: "Summer '21",
-          title: "Our First Getaway",
-          quote: "That unforgettable trip where we truly discovered each other's adventurous sides.",
-          tag: "Travel",
-          avatarSrc: "http://img.b2bpic.net/free-photo/squishy-women-s-day-art_23-2151907502.jpg",
-          avatarAlt: "Jully's Avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-woman-park_23-2148316034.jpg",
-          imageAlt: "Couple traveling",
-        },
-        {
-          id: "2",
-          name: "Jully & Me",
-          date: "Fall '22",
-          title: "Cozy Coffee Dates",
-          quote: "Our endless conversations over coffee, planning our dreams and future.",
-          tag: "Dates",
-          avatarSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character_23-2151021955.jpg",
-          avatarAlt: "My Avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/romantic-couple-outdoors-near-cafe_1268-21199.jpg",
-          imageAlt: "Couple on a date",
-        },
-        {
-          id: "3",
-          name: "Jully & Me",
-          date: "Winter '23",
-          title: "Movie Nights & Cuddles",
-          quote: "Our favorite way to unwind, snuggled up and enjoying each other's company.",
-          tag: "Home",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-girl-with-sunflower_23-2152019389.jpg",
-          avatarAlt: "Jully's Avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-looking-up_23-2147744896.jpg",
-          imageAlt: "Couple at home",
-        },
-        {
-          id: "4",
-          name: "Jully & Me",
-          date: "Spring '24",
-          title: "Celebrating Milestones",
-          quote: "Every small victory and big celebration is made better with you by my side.",
-          tag: "Celebration",
-          avatarSrc: "http://img.b2bpic.net/free-photo/joyful-animated-boy-holding-delicious-autumn-pie_23-2152027357.jpg",
-          avatarAlt: "My Avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-near-handsome-man-with-bottle-drink-pouring-glass_23-2147990040.jpg",
-          imageAlt: "Couple celebrating",
-        },
-        {
-          id: "5",
-          name: "Jully & Me",
-          date: "Today",
-          title: "Everyday Joys",
-          quote: "Even the simplest moments are extraordinary when I share them with you.",
-          tag: "Everyday",
-          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839661.jpg",
-          avatarAlt: "Jully's Avatar",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-couple-looking-each-other_23-2148311340.jpg",
-          imageAlt: "Couple laughing",
-        },
-      ]}
-      title="Our Favorite Memories"
-      description="Every moment spent with you is a cherished memory, but some shine extra bright. Here are a few that always make me smile."
-    />
-  </div>
-
-  <div id="milestones" data-section="milestones">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Our First Date",
-        "First 'I Love You'",
-        "Moving In",
-        "Unforgettable Trips",
-        "Overcoming Challenges",
-        "Growing Our Dreams",
-        "Becoming One",
-      ]}
-      title="Our Milestones Together"
-      description="Each step of our journey has been meaningful, building a beautiful foundation for our future."
-      speed={25}
-      showCard={true}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="For Jully"
-      columns={[
-        {
-          title: "Our Story",
-          items: [
-            {
-              label: "The Beginning",
-              href: "#our-story",
-            },
-            {
-              label: "Memories",
-              href: "#memories",
-            },
-            {
-              label: "Milestones",
-              href: "#milestones",
-            },
-          ],
-        },
-        {
-          title: "Engagement",
-          items: [
-            {
-              label: "Reasons Why",
-              href: "#reasons",
-            },
-            {
-              label: "Our Duo",
-              href: "#adventure-duo",
-            },
-            {
-              label: "The Proposal",
-              href: "#proposal",
-            },
-          ],
-        },
-      ]}
-      copyrightText="Made with love, only for Jully ❤️"
-    />
-  </div>
+            <style jsx global>{`
+              @keyframes confetti {
+                0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
+                10% { opacity: 1; }
+                100% { transform: ${confettiKeyframeEndTransform}; opacity: 0; }
+              }
+              @keyframes heart-float {
+                0% { transform: translateY(0) scale(0.5); opacity: 0; }
+                10% { opacity: 1; }
+                100% { transform: translateY(-500px) scale(1.5); opacity: 0; }
+              }
+              @keyframes balloon-float {
+                0% { transform: translateY(0) scale(0.8); opacity: 0; }
+                10% { opacity: 1; }
+                100% { transform: translateY(-700px) scale(1.2); opacity: 0; }
+              }
+              .animate-confetti { animation: confetti var(--animation-duration) ease-out forwards; }
+              .animate-heart-float { animation: heart-float var(--animation-duration) ease-out forwards; }
+              .animate-balloon-float { animation: balloon-float var(--animation-duration) ease-out forwards; }
+            `}</style>
+          </div>
+        )}
       </ReactLenis>
     </ThemeProvider>
   );