Update src/app/page.tsx

Merge version_38 into main

src/app/page.tsx

@@ -15,36 +15,80 @@ 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 [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
-  const viewMoreButtonRef = useRef<HTMLDivElement>(null);
+  const [showShoesViewMore, setShowShoesViewMore] = useState(false);
+  const [showVeilsViewMore, setShowVeilsViewMore] = useState(false);
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
+  const [lastScrollY, setLastScrollY] = useState(0);
+  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 = () => {
-      setShowBackToTop(window.scrollY > 300);
+      if (!ticking && !showModal) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY;
+          setShowBackToTop(currentScrollY > 300);
+
+          // Determine scroll direction
+          if (currentScrollY > lastScrollY) {
+            setScrollDirection('down');
+          } 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);
+          ticking = false;
+        });
+        ticking = true;
+      }
     };
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  }, [lastScrollY, showModal]);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
+    if (showModal) {
-      ([entry]) => {
+      document.body.style.overflow = 'hidden';
-        setShowViewMoreButton(entry.isIntersecting);
+    } else {
-      },
+      document.body.style.overflow = 'unset';
-      { threshold: 0.1 }
-    );
-
-    if (viewMoreButtonRef.current) {
-      observer.observe(viewMoreButtonRef.current);
     }
 
     return () => {
-      if (viewMoreButtonRef.current) {
+      document.body.style.overflow = 'unset';
-        observer.unobserve(viewMoreButtonRef.current);
-      }
     };
-  }, []);
+  }, [showModal]);
 
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
@@ -56,6 +100,26 @@ export default function LandingPage() {
     }
   };
 
