Update src/app/page.tsx

Merge version_31 into main

src/app/page.tsx

@@ -16,10 +16,13 @@ export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [showViewMoreButton, setShowViewMoreButton] = useState(false);
+  const [showShoesArrow, setShowShoesArrow] = 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);
 
   useEffect(() => {
     let ticking = false;
@@ -38,21 +41,38 @@ export default function LandingPage() {
           }
           setLastScrollY(currentScrollY);
 
-          // Check if 6th item is in view
+          // Check if gallery is in view
-          if (sixthItemRef.current) {
+          if (galleryRef.current) {
-            const rect = sixthItemRef.current.getBoundingClientRect();
+            const rect = galleryRef.current.getBoundingClientRect();
             const isInView = rect.top < window.innerHeight && rect.bottom > 0;
-            const isScrollingDown = scrollDirection === 'down';
 
-            // Show button when 6th item is reached AND scrolling down
+            // Show button when gallery is scrolled past (user scrolls down past gallery)
-            // Hide button when scrolling back up past the 6th item
+            // Hide button when user scrolls back to gallery area
-            if (isInView && isScrollingDown) {
+            if (!isInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the gallery, show the up arrow
               setShowViewMoreButton(true);
-            } else if (!isInView && scrollDirection === 'up') {
+            } else if (isInView && currentScrollY < lastScrollY) {
+              // We're back at or above the gallery, hide the button
               setShowViewMoreButton(false);
             }
           }
 
+          // Check if shoes section is in view for arrow detection
+          if (shoesRef.current) {
+            const shoesRect = shoesRef.current.getBoundingClientRect();
+            const shoesInView = shoesRect.top < window.innerHeight && shoesRect.bottom > 0;
+
+            // Show up arrow when scrolled past shoes section
+            // Show down arrow when above shoes section
+            if (!shoesInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the shoes section, show the up arrow
+              setShowShoesArrow(true);
+            } else if (shoesInView) {
+              // We're at or above the shoes section
+              setShowShoesArrow(false);
+            }
+          }
+
           ticking = false;
         });
         ticking = true;
@@ -61,7 +81,7 @@ export default function LandingPage() {
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [lastScrollY, scrollDirection]);
+  }, [lastScrollY]);
 
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
@@ -252,7 +272,7 @@ export default function LandingPage() {
         />
       </svg>
 
-      {/* Fixed "Go to Dresses" Button */}
+      {/* Fixed "Go to Dresses" Button - Only visible on home page */}
       <button
         onClick={scrollToGallery}
         className="fixed right-6 bottom-32 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
@@ -265,18 +285,50 @@ export default function LandingPage() {
         </div>
       </button>
 
-      {/* Fixed "Go to Shoes" Button */}
+      {/* Fixed "Back to Dresses" Button - Appears when scrolled past gallery */}
-      <button
+      {showViewMoreButton && (
-        onClick={scrollToShoes}
+        <button
-        className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
+          onClick={scrollToGallery}
-        aria-label="Go to Shoes"
+          className="fixed right-6 bottom-32 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95 animate-in fade-in slide-in-from-bottom-4"
-        title="Go to Shoes"
+          aria-label="Back to Dresses"
-      >
+          title="Back to Dresses"
-        <div className="flex flex-col items-center justify-center gap-0.5">
+        >
-          <ArrowDown className="w-4 h-4" />
+          <div className="flex flex-col items-center justify-center gap-0.5">
-          <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
+            <ArrowUp className="w-4 h-4" />
-        </div>
+            <span className="text-xs font-semibold text-center leading-tight">Dress</span>
-      </button>
+          </div>
+        </button>
+      )}
+
+      {/* Fixed "Go to Shoes" Button - With scroll detection */}
+      {!showShoesArrow && (
+        <button
+          onClick={scrollToShoes}
+          className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
+          aria-label="Go to Shoes"
+          title="Go to Shoes"
+        >
+          <div className="flex flex-col items-center justify-center gap-0.5">
+            <ArrowDown className="w-4 h-4" />
+            <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
+          </div>
+        </button>
+      )}
+
+      {/* Fixed "Back to Shoes" Button - Appears when scrolled past shoes */}
+      {showShoesArrow && (
+        <button
+          onClick={scrollToShoes}
+          className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95 animate-in fade-in slide-in-from-bottom-4"
+          aria-label="Back to Shoes"
+          title="Back to Shoes"
+        >
+          <div className="flex flex-col items-center justify-center gap-0.5">
+            <ArrowUp className="w-4 h-4" />
+            <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
+          </div>
+        </button>
+      )}
 
       {/* Fixed Top Social & Contact Bar */}
       <div className="fixed top-0 left-0 right-0 z-50 bg-[#D4AF37] text-black py-3 px-4 flex items-center justify-center gap-6">
@@ -421,7 +473,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="gallery" data-section="gallery" className="relative z-10">
+      <div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
         <div className="relative">
           <ProductCardFour
             title="Our Dress Collection"
@@ -436,12 +488,9 @@ export default function LandingPage() {
             products={initialDresses}
           />
 
-          {/* Reference to 6th item for scroll detection */}
+          {/* More Button - Positioned after gallery section */}
-          <div ref={sixthItemRef} className="absolute pointer-events-none" style={{ height: 0, top: 'calc(100% - 500px)' }} />
-
-          {/* More Button - Positioned after 6th picture, visible when 6th item is reached and scrolling down */}
           <div className="relative mt-0">
-            {showViewMoreButton && scrollDirection === 'down' && (
+            {showViewMoreButton && (
               <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={() => setShowModal(true)}
@@ -550,7 +599,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="shoes" data-section="shoes" className="relative z-10">
+      <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."