Update src/app/page.tsx

Merge version_37 into main

src/app/page.tsx

@@ -46,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 section is in viewport
-          if (galleryContainerRef.current) {
+          if (galleryRef.current) {
-            const items = galleryContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = galleryRef.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 section is in viewport
-          if (shoesContainerRef.current) {
+          if (shoesRef.current) {
-            const items = shoesContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = shoesRef.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 section is in viewport
-          if (veilsContainerRef.current) {
+          if (veilsRef.current) {
-            const items = veilsContainerRef.current.querySelectorAll('[data-product-item]');
+            const rect = veilsRef.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);
@@ -452,7 +440,7 @@ export default function LandingPage() {
 
           {/* View More Button - Positioned at bottom right of gallery section */}
           {showGalleryViewMore && (
-            <div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+            <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">
               <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"
@@ -598,7 +586,7 @@ export default function LandingPage() {
 
           {/* View More Button for Shoes - Positioned at bottom right of shoes section */}
           {showShoesViewMore && (
-            <div ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+            <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">
               <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"
@@ -648,7 +636,7 @@ export default function LandingPage() {
 
           {/* View More Button for Veils - Positioned at bottom right of veils section */}
           {showVeilsViewMore && (
-            <div ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+            <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">
               <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"