+  const scrollToShoes = () => {
+    const shoesSectionElement = document.getElementById('shoes');
+    if (shoesSectionElement) {
+      shoesSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
+  const scrollToVeils = () => {
+    const veilsSectionElement = document.getElementById('veils');
+    if (veilsSectionElement) {
+      veilsSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
   const scrollToTop = () => {
     const heroSectionElement = document.getElementById('hero');
     if (heroSectionElement) {
@@ -225,19 +289,6 @@ export default function LandingPage() {
         />
       </svg>
 
-      {/* Fixed "Go to Dresses" Button */}
-      <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 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 */}
@@ -381,8 +432,8 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="gallery" data-section="gallery" className="relative z-10">
+      <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."
@@ -393,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>
 
-          {/* View More Button - Positioned after 6th picture, visible when 6th item is in view */}
+        {/* View More Button - Positioned at bottom right of gallery section */}
-          <div ref={viewMoreButtonRef} className="relative mt-0">
+        <div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
-            {showViewMoreButton && (
+          {showGalleryViewMore && (
-              <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
-                <button
+              onClick={() => setShowModal(true)}
-                  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"
-                  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"
-                  aria-label="View More Dresses"
+            >
-                >
+              <span className="text-sm md:text-base">View More</span>
-                  <span className="text-sm md:text-base">View More Dresses</span>
+              <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
+            </button>
-                </button>
+          )}
-              </div>
-            )}
-          </div>
         </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">
@@ -507,72 +559,107 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="shoes" data-section="shoes" className="relative z-10">
+      <div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
-        <ProductCardFour
+        <div className="relative" ref={shoesContainerRef}>
-          title="Bridal Shoes"
+          <ProductCardFour
-          description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
+            title="Bridal Shoes"
-          textboxLayout="default"
+            description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
-          useInvertedBackground={true}
+            textboxLayout="default"
-          tag="Accessory Collection"
+            useInvertedBackground={true}
-          tagIcon={Sparkles}
+            tag="Accessory Collection"
-          tagAnimation="slide-up"
+            tagIcon={Sparkles}
-          gridVariant="three-columns-all-equal-width"
+            tagAnimation="slide-up"
-          animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
-          products={[
+            animationType="slide-up"
-            {
+            buttons={[
-              id: "shoe-1",              name: "Classic Satin Heels",              price: "Starting at $250",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",              imageAlt: "Classic white satin bridal heels"
+              { text: "Explore All Shoes", onClick: scrollToShoes }
-            },
+            ]}
-            {
+            products={[
-              id: "shoe-2",              name: "Jeweled Flats",              price: "Starting at $280",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=2",              imageAlt: "Comfortable jeweled flat bridal shoes"
+              {
-            },
+                id: "shoe-1",                name: "Classic Satin Heels",                price: "Starting at $250",                variant: "White",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",                imageAlt: "Classic white satin bridal heels"
-            {
+              },
-              id: "shoe-3",              name: "Pearl Embellished Pumps",              price: "Starting at $320",              variant: "Champagne",              imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=2",              imageAlt: "Pearl decorated champagne bridal pumps"
+              {
-            },
+                id: "shoe-2",                name: "Jeweled Flats",                price: "Starting at $280",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=2",                imageAlt: "Comfortable jeweled flat bridal shoes"
-            {
+              },
-              id: "shoe-4",              name: "Delicate Strappy Sandals",              price: "Starting at $200",              variant: "Silver",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",              imageAlt: "Delicate silver strappy bridal sandals"
+              {
-            },
+                id: "shoe-3",                name: "Pearl Embellished Pumps",                price: "Starting at $320",                variant: "Champagne",                imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=2",                imageAlt: "Pearl decorated champagne bridal pumps"
-            {
+              },
-              id: "shoe-5",              name: "Vintage Lace Pumps",              price: "Starting at $290",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=2",              imageAlt: "Vintage lace wedding pumps"
+              {
-            },
+                id: "shoe-4",                name: "Delicate Strappy Sandals",                price: "Starting at $200",                variant: "Silver",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",                imageAlt: "Delicate silver strappy bridal sandals"
-            {
+              },
-              id: "shoe-6",              name: "Minimalist Ballet Flats",              price: "Starting at $220",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=2",              imageAlt: "Minimalist ivory ballet flat shoes"
+              {
-            }
+                id: "shoe-5",                name: "Vintage Lace Pumps",                price: "Starting at $290",                variant: "White",                imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=2",                imageAlt: "Vintage lace wedding pumps"
-          ]}
+              },
-        />
+              {
+                id: "shoe-6",                name: "Minimalist Ballet Flats",                price: "Starting at $220",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=2",                imageAlt: "Minimalist ivory ballet flat shoes"
+              }
+            ]}
+          />
+        </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">
+      <div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
-        <ProductCardFour
+        <div className="relative" ref={veilsContainerRef}>
-          title="Veils & Crowns"
+          <ProductCardFour
-          description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
+            title="Veils & Crowns"
-          textboxLayout="default"
+            description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
-          useInvertedBackground={false}
+            textboxLayout="default"
-          tag="Veil Collection"
+            useInvertedBackground={false}
-          tagIcon={Crown}
+            tag="Veil Collection"
-          tagAnimation="slide-up"
+            tagIcon={Crown}
-          gridVariant="three-columns-all-equal-width"
+            tagAnimation="slide-up"
-          animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
-          products={[
+            animationType="slide-up"
-            {
+            products={[
-              id: "veil-1",              name: "Cathedral Length Veil",              price: "Starting at $180",              variant: "White Tulle",              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=2",              imageAlt: "Elegant cathedral length bridal veil"
+              {
-            },
+                id: "veil-1",                name: "Cathedral Length Veil",                price: "Starting at $180",                variant: "White Tulle",                imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=2",                imageAlt: "Elegant cathedral length bridal veil"
-            {
+              },
-              id: "veil-2",              name: "Lace Embellished Veil",              price: "Starting at $220",              variant: "Ivory Lace",              imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=2",              imageAlt: "Beautiful lace embellished bridal veil"
+              {
-            },
+                id: "veil-2",                name: "Lace Embellished Veil",                price: "Starting at $220",                variant: "Ivory Lace",                imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=2",                imageAlt: "Beautiful lace embellished bridal veil"
-            {
+              },
-              id: "veil-3",              name: "Dramatic Detachable Veil",              price: "Starting at $250",              variant: "Ivory",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",              imageAlt: "Dramatic detachable bridal veil"
+              {
-            },
+                id: "veil-3",                name: "Dramatic Detachable Veil",                price: "Starting at $250",                variant: "Ivory",                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",                imageAlt: "Dramatic detachable bridal veil"
-            {
+              },
-              id: "veil-4",              name: "Short Birdcage Veil",              price: "Starting at $120",              variant: "Black Netting",              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",              imageAlt: "Modern short birdcage veil"
+              {
-            },
+                id: "veil-4",                name: "Short Birdcage Veil",                price: "Starting at $120",                variant: "Black Netting",                imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",                imageAlt: "Modern short birdcage veil"
-            {
+              },
-              id: "veil-5",              name: "Pearl Trimmed Veil",              price: "Starting at $200",              variant: "Champagne",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",              imageAlt: "Pearl trimmed champagne bridal veil"
+              {
-            },
+                id: "veil-5",                name: "Pearl Trimmed Veil",                price: "Starting at $200",                variant: "Champagne",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",                imageAlt: "Pearl trimmed champagne bridal veil"
-            {
+              },
-              id: "veil-6",              name: "Crystal Beaded Veil",              price: "Starting at $270",              variant: "White with Crystals",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",              imageAlt: "Sparkling crystal beaded bridal veil"
+              {
-            }
+                id: "veil-6",                name: "Crystal Beaded Veil",                price: "Starting at $270",                variant: "White with Crystals",                imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",                imageAlt: "Sparkling crystal beaded bridal veil"
-          ]}
+              }
-        />
+            ]}
+          />
+        </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>
 
       <div id="contact" data-section="contact" className="relative z-10">

src/hooks/useScrollDetection.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseScrollDetectionOptions {
+  targetElementId: string;
+  scrollThreshold?: number;
+  onStateChange?: (state: {
+    isScrollingPastTarget: boolean;
+    isScrollingBack: boolean;
+    scrollProgress: number;
+  }) => void;
+}
+
+interface UseScrollDetectionReturn {
+  isScrollingPastTarget: boolean;
+  isScrollingBack: boolean;
+  scrollProgress: number;
+}
+
+export function useScrollDetection({
+  targetElementId,
+  scrollThreshold = 0.3,
+  onStateChange,
+}: UseScrollDetectionOptions): UseScrollDetectionReturn {
+  const [isScrollingPastTarget, setIsScrollingPastTarget] = useState(false);
+  const [isScrollingBack, setIsScrollingBack] = useState(false);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const lastScrollYRef = useRef(0);
+  const targetElementRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    // Get target element
+    targetElementRef.current = document.getElementById(targetElementId);
+
+    const handleScroll = () => {
+      if (!targetElementRef.current) return;
+
+      const targetRect = targetElementRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const scrollY = window.scrollY;
+      const currentScrollDirection = scrollY > lastScrollYRef.current ? 'down' : 'up';
+
+      // Calculate if we've scrolled past the target element
+      const targetTop = targetRect.top + scrollY;
+      const thresholdDistance = window.innerHeight * scrollThreshold;
+      const isPastTarget = scrollY > targetTop - thresholdDistance;
+
+      // Determine scroll direction
+      const isScrollingBackward = currentScrollDirection === 'up';
+
+      // Calculate scroll progress (0 to 1)
+      const progress = Math.min(scrollY / (targetTop + thresholdDistance), 1);
+
+      setIsScrollingPastTarget(isPastTarget);
+      setIsScrollingBack(isScrollingBackward);
+      setScrollProgress(progress);
+
+      // Call callback if provided
+      if (onStateChange) {
+        onStateChange({
+          isScrollingPastTarget: isPastTarget,
+          isScrollingBack: isScrollingBackward,
+          scrollProgress: progress,
+        });
+      }
+
+      lastScrollYRef.current = scrollY;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [targetElementId, scrollThreshold, onStateChange]);
+
+  return {
+    isScrollingPastTarget,
+    isScrollingBack,
+    scrollProgress,
+  };
+}