Update src/app/page.tsx

src/app/page.tsx

@@ -46,23 +46,23 @@ export default function LandingPage() {
             setScrollDirection('up');
           }
 
-          // Check gallery section - show View More when visible
+          // Check gallery section - show View More when section is in viewport
-          if (galleryContainerRef.current && galleryButtonContainerRef.current) {
+          if (galleryRef.current) {
-            const rect = galleryButtonContainerRef.current.getBoundingClientRect();
+            const rect = galleryRef.current.getBoundingClientRect();
             const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
             setShowGalleryViewMore(isInViewport);
           }
 
-          // Check shoes section - show View More when visible
+          // Check shoes section - show View More when section is in viewport
-          if (shoesContainerRef.current && shoesButtonContainerRef.current) {
+          if (shoesRef.current) {
-            const rect = shoesButtonContainerRef.current.getBoundingClientRect();
+            const rect = shoesRef.current.getBoundingClientRect();
             const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
             setShowShoesViewMore(isInViewport);
           }
 
-          // Check veils section - show View More when visible
+          // Check veils section - show View More when section is in viewport
-          if (veilsContainerRef.current && veilsButtonContainerRef.current) {
+          if (veilsRef.current) {
-            const rect = veilsButtonContainerRef.current.getBoundingClientRect();
+            const rect = veilsRef.current.getBoundingClientRect();
             const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
             setShowVeilsViewMore(isInViewport);
           }
@@ -437,19 +437,19 @@ export default function LandingPage() {
               _key: `gallery-${index}`
             }))}
           />
-        </div>
 
-        {/* View More Button - Positioned at bottom right of gallery section */}
+          {/* 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
+            <div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4 fixed bottom-20 right-8 lg:right-16 z-40">
-              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 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" />
+                <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>
 
@@ -583,19 +583,19 @@ export default function LandingPage() {
               }
             ]}
           />
-        </div>
 
-        {/* View More Button for Shoes - Positioned at bottom right of shoes section */}
+          {/* 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
+            <div ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4 fixed bottom-20 right-8 lg:right-16 z-40">
-              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 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" />
+                <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>
@@ -633,19 +633,19 @@ export default function LandingPage() {
               }
             ]}
           />
-        </div>
 
-        {/* View More Button for Veils - Positioned at bottom right of veils section */}
+          {/* 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
+            <div ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4 fixed bottom-20 right-8 lg:right-16 z-40">
-              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"
+                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"
-              disabled
+                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" />
+                <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>