Update src/app/page.tsx

Merge version_38 into main

src/app/page.tsx

@@ -26,12 +26,15 @@ export default function LandingPage() {
   const galleryContainerRef = useRef<HTMLDivElement>(null);
   const shoesContainerRef = useRef<HTMLDivElement>(null);
   const veilsContainerRef = useRef<HTMLDivElement>(null);
+  const galleryButtonContainerRef = useRef<HTMLDivElement>(null);
+  const shoesButtonContainerRef = useRef<HTMLDivElement>(null);
+  const veilsButtonContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     let ticking = false;
 
     const handleScroll = () => {
-      if (!ticking) {
+      if (!ticking && !showModal) {
         window.requestAnimationFrame(() => {
           const currentScrollY = window.scrollY;
           setShowBackToTop(currentScrollY > 300);
@@ -43,37 +46,25 @@ export default function LandingPage() {
             setScrollDirection('up');
           }
 
-          // Check gallery section - show View More when 6th item is visible
+          // Check gallery section - show View More when visible
-          if (galleryContainerRef.current) {
+          if (galleryContainerRef.current && galleryButtonContainerRef.current) {
-            const items = galleryContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = galleryButtonContainerRef.current.getBoundingClientRect();
-            if (items.length > 0) {
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              const sixthItem = items[5];
+            setShowGalleryViewMore(isInViewport);
-              const rect = sixthItem.getBoundingClientRect();
-              const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              setShowGalleryViewMore(isInViewport);
-            }
           }
 
-          // Check shoes section - show View More when 6th item is visible
+          // Check shoes section - show View More when visible
-          if (shoesContainerRef.current) {
+          if (shoesContainerRef.current && shoesButtonContainerRef.current) {
-            const items = shoesContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = shoesButtonContainerRef.current.getBoundingClientRect();
-            if (items.length > 0) {
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              const sixthItem = items[5];
+            setShowShoesViewMore(isInViewport);
-              const rect = sixthItem.getBoundingClientRect();
-              const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              setShowShoesViewMore(isInViewport);
-            }
           }
 
-          // Check veils section - show View More when 6th item is visible
+          // Check veils section - show View More when visible
-          if (veilsContainerRef.current) {
+          if (veilsContainerRef.current && veilsButtonContainerRef.current) {
-            const items = veilsContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = veilsButtonContainerRef.current.getBoundingClientRect();
-            if (items.length > 0) {
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              const sixthItem = items[5];
+            setShowVeilsViewMore(isInViewport);
-              const rect = sixthItem.getBoundingClientRect();
-              const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
-              setShowVeilsViewMore(isInViewport);
-            }
           }
 
           setLastScrollY(currentScrollY);
@@ -85,7 +76,19 @@ export default function LandingPage() {
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [lastScrollY]);
+  }, [lastScrollY, showModal]);
+
+  useEffect(() => {
+    if (showModal) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [showModal]);
 
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
@@ -446,27 +449,25 @@ export default function LandingPage() {
               _key: `gallery-${index}`
             }))}
           />
+        </div>
 
-          {/* View More Button - Appears when 6th item is scrolled to */}
+        {/* View More Button - Positioned at bottom right of gallery section */}
+        <div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
           {showGalleryViewMore && (
-            <div className="relative mt-0">
+            <button
-              <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">
+              onClick={() => setShowModal(true)}
-                <button
+              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 animate-in fade-in slide-in-from-bottom-4 duration-300"
-                  onClick={() => setShowModal(true)}
+              aria-label="View More Dresses"
-                  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</span>
-                >
+              <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                  <span className="text-sm md:text-base">View More</span>
+            </button>
-                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                </button>
-              </div>
-            </div>
           )}
         </div>
 
         {/* Modal Gallery */}
         {showModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+          <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
             <div className="relative w-full max-w-6xl max-h-[90vh] bg-[var(--background)] rounded-2xl shadow-2xl overflow-hidden flex flex-col">
               {/* Modal Header */}
               <div className="flex items-center justify-between p-4 md:p-6 border-b border-[var(--accent)]/20">
@@ -594,21 +595,19 @@ export default function LandingPage() {
               }
             ]}
           />
+        </div>
 
-          {/* View More Button for Shoes - Appears when 6th item is scrolled to */}
+        {/* View More Button for Shoes - Positioned at bottom right of shoes section */}
+        <div ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
           {showShoesViewMore && (
-            <div className="relative mt-0">
+            <button
-              <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">
+              onClick={scrollToVeils}
-                <button
+              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 animate-in fade-in slide-in-from-bottom-4 duration-300"
-                  onClick={scrollToVeils}
+              aria-label="View More Shoes"
-                  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 Shoes"
+              <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" />
-                  <span className="text-sm md:text-base">View More</span>
+            </button>
-                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                </button>
-              </div>
-            </div>
           )}
         </div>
       </div>
@@ -646,22 +645,19 @@ export default function LandingPage() {
               }
             ]}
           />
+        </div>
 
-          {/* View More Button for Veils - Appears when 6th item is scrolled to */}
+        {/* View More Button for Veils - Positioned at bottom right of veils section */}
+        <div ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
           {showVeilsViewMore && (
-            <div className="relative mt-0">
+            <button
-              <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">
+              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 animate-in fade-in slide-in-from-bottom-4 duration-300"
-                <button
+              aria-label="View More Veils"
-                  onClick={() => { /* This section is the last product section, so no action needed */ }}
+              disabled
-                  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 Veils"
+              <span className="text-sm md:text-base">View More</span>
-                  disabled
+              <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                >
+            </button>
-                  <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>
-            </div>
           )}
         </div>
       </div>
@@ -725,4 +721,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}