Update src/app/page.tsx

Merge version_36 into main

src/app/page.tsx

@@ -26,6 +26,9 @@ 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;
@@ -447,19 +450,17 @@ export default function LandingPage() {
             }))}
           />
 
-          {/* View More Button - Appears when 6th item is scrolled to */}
+          {/* View More Button - Positioned at bottom right of gallery section */}
           {showGalleryViewMore && (
-            <div className="relative mt-0">
-              <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">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 ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+              <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>
           )}
         </div>
@@ -595,19 +596,17 @@ export default function LandingPage() {
             ]}
           />
 
-          {/* View More Button for Shoes - Appears when 6th item is scrolled to */}
+          {/* View More Button for Shoes - Positioned at bottom right of shoes section */}
           {showShoesViewMore && (
-            <div className="relative mt-0">
-              <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 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 ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+              <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>
@@ -647,20 +646,17 @@ export default function LandingPage() {
             ]}
           />
 
-          {/* View More Button for Veils - Appears when 6th item is scrolled to */}
+          {/* View More Button for Veils - Positioned at bottom right of veils section */}
           {showVeilsViewMore && (
-            <div className="relative mt-0">
-              <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={() => { /* This section is the last product section, so no action needed */ }}
-                  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"
-                  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 ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+              <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>