Update src/app/page.tsx

Remove watermark
2026-04-27 01:14:50 +00:00 · 2026-04-27 00:40:16 +00:00 · 2026-04-27 00:36:26 +00:00 · 2026-03-21 23:23:50 +00:00 · 2026-03-21 23:16:27 +00:00 · 2026-03-21 23:16:17 +00:00
3 changed files with 469 additions and 201 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Lato } from "next/font/google";

@@ -28,7 +27,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body className={`${lato.variable} antialiased`}>
-          <Tag />
+          
          {children}
          <script
              dangerouslySetInnerHTML={{
--- a/src/app/page.tsx
+++ b/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,87 @@ 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 [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
+  const [showShoesViewMore, setShowShoesViewMore] = useState(false);
+  const [showVeilsViewMore, setShowVeilsViewMore] = useState(false);
+  const [modalType, setModalType] = useState<'gallery' | 'shoes' | 'veils' | null>(null);
+  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(() => {
+    if (showModal) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [showModal]);

  const scrollToGallery = () => {
    const gallerySectionElement = document.getElementById('gallery');
@@ -36,6 +101,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) {
@@ -124,7 +209,169 @@ export default function LandingPage() {
    }
  ];

+  const allShoes = [
+    {
+      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-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-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-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-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"
+    },
+    {
+      id: "shoe-7",      name: "Elegant Crystal Heels",      price: "Starting at $310",      variant: "White",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=3",      imageAlt: "Elegant crystal white heels"
+    },
+    {
+      id: "shoe-8",      name: "Champagne Satin Pumps",      price: "Starting at $275",      variant: "Champagne",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=3",      imageAlt: "Champagne satin pump heels"
+    },
+    {
+      id: "shoe-9",      name: "Ivory Lace Flats",      price: "Starting at $240",      variant: "Ivory",      imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=3",      imageAlt: "Ivory lace flat bridal shoes"
+    },
+    {
+      id: "shoe-10",      name: "Pearl White Heels",      price: "Starting at $295",      variant: "White",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=3",      imageAlt: "Pearl white bridal heels"
+    },
+    {
+      id: "shoe-11",      name: "Silver Strappy Heels",      price: "Starting at $265",      variant: "Silver",      imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=3",      imageAlt: "Silver strappy bridal heels"
+    },
+    {
+      id: "shoe-12",      name: "Gold Accent Pumps",      price: "Starting at $330",      variant: "Gold",      imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=3",      imageAlt: "Gold accent wedding pumps"
+    }
+  ];
+
+  const allVeils = [
+    {
+      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-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-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-7",      name: "Tulle and Lace Veil",      price: "Starting at $210",      variant: "Ivory",      imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=3",      imageAlt: "Tulle and lace combination veil"
+    },
+    {
+      id: "veil-8",      name: "Romantic Cascading Veil",      price: "Starting at $240",      variant: "White",      imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=3",      imageAlt: "Romantic cascading bridal veil"
+    },
+    {
+      id: "veil-9",      name: "Minimalist Tulle Veil",      price: "Starting at $160",      variant: "White",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2",      imageAlt: "Minimalist white tulle veil"
+    },
+    {
+      id: "veil-10",      name: "Beaded Edge Veil",      price: "Starting at $280",      variant: "Champagne",      imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=2",      imageAlt: "Beaded edge champagne veil"
+    },
+    {
+      id: "veil-11",      name: "Classic Elbow Veil",      price: "Starting at $140",      variant: "Ivory",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",      imageAlt: "Classic ivory elbow length veil"
+    },
+    {
+      id: "veil-12",      name: "Dramatic Train Veil",      price: "Starting at $310",      variant: "White",      imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2",      imageAlt: "Dramatic white train veil"
+    }
+  ];
+
  const initialDresses = allDresses.slice(0, 6);
+  const initialShoes = allShoes.slice(0, 3);
+  const initialVeils = allVeils.slice(0, 3);
+
+  const renderModal = () => {
+    if (!showModal || !modalType) return null;
+
+    let items = [];
+    let title = '';
+
+    if (modalType === 'gallery') {
+      items = allDresses;
+      title = 'Complete Dress Gallery';
+    } else if (modalType === 'shoes') {
+      items = allShoes;
+      title = 'Complete Bridal Shoes Collection';
+    } else if (modalType === 'veils') {
+      items = allVeils;
+      title = 'Complete Veils & Crowns Collection';
+    }
+
+    return (
+      <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">
+            <h2 className="text-xl md:text-2xl font-semibold text-[var(--foreground)]">{title}</h2>
+            <button
+              onClick={() => setShowModal(false)}
+              className="p-2 hover:bg-[var(--accent)]/10 rounded-lg transition-colors"
+              aria-label="Close gallery"
+            >
+              <X className="w-6 h-6 text-[var(--foreground)]" />
+            </button>
+          </div>
+
+          {/* Modal Gallery Grid */}
+          <div className="overflow-y-auto flex-1 p-4 md:p-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
+              {items.map((item) => (
+                <div
+                  key={item.id}
+                  className="group relative overflow-hidden rounded-lg bg-[var(--card)] shadow-md hover:shadow-xl transition-all duration-500 ease-out"
+                >
+                  {/* Image Container */}
+                  <div className="relative h-64 md:h-72 overflow-hidden bg-[var(--accent)]/5">
+                    <img
+                      src={item.imageSrc}
+                      alt={item.imageAlt}
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                    {/* Hover Overlay */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  </div>
+
+                  {/* Content */}
+                  <div className="p-3 md:p-4">
+                    <h3 className="text-sm md:text-base font-semibold text-[var(--foreground)] line-clamp-2">
+                      {item.name}
+                    </h3>
+                    <p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
+                      {item.variant}
+                    </p>
+                    <p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
+                      {item.price}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Modal Footer */}
+          <div className="flex items-center justify-end gap-3 p-4 md:p-6 border-t border-[var(--accent)]/20 bg-[var(--card)]/50">
+            <button
+              onClick={() => setShowModal(false)}
+              className="px-4 md:px-6 py-2 md:py-3 rounded-lg border border-[var(--accent)] text-[var(--foreground)] hover:bg-[var(--accent)]/10 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };

  return (
    <ThemeProvider
@@ -205,47 +452,44 @@ export default function LandingPage() {
        />
      </svg>

-      {/* Fixed "Go to Dresses" Button */}
-      <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"
-        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" />
-          <span className="text-xs font-semibold text-center leading-tight">Dresses</span>
-        </div>
-      </button>
-
-      {/* Fixed Back-to-Top Button */}
-      {showBackToTop && (
-        <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"
+      {/* 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"
        >
-          <ArrowUp className="w-5 h-5" />
-        </button>
-      )}
+          <Instagram className="w-6 h-6" />
+        </a>

-      <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"
-          }}
-        />
+        {/* 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."
@@ -266,7 +510,7 @@ export default function LandingPage() {
              imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=1",              imageAlt: "Elegant Irentall bridal boutique interior"
            },
            {
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=1",              imageAlt: "Happy bride smiling in wedding dress"
+              videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947877000-kdhrbcou.mp4",              imageAlt: "Happy bride smiling in wedding dress"
            }
          ]}
          rightCarouselItems={[
@@ -286,7 +530,7 @@ export default function LandingPage() {

      <div id="features" data-section="features" className="relative z-10">
        <FeatureCardSixteen
-          title="What Makes Us Different"
+          title="What Makes Irentall Different"
          description="At Irentall, we believe every bride deserves a personalized, stress-free experience. Here's what sets us apart from other boutiques."
          textboxLayout="default"
          useInvertedBackground={false}
@@ -333,34 +577,26 @@ export default function LandingPage() {
          tagIcon={Users}
          tagAnimation="slide-up"
          kpiItems={[
-            { value: "50+", label: "Happy Brides" },
+            { value: "120+", label: "Happy Brides" },
            { value: "5.0★", label: "Average Rating" },
-            { value: "4.5+", label: "Month of Excellence" }
+            { value: "6+", label: "Month of Excellence" }
          ]}
          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 className="relative">
+      <div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
+        <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."
@@ -371,86 +607,29 @@ export default function LandingPage() {
            tagAnimation="slide-up"
            gridVariant="bento-grid"
            animationType="slide-up"
-            products={initialDresses}
+            products={initialDresses.map((dress, index) => ({
+              ...dress,
+              _key: `gallery-${index}`
+            }))}
          />
-
-          {/* 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>
-          </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="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">
-                <h2 className="text-xl md:text-2xl font-semibold text-[var(--foreground)]">Complete Dress Gallery</h2>
-                <button
-                  onClick={() => setShowModal(false)}
-                  className="p-2 hover:bg-[var(--accent)]/10 rounded-lg transition-colors"
-                  aria-label="Close gallery"
-                >
-                  <X className="w-6 h-6 text-[var(--foreground)]" />
-                </button>
-              </div>
-
-              {/* Modal Gallery Grid */}
-              <div className="overflow-y-auto flex-1 p-4 md:p-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
-                  {allDresses.map((dress) => (
-                    <div
-                      key={dress.id}
-                      className="group relative overflow-hidden rounded-lg bg-[var(--card)] shadow-md hover:shadow-xl transition-all duration-500 ease-out"
-                    >
-                      {/* Image Container */}
-                      <div className="relative h-64 md:h-72 overflow-hidden bg-[var(--accent)]/5">
-                        <img
-                          src={dress.imageSrc}
-                          alt={dress.imageAlt}
-                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
-                        />
-                        {/* Hover Overlay */}
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                      </div>
-
-                      {/* Content */}
-                      <div className="p-3 md:p-4">
-                        <h3 className="text-sm md:text-base font-semibold text-[var(--foreground)] line-clamp-2">
-                          {dress.name}
-                        </h3>
-                        <p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
-                          {dress.variant}
-                        </p>
-                        <p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
-                          {dress.price}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Modal Footer */}
-              <div className="flex items-center justify-end gap-3 p-4 md:p-6 border-t border-[var(--accent)]/20 bg-[var(--card)]/50">
-                <button
-                  onClick={() => setShowModal(false)}
-                  className="px-4 md:px-6 py-2 md:py-3 rounded-lg border border-[var(--accent)] text-[var(--foreground)] hover:bg-[var(--accent)]/10 transition-colors"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
+        {/* View More Button - Positioned at bottom right of gallery section */}
+        <div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
+          {showGalleryViewMore && (
+            <button
+              onClick={() => {
+                setModalType('gallery');
+                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>

      <div id="reels" data-section="reels" className="relative z-10">
@@ -481,72 +660,81 @@ export default function LandingPage() {
        />
      </div>

-      <div id="shoes" data-section="shoes" className="relative z-10">
-        <ProductCardFour
-          title="Bridal Shoes"
-          description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
-          textboxLayout="default"
-          useInvertedBackground={true}
-          tag="Accessory Collection"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          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"
-            },
-            {
-              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-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-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-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 id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
+        <div className="relative" ref={shoesContainerRef}>
+          <ProductCardFour
+            title="Bridal Shoes"
+            description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            tag="Accessory Collection"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            buttons={[
+              { text: "Explore All Shoes", onClick: scrollToShoes }
+            ]}
+            products={initialShoes.map((shoe, index) => ({
+              ...shoe,
+              _key: `shoes-${index}`
+            }))}
+          />
+        </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={() => {
+                setModalType('shoes');
+                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 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">
-        <ProductCardFour
-          title="Veils & Crowns"
-          description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          tag="Veil Collection"
-          tagIcon={Crown}
-          tagAnimation="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          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-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-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-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 id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
+        <div className="relative" ref={veilsContainerRef}>
+          <ProductCardFour
+            title="Veils & Crowns"
+            description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            tag="Veil Collection"
+            tagIcon={Crown}
+            tagAnimation="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            products={initialVeils.map((veil, index) => ({
+              ...veil,
+              _key: `veils-${index}`
+            }))}
+          />
+        </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
+              onClick={() => {
+                setModalType('veils');
+                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 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" />
+            </button>
+          )}
+        </div>
      </div>

      <div id="contact" data-section="contact" className="relative z-10">
@@ -606,6 +794,9 @@ export default function LandingPage() {
          bottomRightText="3106 Los Feliz Blvd, Los Angeles, CA 90039 | (747) 800-7770"
        />
      </div>
+
+      {/* Universal Modal */}
+      {renderModal()}
    </ThemeProvider>
  );
 }
--- a/src/hooks/useScrollDetection.ts
+++ b/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,
+  };
+}
Author	SHA1	Message	Date
bender	fdf4547d57	Update src/app/page.tsx	2026-04-27 01:14:50 +00:00
bender	a5e06e87b9	Update src/app/page.tsx	2026-04-27 00:40:16 +00:00
bender	f3be5a11fe	Remove watermark	2026-04-27 00:36:26 +00:00
bender	e2506c3a66	Update src/app/page.tsx	2026-03-21 23:23:50 +00:00
bender	b260ab6f15	Merge version_40 into main Merge version_40 into main	2026-03-21 23:16:27 +00:00
bender	a5c834f9fc	Update src/app/page.tsx	2026-03-21 23:16:17 +00:00
bender	1aa9788a4a	Update src/app/page.tsx	2026-03-21 23:11:27 +00:00
bender	150f2b254c	Merge version_38 into main Merge version_38 into main	2026-03-21 23:10:39 +00:00
bender	3aa7e33948	Update src/app/page.tsx	2026-03-21 23:10:35 +00:00
bender	340716fe3e	Merge version_37 into main Merge version_37 into main	2026-03-21 23:07:29 +00:00
bender	537601ee19	Update src/app/page.tsx	2026-03-21 23:07:25 +00:00
bender	9c23776465	Merge version_36 into main Merge version_36 into main	2026-03-21 23:04:00 +00:00
bender	d68a1badc9	Update src/app/page.tsx	2026-03-21 23:03:56 +00:00
bender	5854c172f5	Merge version_35 into main Merge version_35 into main	2026-03-21 22:59:19 +00:00
bender	19f25d0b8f	Update src/app/page.tsx	2026-03-21 22:59:15 +00:00
bender	65db121ec6	Merge version_34 into main Merge version_34 into main	2026-03-21 22:56:54 +00:00
bender	290ecbdf18	Update src/app/page.tsx	2026-03-21 22:56:50 +00:00
bender	cf284f4bc6	Merge version_33 into main Merge version_33 into main	2026-03-21 22:52:01 +00:00
bender	e812a41272	Update src/app/page.tsx	2026-03-21 22:51:57 +00:00
bender	6ec05e6497	Merge version_32 into main Merge version_32 into main	2026-03-21 22:46:18 +00:00
bender	0847c98641	Update src/app/page.tsx	2026-03-21 22:46:14 +00:00
bender	574e17251e	Merge version_31 into main Merge version_31 into main	2026-03-21 22:34:46 +00:00
bender	82edf03cf2	Update src/app/page.tsx	2026-03-21 22:34:42 +00:00
bender	7569facec5	Merge version_30 into main Merge version_30 into main	2026-03-21 22:30:41 +00:00
bender	daab93c9f3	Update src/app/page.tsx	2026-03-21 22:30:37 +00:00
bender	a2228ca537	Merge version_29 into main Merge version_29 into main	2026-03-21 22:24:31 +00:00
bender	68094e5592	Add src/hooks/useScrollDetection.ts	2026-03-21 22:24:27 +00:00
bender	6dd47629e6	Update src/app/page.tsx	2026-03-21 22:24:27 +00:00
bender	ab485b0d30	Merge version_28 into main Merge version_28 into main	2026-03-21 22:16:05 +00:00
bender	651cc9427b	Update src/app/page.tsx	2026-03-21 22:16:01 +00:00
bender	7f18332905	Merge version_27 into main Merge version_27 into main	2026-03-21 22:08:53 +00:00
bender	b0360b5784	Update src/app/page.tsx	2026-03-21 22:08:49 +00:00
bender	b6a8015b5a	Merge version_26 into main Merge version_26 into main	2026-03-19 19:50:24 +00:00
bender	c74227ca00	Update src/app/page.tsx	2026-03-19 19:50:20 +00:00
bender	34667b3e39	Switch to version 24: modified src/app/page.tsx	2026-03-19 19:41:32 +00:00
bender	3f4359dd46	Merge version_25 into main Merge version_25 into main	2026-03-19 19:40:48 +00:00
bender	30c0b01057	Update src/app/page.tsx	2026-03-19 19:40:44 +00:00
bender	0b84fe33a3	Merge version_24 into main Merge version_24 into main	2026-03-19 19:36:14 +00:00
bender	970fa3fbea	Update src/app/page.tsx	2026-03-19 19:36:10 +00:00
bender	9807ee790c	Merge version_23 into main Merge version_23 into main	2026-03-19 19:33:13 +00:00
bender	b5994e8235	Update src/app/page.tsx	2026-03-19 19:33:09 +00:00
bender	e3f129208b	Merge version_22 into main Merge version_22 into main	2026-03-19 19:22:49 +00:00
bender	b835383e2a	Merge version_22 into main Merge version_22 into main	2026-03-19 19:22:24 +00:00
bender	64f3c3869b	Merge version_22 into main Merge version_22 into main	2026-03-19 19:21:49 +00:00