Update src/app/page.tsx

Merge version_38 into main

src/app/page.tsx

@@ -15,23 +15,26 @@ import { useState, useEffect, useRef } from "react";
 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 [showShoesMoreButton, setShowShoesMoreButton] = useState(false);
-  const [showVeilsMoreButton, setShowVeilsMoreButton] = useState(false);
+  const [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
+  const [showShoesViewMore, setShowShoesViewMore] = useState(false);
+  const [showVeilsViewMore, setShowVeilsViewMore] = 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);
+  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);
@@ -42,58 +45,29 @@ export default function LandingPage() {
           } else {
             setScrollDirection('up');
           }
+
+          // Check gallery section - show View More when visible
+          if (galleryContainerRef.current && galleryButtonContainerRef.current) {
+            const rect = galleryButtonContainerRef.current.getBoundingClientRect();
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
+            setShowGalleryViewMore(isInViewport);
+          }
+
+          // Check shoes section - show View More when visible
+          if (shoesContainerRef.current && shoesButtonContainerRef.current) {
+            const rect = shoesButtonContainerRef.current.getBoundingClientRect();
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
+            setShowShoesViewMore(isInViewport);
+          }
+
+          // Check veils section - show View More when visible
+          if (veilsContainerRef.current && veilsButtonContainerRef.current) {
+            const rect = veilsButtonContainerRef.current.getBoundingClientRect();
+            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
+            setShowVeilsViewMore(isInViewport);
+          }
+
           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);
-            }
-          }
-
-          // 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);
-              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);
-            }
-          }
-
           ticking = false;
         });
         ticking = true;
@@ -102,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');
@@ -303,64 +289,6 @@ export default function LandingPage() {
         />
       </svg>
 
-      {/* 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"
-        aria-label="Go to Dresses"
-        title="Go to Dresses"
-      >
-        <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">Dresses</span>
-        </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 - 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">
         {/* Instagram */}
@@ -505,7 +433,7 @@ export default function LandingPage() {
       </div>
 
       <div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
-        <div className="relative">
+        <div className="relative" ref={galleryContainerRef}>
           <ProductCardFour
             title="Our Dress Collection"
             description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism. Some of these dresses are exquisitely and elegantly sewed and crafted by MARAL."
@@ -516,29 +444,30 @@ export default function LandingPage() {
             tagAnimation="slide-up"
             gridVariant="bento-grid"
             animationType="slide-up"
-            products={initialDresses}
+            products={initialDresses.map((dress, index) => ({
+              ...dress,
+              _key: `gallery-${index}`
+            }))}
           />
+        </div>
 
-          {/* More Button - Positioned after gallery section */}
-          <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
-                  onClick={() => setShowModal(true)}
-                  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>
-                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                </button>
-              </div>
-            )}
-          </div>
+        {/* 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 && (
+            <button
+              onClick={() => setShowModal(true)}
+              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"
+              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" />
+            </button>
+          )}
         </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">
@@ -631,7 +560,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."
@@ -666,27 +595,25 @@ export default function LandingPage() {
               }
             ]}
           />
+        </div>
 
-          {/* 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>
+        {/* 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 && (
+            <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 animate-in fade-in slide-in-from-bottom-4 duration-300"
+              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" />
+            </button>
+          )}
         </div>
       </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."
@@ -718,22 +645,20 @@ export default function LandingPage() {
               }
             ]}
           />
+        </div>
 
-          {/* 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>
+        {/* 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 && (
+            <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"
+              aria-label="View More Veils"
+              disabled
+            >
+              <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>
 
@@ -796,4 +721,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}