Update src/app/page.tsx

Merge version_31 into main

src/app/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
@@ -10,21 +9,79 @@ import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import BlogCardThree from "@/components/sections/blog/BlogCardThree";
-import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown, ArrowUp } from "lucide-react";
-import { useState, useEffect } from "react";
+import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown, ArrowUp, Instagram, MapPin } from "lucide-react";
+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 [showShoesArrow, setShowShoesArrow] = useState(false);
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const viewMoreButtonRef = useRef<HTMLDivElement>(null);
+  const sixthItemRef = useRef<HTMLDivElement>(null);
+  const galleryRef = useRef<HTMLDivElement>(null);
+  const shoesRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    let ticking = false;
+
     const handleScroll = () => {
-      setShowBackToTop(window.scrollY > 300);
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY;
+          setShowBackToTop(currentScrollY > 300);
+
+          // Determine scroll direction
+          if (currentScrollY > lastScrollY) {
+            setScrollDirection('down');
+          } else {
+            setScrollDirection('up');
+          }
+          setLastScrollY(currentScrollY);
+
+          // Check if gallery is in view
+          if (galleryRef.current) {
+            const rect = galleryRef.current.getBoundingClientRect();
+            const isInView = rect.top < window.innerHeight && rect.bottom > 0;
+
+            // Show button when gallery is scrolled past (user scrolls down past gallery)
+            // Hide button when user scrolls back to gallery area
+            if (!isInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the gallery, show the up arrow
+              setShowViewMoreButton(true);
+            } else if (isInView && currentScrollY < lastScrollY) {
+              // We're back at or above the gallery, hide the button
+              setShowViewMoreButton(false);
+            }
+          }
+
+          // Check if shoes section is in view for arrow detection
+          if (shoesRef.current) {
+            const shoesRect = shoesRef.current.getBoundingClientRect();
+            const shoesInView = shoesRect.top < window.innerHeight && shoesRect.bottom > 0;
+
+            // Show up arrow when scrolled past shoes section
+            // Show down arrow when above shoes section
+            if (!shoesInView && currentScrollY > lastScrollY) {
+              // We've scrolled past the shoes section, show the up arrow
+              setShowShoesArrow(true);
+            } else if (shoesInView) {
+              // We're at or above the shoes section
+              setShowShoesArrow(false);
+            }
+          }
+
+          ticking = false;
+        });
+        ticking = true;
+      }
     };
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  }, [lastScrollY]);
 
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
@@ -36,6 +93,16 @@ export default function LandingPage() {
     }
   };
 
+  const scrollToShoes = () => {
+    const shoesSectionElement = document.getElementById('shoes');
+    if (shoesSectionElement) {
+      shoesSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
   const scrollToTop = () => {
     const heroSectionElement = document.getElementById('hero');
     if (heroSectionElement) {
@@ -205,47 +272,102 @@ export default function LandingPage() {
         />
       </svg>
 
-      {/* Fixed "Go to Dresses" Button */}
+      {/* Fixed "Go to Dresses" Button - Only visible on home page */}
       <button
         onClick={scrollToGallery}
-        className="fixed right-6 bottom-32 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] 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-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-1">
-          <ArrowDown className="w-5 h-5" />
+        <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 Back-to-Top Button */}
-      {showBackToTop && (
+      {/* Fixed "Back to Dresses" Button - Appears when scrolled past gallery */}
+      {showViewMoreButton && (
         <button
-          onClick={scrollToTop}
-          className="fixed right-6 bottom-6 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--secondary-cta)] to-[var(--secondary-cta)] text-[var(--secondary-cta-text)] 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-0 duration-300"
-          aria-label="Back to Top"
-          title="Back to Top"
+          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 animate-in fade-in slide-in-from-bottom-4"
+          aria-label="Back to Dresses"
+          title="Back to Dresses"
         >
-          <ArrowUp className="w-5 h-5" />
+          <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">Dress</span>
+          </div>
         </button>
       )}
 
-      <div id="nav" data-section="nav" className="relative z-20">
-        <NavbarStyleCentered
-          brandName="Irentall "
-          navItems={[
-            { name: "Home", id: "home" },
-            { name: "About", id: "about" },
-            { name: "Gallery", id: "gallery" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{
-            text: "Call Now",            href: "tel:747-800-7770"
-          }}
-        />
+      {/* Fixed "Go to Shoes" Button - With scroll detection */}
+      {!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"
+          aria-label="Go to Shoes"
+          title="Go to Shoes"
+        >
+          <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">Shoes</span>
+          </div>
+        </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">
+        {/* Instagram */}
+        <a
+          href="https://instagram.com/irentall.usa"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="Follow us on Instagram"
+          title="Follow us on Instagram @irentall.usa"
+        >
+          <Instagram className="w-6 h-6" />
+        </a>
+
+        {/* Phone */}
+        <a
+          href="tel:747-800-7770"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="Call us"
+          title="Call (747) 800-7770"
+        >
+          <Phone className="w-6 h-6" />
+        </a>
+
+        {/* Google Maps */}
+        <a
+          href="https://www.google.com/maps/search/Irentall"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-110 transition-transform duration-300 ease-out"
+          aria-label="Search Irentall on Google Maps"
+          title="Search Irentall on Google Maps"
+        >
+          <MapPin className="w-6 h-6" />
+        </a>
       </div>
 
-      <div id="hero" data-section="hero" className="relative z-10">
+      <div id="hero" data-section="hero" className="relative z-10 mt-16">
         <HeroSplitDoubleCarousel
           title="Find Your Perfect Wedding Dress in Los Angeles"
           description="Personalized bridal styling with a curated collection of stunning gowns. Our expert team will guide you through every moment of your journey to find the dress of your dreams."
@@ -340,26 +462,18 @@ export default function LandingPage() {
           testimonials={[
             {
               id: "1",              name: "Marina Farhardyan ",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2",              imageAlt: "Sarah Johnson - Happy bride"
+              imageSrc: "",              imageAlt: "Sarah Johnson - Happy bride"
             },
             {
               id: "2",              name: "Jessica Martinez",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=2",              imageAlt: "Jessica Martinez - Bride with friends"
-            },
-            {
-              id: "3",              name: "Emily Chen",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/reflection-senior-mother-mature-daughter-mirror-home_23-2148202921.jpg",              imageAlt: "Emily Chen - Bride in mirror"
-            },
-            {
-              id: "4",              name: "Michelle Rodriguez",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",              imageAlt: "Michelle Rodriguez - Happy bride moment"
+              imageSrc: "",              imageAlt: "Jessica Martinez - Bride with friends"
             }
           ]}
           animationType="slide-up"
         />
       </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">
           <ProductCardFour
             title="Our Dress Collection"
@@ -374,16 +488,20 @@ export default function LandingPage() {
             products={initialDresses}
           />
 
-          {/* View More Button Positioned on Right */}
-          <div className="flex justify-end px-4 md:px-8 lg:px-16 py-6 md:py-10">
-            <button
-              onClick={() => setShowModal(true)}
-              className="group relative inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out"
-              aria-label="View More Dresses"
-            >
-              <span className="text-sm md:text-base">View More Dresses</span>
-              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-1 transition-transform" />
-            </button>
+          {/* More Button - Positioned after gallery section */}
+          <div className="relative mt-0">
+            {showViewMoreButton && (
+              <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">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>
 
@@ -481,7 +599,7 @@ 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
           title="Bridal Shoes"
           description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
@@ -492,6 +610,9 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
+          buttons={[
+            { text: "Explore All Shoes", onClick: scrollToShoes }
+          ]}
           products={[
             {
               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"

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,
+  };
+}