Update src/app/page.tsx

Merge version_34 into main

src/app/page.tsx

@@ -17,8 +17,8 @@ export default function LandingPage() {
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [showViewMoreButton, setShowViewMoreButton] = useState(false);
   const [showShoesArrow, setShowShoesArrow] = useState(false);
-  const [showShoesMoreButton, setShowShoesMoreButton] = useState(false);
+  const [showShoesMoreButton, setShowShoesMoreButton] = useState(true);
-  const [showVeilsMoreButton, setShowVeilsMoreButton] = useState(false);
+  const [showVeilsMoreButton, setShowVeilsMoreButton] = useState(true);
   const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
   const [lastScrollY, setLastScrollY] = useState(0);
   const viewMoreButtonRef = useRef<HTMLDivElement>(null);
@@ -62,38 +62,6 @@ export default function LandingPage() {
             }
           }
 
-          // Check if shoes container (with button) is in view
-          if (shoesContainerRef.current) {
-            const shoesContainerRect = shoesContainerRef.current.getBoundingClientRect();
-            const shoesContainerInView = shoesContainerRect.top < window.innerHeight && shoesContainerRect.bottom > 0;
-
-            // Show more button when scrolled past shoes section
-            // Hide when user scrolls back to shoes area
-            if (!shoesContainerInView && currentScrollY > lastScrollY) {
-              // We've scrolled past the shoes section, show the more button
-              setShowShoesMoreButton(true);
-            } else if (shoesContainerInView && currentScrollY < lastScrollY) {
-              // We're back at or above the shoes section, hide the button
-              setShowShoesMoreButton(false);
-            }
-          }
-
-          // Check if veils container (with button) is in view
-          if (veilsContainerRef.current) {
-            const veilsContainerRect = veilsContainerRef.current.getBoundingClientRect();
-            const veilsContainerInView = veilsContainerRect.top < window.innerHeight && veilsContainerRect.bottom > 0;
-
-            // Show more button when scrolled past veils section
-            // Hide when user scrolls back to veils area
-            if (!veilsContainerInView && currentScrollY > lastScrollY) {
-              // We've scrolled past the veils section, show the more button
-              setShowVeilsMoreButton(true);
-            } else if (veilsContainerInView && currentScrollY < lastScrollY) {
-              // We're back at or above the veils section, hide the button
-              setShowVeilsMoreButton(false);
-            }
-          }
-
           ticking = false;
         });
         ticking = true;
@@ -331,35 +299,18 @@ export default function LandingPage() {
         </button>
       )}
 
-      {/* Fixed "Go to Shoes" Button - With scroll detection */}
+      {/* Fixed "Go to Shoes" Button - Always visible */}
-      {!showShoesArrow && (
+      <button
-        <button
+        onClick={scrollToShoes}
-          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"
-          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"
-          aria-label="Go to Shoes"
+        title="Go to Shoes"
-          title="Go to Shoes"
+      >
-        >
+        <div className="flex flex-col items-center justify-center gap-0.5">
-          <div className="flex flex-col items-center justify-center gap-0.5">
+          <ArrowDown className="w-4 h-4" />
-            <ArrowDown className="w-4 h-4" />
+          <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
-            <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
+        </div>
-          </div>
+      </button>
-        </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">
@@ -667,20 +618,16 @@ export default function LandingPage() {
             ]}
           />
 
-          {/* More Button for Shoes - Positioned after shoes section */}
+          {/* More Button for Shoes - Always visible */}
-          <div className="relative mt-0">
+          <div className="fixed right-6 bottom-8 z-30 flex justify-end">
-            {showShoesMoreButton && (
+            <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"
-                  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>
@@ -719,20 +666,16 @@ export default function LandingPage() {
             ]}
           />
 
-          {/* More Button for Veils - Positioned after veils section */}
+          {/* More Button for Veils - Always visible */}
-          <div className="relative mt-0">
+          <div className="fixed right-6 bottom-8 z-30 flex justify-end">
-            {showVeilsMoreButton && (
+            <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"
-                  onClick={scrollToVeils}
+              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"
+            >
-                  aria-label="View More Veils"
+              <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>