Update src/app/page.tsx

Merge version_30 into main

src/app/page.tsx

@@ -16,35 +16,54 @@ export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [showViewMoreButton, setShowViewMoreButton] = 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);
 
   useEffect(() => {
+    let ticking = false;
+
     const handleScroll = () => {
-      setShowBackToTop(window.scrollY > 300);
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY;
+          setShowBackToTop(currentScrollY > 300);
+
+          // Determine scroll direction
+          if (currentScrollY > lastScrollY) {
+            setScrollDirection('down');
+          } else {
+            setScrollDirection('up');
+          }
+          setLastScrollY(currentScrollY);
+
+          // Check if gallery is in view
+          if (galleryRef.current) {
+            const rect = galleryRef.current.getBoundingClientRect();
+            const isInView = rect.top < window.innerHeight && rect.bottom > 0;
+
+            // Show button when gallery is scrolled past (user scrolls down past gallery)
+            // Hide button when user scrolls back to gallery area
+            if (!isInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the gallery, show the up arrow
+              setShowViewMoreButton(true);
+            } else if (isInView && currentScrollY < lastScrollY) {
+              // We're back at or above the gallery, hide the button
+              setShowViewMoreButton(false);
+            }
+          }
+
+          ticking = false;
+        });
+        ticking = true;
+      }
     };
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  }, [lastScrollY]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setShowViewMoreButton(entry.isIntersecting);
-      },
-      { threshold: 0.1 }
-    );
-
-    if (viewMoreButtonRef.current) {
-      observer.observe(viewMoreButtonRef.current);
-    }
-
-    return () => {
-      if (viewMoreButtonRef.current) {
-        observer.unobserve(viewMoreButtonRef.current);
-      }
-    };
-  }, []);
 
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
@@ -235,7 +254,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"
@@ -248,6 +267,21 @@ export default function LandingPage() {
         </div>
       </button>
 
+      {/* Fixed "Back to Dresses" Button - Appears when scrolled past gallery */}
+      {showViewMoreButton && (
+        <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 animate-in fade-in slide-in-from-bottom-4"
+          aria-label="Back to Dresses"
+          title="Back to Dresses"
+        >
+          <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">Dress</span>
+          </div>
+        </button>
+      )}
+
       {/* Fixed "Go to Shoes" Button */}
       <button
         onClick={scrollToShoes}
@@ -404,7 +438,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"
@@ -419,8 +453,8 @@ export default function LandingPage() {
             products={initialDresses}
           />
 
-          {/* View More Button - Positioned after 6th picture, visible when 6th item is in view */}
+          {/* More Button - Positioned after gallery section */}
-          <div ref={viewMoreButtonRef} className="relative mt-0">
+          <div className="relative mt-0">
             {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
@@ -428,7 +462,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">View More Dresses</span>
+                  <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>
@@ -660,4 +694,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}