Update src/app/page.tsx

Merge version_33 into main

src/app/page.tsx

@@ -26,6 +26,8 @@ export default function LandingPage() {
   const galleryRef = useRef<HTMLDivElement>(null);
   const shoesRef = useRef<HTMLDivElement>(null);
   const veilsRef = useRef<HTMLDivElement>(null);
+  const shoesContainerRef = useRef<HTMLDivElement>(null);
+  const veilsContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let ticking = false;
@@ -60,35 +62,33 @@ export default function LandingPage() {
             }
           }
 
-          // Check if shoes section is in view for arrow detection
+          // Check if shoes container (with button) is in view
-          if (shoesRef.current) {
+          if (shoesContainerRef.current) {
-            const shoesRect = shoesRef.current.getBoundingClientRect();
+            const shoesContainerRect = shoesContainerRef.current.getBoundingClientRect();
-            const shoesInView = shoesRect.top < window.innerHeight && shoesRect.bottom > 0;
+            const shoesContainerInView = shoesContainerRect.top < window.innerHeight && shoesContainerRect.bottom > 0;
 
-            // Show up arrow when scrolled past shoes section
+            // Show more button when scrolled past shoes section
-            // Show down arrow when above shoes section
+            // Hide when user scrolls back to shoes area
-            if (!shoesInView && currentScrollY > lastScrollY) {
+            if (!shoesContainerInView && currentScrollY > lastScrollY) {
-              // We've scrolled past the shoes section, show the up arrow
+              // We've scrolled past the shoes section, show the more button
-              setShowShoesArrow(true);
               setShowShoesMoreButton(true);
-            } else if (shoesInView) {
+            } else if (shoesContainerInView && currentScrollY < lastScrollY) {
-              // We're at or above the shoes section
+              // We're back at or above the shoes section, hide the button
-              setShowShoesArrow(false);
               setShowShoesMoreButton(false);
             }
           }
 
-          // Check if veils section is in view for more button
+          // Check if veils container (with button) is in view
-          if (veilsRef.current) {
+          if (veilsContainerRef.current) {
-            const veilsRect = veilsRef.current.getBoundingClientRect();
+            const veilsContainerRect = veilsContainerRef.current.getBoundingClientRect();
-            const veilsInView = veilsRect.top < window.innerHeight && veilsRect.bottom > 0;
+            const veilsContainerInView = veilsContainerRect.top < window.innerHeight && veilsContainerRect.bottom > 0;
 
             // Show more button when scrolled past veils section
             // Hide when user scrolls back to veils area
-            if (!veilsInView && currentScrollY > lastScrollY) {
+            if (!veilsContainerInView && currentScrollY > lastScrollY) {
               // We've scrolled past the veils section, show the more button
               setShowVeilsMoreButton(true);
-            } else if (veilsInView && currentScrollY < lastScrollY) {
+            } else if (veilsContainerInView && currentScrollY < lastScrollY) {
               // We're back at or above the veils section, hide the button
               setShowVeilsMoreButton(false);
             }
@@ -528,7 +528,7 @@ export default function LandingPage() {
                   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 More Dresses"
                 >
-                  <span className="text-sm md:text-base">More</span>
+                  <span className="text-sm md:text-base">View More</span>
                   <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
                 </button>
               </div>
@@ -631,7 +631,7 @@ export default function LandingPage() {
       </div>
 
       <div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
-        <div className="relative">
+        <div className="relative" ref={shoesContainerRef}>
           <ProductCardFour
             title="Bridal Shoes"
             description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
@@ -674,9 +674,9 @@ export default function LandingPage() {
                 <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"
+                  aria-label="View More Shoes"
                 >
-                  <span className="text-sm md:text-base">More</span>
+                  <span className="text-sm md:text-base">View More</span>
                   <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
                 </button>
               </div>
@@ -686,7 +686,7 @@ export default function LandingPage() {
       </div>
 
       <div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
-        <div className="relative">
+        <div className="relative" ref={veilsContainerRef}>
           <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."
@@ -726,9 +726,9 @@ export default function LandingPage() {
                 <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"
+                  aria-label="View More Veils"
                 >
-                  <span className="text-sm md:text-base">More</span>
+                  <span className="text-sm md:text-base">View More</span>
                   <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
                 </button>
               </div>