Update src/app/page.tsx

Merge version_29 into main

src/app/page.tsx

@@ -1,17 +1,178 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Star, Heart, Users, Camera } from "lucide-react";
+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, 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 [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
+  const [lastScrollY, setLastScrollY] = useState(0);
+  const viewMoreButtonRef = useRef<HTMLDivElement>(null);
+  const sixthItemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let ticking = false;
+
+    const handleScroll = () => {
+      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 6th item is in view
+          if (sixthItemRef.current) {
+            const rect = sixthItemRef.current.getBoundingClientRect();
+            const isInView = rect.top < window.innerHeight && rect.bottom > 0;
+            const isScrollingDown = scrollDirection === 'down';
+
+            // Show button when 6th item is reached AND scrolling down
+            // Hide button when scrolling back up past the 6th item
+            if (isInView && isScrollingDown) {
+              setShowViewMoreButton(true);
+            } else if (!isInView && scrollDirection === 'up') {
+              setShowViewMoreButton(false);
+            }
+          }
+
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY, scrollDirection]);
+
+  const scrollToGallery = () => {
+    const gallerySectionElement = document.getElementById('gallery');
+    if (gallerySectionElement) {
+      gallerySectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
+  const scrollToShoes = () => {
+    const shoesSectionElement = document.getElementById('shoes');
+    if (shoesSectionElement) {
+      shoesSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
+  const scrollToTop = () => {
+    const heroSectionElement = document.getElementById('hero');
+    if (heroSectionElement) {
+      heroSectionElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+
+  const allDresses = [
+    {
+      id: "dress-1",      name: "Classic Elegance",      price: "Starting at $1,200",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=1",      imageAlt: "Elegant white wedding dress"
+    },
+    {
+      id: "dress-2",      name: "Blush Romance",      price: "Starting at $1,400",      variant: "Blush Pink",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=1",      imageAlt: "Beautiful blush pink wedding gown"
+    },
+    {
+      id: "dress-3",      name: "Modern Sophistication",      price: "Starting at $1,300",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=1",      imageAlt: "Modern off-shoulder wedding dress"
+    },
+    {
+      id: "dress-4",      name: "Intricate Lace",      price: "Starting at $1,500",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=1",      imageAlt: "Detailed lace wedding dress"
+    },
+    {
+      id: "dress-5",      name: "Minimalist Chic",      price: "Starting at $1,100",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=1",      imageAlt: "Sleek minimalist wedding dress"
+    },
+    {
+      id: "dress-6",      name: "Royal Drama",      price: "Starting at $1,600",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=1",      imageAlt: "Dramatic train wedding dress"
+    },
+    {
+      id: "dress-7",      name: "Ethereal Layers",      price: "Starting at $1,350",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=2",      imageAlt: "Layered tulle ethereal wedding dress"
+    },
+    {
+      id: "dress-8",      name: "Vintage Inspired",      price: "Starting at $1,450",      variant: "Champagne",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=2",      imageAlt: "Vintage champagne wedding gown"
+    },
+    {
+      id: "dress-9",      name: "Modern Asymmetric",      price: "Starting at $1,550",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=2",      imageAlt: "Asymmetric modern wedding dress"
+    },
+    {
+      id: "dress-10",      name: "Beaded Elegance",      price: "Starting at $1,700",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=2",      imageAlt: "Beaded white wedding dress"
+    },
+    {
+      id: "dress-11",      name: "Sleek Minimalist",      price: "Starting at $1,150",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=2",      imageAlt: "Sleek off-white minimalist dress"
+    },
+    {
+      id: "dress-12",      name: "Princess Ball Gown",      price: "Starting at $1,800",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=2",      imageAlt: "Princess ball gown wedding dress"
+    },
+    {
+      id: "dress-13",      name: "Romantic Lace",      price: "Starting at $1,400",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=3",      imageAlt: "Romantic lace wedding dress"
+    },
+    {
+      id: "dress-14",      name: "Blush Elegance",      price: "Starting at $1,480",      variant: "Blush",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=3",      imageAlt: "Blush elegance wedding gown"
+    },
+    {
+      id: "dress-15",      name: "Modern Drape",      price: "Starting at $1,320",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=3",      imageAlt: "Modern drape wedding dress"
+    },
+    {
+      id: "dress-16",      name: "Lace Detail",      price: "Starting at $1,520",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=3",      imageAlt: "Lace detail wedding dress"
+    },
+    {
+      id: "dress-17",      name: "Minimal Chic",      price: "Starting at $1,120",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=3",      imageAlt: "Minimal chic wedding dress"
+    },
+    {
+      id: "dress-18",      name: "Dramatic Train",      price: "Starting at $1,650",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=3",      imageAlt: "Dramatic train dress"
+    },
+    {
+      id: "dress-19",      name: "Sophisticated Ivory",      price: "Starting at $1,380",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=4",      imageAlt: "Sophisticated ivory wedding dress"
+    },
+    {
+      id: "dress-20",      name: "Blush Romance Premium",      price: "Starting at $1,550",      variant: "Blush Pink",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897625910-hax1y5k9.jpg?_wi=4",      imageAlt: "Premium blush pink wedding gown"
+    },
+    {
+      id: "dress-21",      name: "Contemporary Cut",      price: "Starting at $1,420",      variant: "Off-White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=4",      imageAlt: "Contemporary cut wedding dress"
+    },
+    {
+      id: "dress-22",      name: "Intricate Beading",      price: "Starting at $1,720",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898173007-a5wime2i.jpg?_wi=4",      imageAlt: "Intricate beading wedding dress"
+    },
+    {
+      id: "dress-23",      name: "Elegant Minimalist",      price: "Starting at $1,180",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898188020-nldykyrf.jpg?_wi=4",      imageAlt: "Elegant minimalist wedding dress"
+    },
+    {
+      id: "dress-24",      name: "Royal Gown",      price: "Starting at $1,850",      variant: "White",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898205862-ka8mspzk.jpg?_wi=4",      imageAlt: "Royal wedding gown"
+    },
+    {
+      id: "dress-25",      name: "Timeless Beauty",      price: "Starting at $1,440",      variant: "Ivory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=5",      imageAlt: "Timeless beauty wedding dress"
+    }
+  ];
+
+  const initialDresses = allDresses.slice(0, 6);
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -25,22 +186,136 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="light"
     >
-      <div id="nav" data-section="nav">
-        <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"
-          }}
+      {/* Decorative Squiggly Curved Lines with Gold Accents */}
+      <svg
+        className="fixed inset-0 pointer-events-none z-0 w-full h-full"
+        viewBox="0 0 1920 1080"
+        preserveAspectRatio="none"
+        style={{
+          opacity: 0.6,
+        }}
+      >
+        {/* Multiple squiggly curved lines flowing diagonally from top-left to bottom-right */}
+        
+        {/* Line 1 - Main centerline */}
+        <path
+          d="M 0 0 Q 200 150, 300 250 T 600 500 T 900 700 T 1200 850 T 1920 1080"
+          stroke="#D4AF37"
+          strokeWidth="3"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
+        
+        {/* Line 2 - Left offset */}
+        <path
+          d="M -150 50 Q 100 180, 200 300 T 500 550 T 800 750 T 1100 900 T 1700 1050"
+          stroke="#D4AF37"
+          strokeWidth="2.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.7"
+        />
+        
+        {/* Line 3 - Right offset */}
+        <path
+          d="M 150 -20 Q 350 120, 480 220 T 800 480 T 1100 680 T 1350 850 T 1920 1000"
+          stroke="#D4AF37"
+          strokeWidth="2"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.65"
+        />
+        
+        {/* Line 4 - Far left */}
+        <path
+          d="M -300 100 Q -50 250, 80 350 T 400 600 T 700 800 T 950 950 T 1450 1080"
+          stroke="#D4AF37"
+          strokeWidth="2"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.55"
+        />
+        
+        {/* Line 5 - Far right */}
+        <path
+          d="M 300 20 Q 500 160, 650 280 T 950 520 T 1250 720 T 1550 900 T 1920 1080"
+          stroke="#D4AF37"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.5"
+        />
+      </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 "Go to Shoes" Button */}
+      <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 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">
+      <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."
@@ -49,16 +324,16 @@ export default function LandingPage() {
           tagIcon={Star}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Call Now", href: "tel:(747)800-7770" },
-            { text: "Book Appointment", href: "#appointment" }
+            { text: "Call Now", href: "tel:747-800-7770" },
+            { text: "Browse Dresses", onClick: scrollToGallery }
           ]}
           buttonAnimation="slide-up"
           leftCarouselItems={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg",              imageAlt: "Bride in beautiful wedding dress at Irentall boutique"
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=1",              imageAlt: "Bride in beautiful wedding dress at Irentall boutique"
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg",              imageAlt: "Elegant Irentall bridal boutique interior"
+              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"
@@ -79,20 +354,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
-        <InlineImageSplitTextAbout
-          heading={[
-            { type: "text", content: "Why Irentall Stands Out" }
-          ]}
-          buttons={[
-            { text: "Schedule Consultation", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="features" data-section="features">
+      <div id="features" data-section="features" className="relative z-10">
         <FeatureCardSixteen
           title="What Makes Us Different"
           description="At Irentall, we believe every bride deserves a personalized, stress-free experience. Here's what sets us apart from other boutiques."
@@ -115,7 +377,23 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="about" data-section="about" className="relative z-10">
+        <TestimonialAboutCard
+          tag="Meet Our Founder"
+          tagIcon={User}
+          tagAnimation="slide-up"
+          title="Iren Ulikhanova  "
+          description="Iren Ulikhanova is an accomplished professional in the wedding and dance industry, with years of experience as a dancer, choreographer, and wedding coach. As the owner of a refined wedding dress rental boutique, she combines artistic vision with deep understanding of bridal elegance, delivering a polished and personalized experience for every client.  Known for her professionalism and attention to detail, Iren has helped countless couples bring their wedding visions to life, both through exquisite bridal styling and beautifully choreographed first dances."
+          subdescription=""
+          icon={Heart}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg"
+          imageAlt="Irentall owner with bride"
+          mediaAnimation="slide-up"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials" className="relative z-10">
         <TestimonialCardSixteen
           title="Real Brides, Real Love"
           description="See what brides in Los Angeles are saying about their Irentall experience."
@@ -125,107 +403,249 @@ export default function LandingPage() {
           tagIcon={Users}
           tagAnimation="slide-up"
           kpiItems={[
-            { value: "500+", label: "Happy Brides" },
+            { value: "50+", label: "Happy Brides" },
             { value: "5.0★", label: "Average Rating" },
-            { value: "10+", label: "Years of Excellence" }
+            { value: "4.5+", label: "Month of Excellence" }
           ]}
           testimonials={[
             {
-              id: "1",              name: "Sarah Johnson",              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"
+              id: "1",              name: "Marina Farhardyan ",              role: "Bride",              company: "Irentall Boutique",              rating: 5,
+              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"
             }
           ]}
-          buttons={[
-            { text: "See More Reviews", href: "#" }
-          ]}
-          buttonAnimation="slide-up"
           animationType="slide-up"
         />
       </div>
 
-      <div id="gallery" data-section="gallery">
+      <div id="gallery" data-section="gallery" className="relative z-10">
+        <div className="relative">
+          <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."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            tag="Gallery"
+            tagIcon={Camera}
+            tagAnimation="slide-up"
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            products={initialDresses}
+          />
+
+          {/* Reference to 6th item for scroll detection */}
+          <div ref={sixthItemRef} className="absolute pointer-events-none" style={{ height: 0, top: 'calc(100% - 500px)' }} />
+
+          {/* More Button - Positioned after 6th picture, visible when 6th item is reached and scrolling down */}
+          <div className="relative mt-0">
+            {showViewMoreButton && scrollDirection === 'down' && (
+              <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>
+
+        {/* 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>
+        )}
+      </div>
+
+      <div id="reels" data-section="reels" className="relative z-10">
+        <BlogCardThree
+          title="Behind the Beauty"
+          description=""
+          textboxLayout="default"
+          useInvertedBackground={true}
+          tag="Featured Content"
+          tagIcon={Play}
+          tagAnimation="slide-up"
+          animationType="slide-up"
+          blogs={[
+            {
+              id: "reel-1",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=1",              imageAlt: "Bride and groom first look moment",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+            },
+            {
+              id: "reel-2",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=2",              imageAlt: "Bride twirling in wedding dress",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+            },
+            {
+              id: "reel-3",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=3",              imageAlt: "Bride with complete bridal accessories",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+            },
+            {
+              id: "reel-4",              category: "",              title: "",              excerpt: "",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4?_wi=4",              imageAlt: "Close-up of wedding dress lace details",              authorName: "Irentall Team",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg",              date: ""
+            }
+          ]}
+          uniformGridCustomHeightClasses="min-h-120 2xl:min-h-150"
+        />
+      </div>
+
+      <div id="shoes" data-section="shoes" className="relative z-10">
         <ProductCardFour
-          title="Our Dress Collection"
-          description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism."
+          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={[
+            {
+              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>
+
+      <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="Gallery"
-          tagIcon={Camera}
+          tag="Veil Collection"
+          tagIcon={Crown}
           tagAnimation="slide-up"
-          buttons={[
-            { text: "Book Your Fitting", href: "#appointment" }
-          ]}
-          buttonAnimation="slide-up"
-          gridVariant="bento-grid"
+          gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           products={[
             {
-              id: "dress-1",              name: "Classic Elegance",              price: "Starting at $1,200",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2",              imageAlt: "Elegant white wedding dress"
+              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: "dress-2",              name: "Blush Romance",              price: "Starting at $1,400",              variant: "Blush Pink",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg",              imageAlt: "Beautiful blush pink wedding gown"
+              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: "dress-3",              name: "Modern Sophistication",              price: "Starting at $1,300",              variant: "Off-White",              imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-wedding-clothes-collection_1236-88.jpg",              imageAlt: "Modern off-shoulder wedding dress"
+              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: "dress-4",              name: "Intricate Lace",              price: "Starting at $1,500",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg",              imageAlt: "Detailed lace wedding dress"
+              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: "dress-5",              name: "Minimalist Chic",              price: "Starting at $1,100",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg",              imageAlt: "Sleek minimalist wedding dress"
+              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: "dress-6",              name: "Royal Drama",              price: "Starting at $1,600",              variant: "White",              imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg",              imageAlt: "Dramatic train wedding dress"
+              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>
 
-      <div id="appointment" data-section="appointment">
-        <ContactCenter
-          tag="Limited Appointments"
-          title="Book Your Bridal Appointment Today"
-          description="Schedule your private fitting and let our expert team help you find your dream dress. Join 500+ happy brides who found their perfect gown at Irentall."
+      <div id="contact" data-section="contact" className="relative z-10">
+        <ContactCTA
+          tag="Get in Touch"
+          tagIcon={Phone}
+          tagAnimation="slide-up"
+          title="Ready to Find Your Dream Dress?"
+          description="Book your free 30-minute styling session with limited availability! Our bridal experts will work with you one-on-one to find the perfect gown. Call or text (747) 800-7770 to secure your appointment today."
+          buttons={[
+            { text: "Call (747) 800-7770", href: "tel:747-800-7770" },
+            { text: "Text (747) 800-7770", href: "sms:747-800-7770" }
+          ]}
+          buttonAnimation="slide-up"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Your name"
-          buttonText="Book Now"
-          termsText="By booking an appointment, you agree to our appointment policy. We look forward to seeing you soon!"
+          buttonContainerClassName="flex flex-col-reverse sm:flex-row gap-3 justify-center"
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Visit Us"
-          title="Location & Hours"
-          description="Visit Irentall Bridal Boutique in the heart of Los Feliz. We're open 6 days a week and ready to help you find your perfect dress."
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Your phone number"
-          buttonText="Get Directions"
-          termsText="📍 3106 Los Feliz Blvd, Los Angeles, CA 90039 | ☎️ (747) 800-7770"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" className="relative z-10">
         <FooterSimple
           columns={[
             {
               title: "Irentall",              items: [
                 { label: "Home", href: "#home" },
-                { label: "About Us", href: "#about" },
+                { label: "About", href: "#about" },
                 { label: "Gallery", href: "#gallery" },
                 { label: "Contact", href: "#contact" }
               ]
@@ -239,19 +659,18 @@ export default function LandingPage() {
               ]
             },
             {
-              title: "Contact",              items: [
-                { label: "Phone", href: "tel:(747)800-7770" },
-                { label: "Email", href: "mailto:info@irentall.com" },
-                { label: "Address", href: "#contact" },
-                { label: "Book Online", href: "#appointment" }
+              title: "Accessories",              items: [
+                { label: "Shoes", href: "#shoes" },
+                { label: "Veils & Headpieces", href: "#veils" },
+                { label: "Complete Looks", href: "#appointment" }
               ]
             },
             {
-              title: "Legal",              items: [
-                { label: "Privacy Policy", href: "#" },
-                { label: "Terms of Service", href: "#" },
-                { label: "Appointment Policy", href: "#" },
-                { label: "Returns & Exchanges", href: "#" }
+              title: "Contact",              items: [
+                { label: "Phone", href: "tel:747-800-7770" },
+                { label: "Email", href: "mailto:info@irentall.com" },
+                { label: "Address", href: "#contact" },
+                { label: "Book Online", href: "#appointment" }
               ]
             }
           ]}
@@ -261,4 +680,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1c1c1c;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
-  --background-accent: #a8e8ba;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
+  --primary-cta-text: #f6f0e9;
+  --secondary-cta: #efe7dd;
+  --secondary-cta-text: #2b180a;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

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