Update src/app/page.tsx

Merge version_32 into main

src/app/page.tsx

@@ -17,12 +17,15 @@ export default function LandingPage() {
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [showViewMoreButton, setShowViewMoreButton] = useState(false);
   const [showShoesArrow, setShowShoesArrow] = useState(false);
+  const [showShoesMoreButton, setShowShoesMoreButton] = useState(false);
+  const [showVeilsMoreButton, setShowVeilsMoreButton] = useState(false);
   const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
   const [lastScrollY, setLastScrollY] = useState(0);
   const viewMoreButtonRef = useRef<HTMLDivElement>(null);
   const sixthItemRef = useRef<HTMLDivElement>(null);
   const galleryRef = useRef<HTMLDivElement>(null);
   const shoesRef = useRef<HTMLDivElement>(null);
+  const veilsRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let ticking = false;
@@ -67,9 +70,27 @@ export default function LandingPage() {
             if (!shoesInView && currentScrollY > lastScrollY) {
               // We've scrolled past the shoes section, show the up arrow
               setShowShoesArrow(true);
+              setShowShoesMoreButton(true);
             } else if (shoesInView) {
               // We're at or above the shoes section
               setShowShoesArrow(false);
+              setShowShoesMoreButton(false);
+            }
+          }
+
+          // Check if veils section is in view for more button
+          if (veilsRef.current) {
+            const veilsRect = veilsRef.current.getBoundingClientRect();
+            const veilsInView = veilsRect.top < window.innerHeight && veilsRect.bottom > 0;
+
+            // Show more button when scrolled past veils section
+            // Hide when user scrolls back to veils area
+            if (!veilsInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the veils section, show the more button
+              setShowVeilsMoreButton(true);
+            } else if (veilsInView && currentScrollY < lastScrollY) {
+              // We're back at or above the veils section, hide the button
+              setShowVeilsMoreButton(false);
             }
           }
 
@@ -103,6 +124,16 @@ export default function LandingPage() {
     }
   };
 
+  const scrollToVeils = () => {
+    const veilsSectionElement = document.getElementById('veils');
+    if (veilsSectionElement) {
+      veilsSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
   const scrollToTop = () => {
     const heroSectionElement = document.getElementById('hero');
     if (heroSectionElement) {
@@ -600,74 +631,110 @@ export default function LandingPage() {
       </div>
 
       <div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
-        <ProductCardFour
-          title="Bridal Shoes"
-          description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
-          textboxLayout="default"
-          useInvertedBackground={true}
-          tag="Accessory Collection"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          buttons={[
-            { text: "Explore All Shoes", onClick: scrollToShoes }
-          ]}
-          products={[
-            {
-              id: "shoe-1",              name: "Classic Satin Heels",              price: "Starting at $250",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",              imageAlt: "Classic white satin bridal heels"
-            },
-            {
-              id: "shoe-2",              name: "Jeweled Flats",              price: "Starting at $280",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=2",              imageAlt: "Comfortable jeweled flat bridal shoes"
-            },
-            {
-              id: "shoe-3",              name: "Pearl Embellished Pumps",              price: "Starting at $320",              variant: "Champagne",              imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=2",              imageAlt: "Pearl decorated champagne bridal pumps"
-            },
-            {
-              id: "shoe-4",              name: "Delicate Strappy Sandals",              price: "Starting at $200",              variant: "Silver",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",              imageAlt: "Delicate silver strappy bridal sandals"
-            },
-            {
-              id: "shoe-5",              name: "Vintage Lace Pumps",              price: "Starting at $290",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=2",              imageAlt: "Vintage lace wedding pumps"
-            },
-            {
-              id: "shoe-6",              name: "Minimalist Ballet Flats",              price: "Starting at $220",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=2",              imageAlt: "Minimalist ivory ballet flat shoes"
-            }
-          ]}
-        />
+        <div className="relative">
+          <ProductCardFour
+            title="Bridal Shoes"
+            description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            tag="Accessory Collection"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            buttons={[
+              { text: "Explore All Shoes", onClick: scrollToShoes }
+            ]}
+            products={[
+              {
+                id: "shoe-1",                name: "Classic Satin Heels",                price: "Starting at $250",                variant: "White",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",                imageAlt: "Classic white satin bridal heels"
+              },
+              {
+                id: "shoe-2",                name: "Jeweled Flats",                price: "Starting at $280",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=2",                imageAlt: "Comfortable jeweled flat bridal shoes"
+              },
+              {
+                id: "shoe-3",                name: "Pearl Embellished Pumps",                price: "Starting at $320",                variant: "Champagne",                imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=2",                imageAlt: "Pearl decorated champagne bridal pumps"
+              },
+              {
+                id: "shoe-4",                name: "Delicate Strappy Sandals",                price: "Starting at $200",                variant: "Silver",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",                imageAlt: "Delicate silver strappy bridal sandals"
+              },
+              {
+                id: "shoe-5",                name: "Vintage Lace Pumps",                price: "Starting at $290",                variant: "White",                imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=2",                imageAlt: "Vintage lace wedding pumps"
+              },
+              {
+                id: "shoe-6",                name: "Minimalist Ballet Flats",                price: "Starting at $220",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=2",                imageAlt: "Minimalist ivory ballet flat shoes"
+              }
+            ]}
+          />
+
+          {/* More Button for Shoes - Positioned after shoes section */}
+          <div className="relative mt-0">
+            {showShoesMoreButton && (
+              <div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end animate-in fade-in slide-in-from-bottom-4 duration-300">
+                <button
+                  onClick={scrollToVeils}
+                  className="group relative inline-flex items-center gap-2 px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out shadow-lg"
+                  aria-label="View Veils Section"
+                >
+                  <span className="text-sm md:text-base">More</span>
+                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
 
-      <div id="veils" data-section="veils" className="relative z-10">
-        <ProductCardFour
-          title="Veils & Crowns"
-          description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          tag="Veil Collection"
-          tagIcon={Crown}
-          tagAnimation="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={[
-            {
-              id: "veil-1",              name: "Cathedral Length Veil",              price: "Starting at $180",              variant: "White Tulle",              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=2",              imageAlt: "Elegant cathedral length bridal veil"
-            },
-            {
-              id: "veil-2",              name: "Lace Embellished Veil",              price: "Starting at $220",              variant: "Ivory Lace",              imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=2",              imageAlt: "Beautiful lace embellished bridal veil"
-            },
-            {
-              id: "veil-3",              name: "Dramatic Detachable Veil",              price: "Starting at $250",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",              imageAlt: "Dramatic detachable bridal veil"
-            },
-            {
-              id: "veil-4",              name: "Short Birdcage Veil",              price: "Starting at $120",              variant: "Black Netting",              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",              imageAlt: "Modern short birdcage veil"
-            },
-            {
-              id: "veil-5",              name: "Pearl Trimmed Veil",              price: "Starting at $200",              variant: "Champagne",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",              imageAlt: "Pearl trimmed champagne bridal veil"
-            },
-            {
-              id: "veil-6",              name: "Crystal Beaded Veil",              price: "Starting at $270",              variant: "White with Crystals",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",              imageAlt: "Sparkling crystal beaded bridal veil"
-            }
-          ]}
-        />
+      <div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
+        <div className="relative">
+          <ProductCardFour
+            title="Veils & Crowns"
+            description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            tag="Veil Collection"
+            tagIcon={Crown}
+            tagAnimation="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            products={[
+              {
+                id: "veil-1",                name: "Cathedral Length Veil",                price: "Starting at $180",                variant: "White Tulle",                imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=2",                imageAlt: "Elegant cathedral length bridal veil"
+              },
+              {
+                id: "veil-2",                name: "Lace Embellished Veil",                price: "Starting at $220",                variant: "Ivory Lace",                imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=2",                imageAlt: "Beautiful lace embellished bridal veil"
+              },
+              {
+                id: "veil-3",                name: "Dramatic Detachable Veil",                price: "Starting at $250",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",                imageAlt: "Dramatic detachable bridal veil"
+              },
+              {
+                id: "veil-4",                name: "Short Birdcage Veil",                price: "Starting at $120",                variant: "Black Netting",                imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",                imageAlt: "Modern short birdcage veil"
+              },
+              {
+                id: "veil-5",                name: "Pearl Trimmed Veil",                price: "Starting at $200",                variant: "Champagne",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",                imageAlt: "Pearl trimmed champagne bridal veil"
+              },
+              {
+                id: "veil-6",                name: "Crystal Beaded Veil",                price: "Starting at $270",                variant: "White with Crystals",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",                imageAlt: "Sparkling crystal beaded bridal veil"
+              }
+            ]}
+          />
+
+          {/* More Button for Veils - Positioned after veils section */}
+          <div className="relative mt-0">
+            {showVeilsMoreButton && (
+              <div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end animate-in fade-in slide-in-from-bottom-4 duration-300">
+                <button
+                  onClick={scrollToVeils}
+                  className="group relative inline-flex items-center gap-2 px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out shadow-lg"
+                  aria-label="Back to Veils"
+                >
+                  <span className="text-sm md:text-base">More</span>
+                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
 
       <div id="contact" data-section="contact" className="relative z-10">