Update src/app/page.tsx

Merge version_46 into main
2026-04-27 01:32:10 +00:00 · 2026-04-27 01:27:33 +00:00 · 2026-04-27 01:26:19 +00:00 · 2026-04-27 01:26:16 +00:00 · 2026-04-27 01:25:41 +00:00 · 2026-04-27 01:25:38 +00:00
2 changed files with 91 additions and 667 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
@@ -3,730 +3,155 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
 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, Instagram, MapPin } from "lucide-react";
+import { Star, Heart, Camera, Sparkles, Crown, Phone, User, Play, ChevronRight, X, 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 [showViewMoreButton, setShowViewMoreButton] = useState(false);
+  const [showShoesViewMore, setShowShoesViewMore] = useState(false);
-  const [showShoesArrow, setShowShoesArrow] = useState(false);
+  const [showVeilsViewMore, setShowVeilsViewMore] = useState(false);
-  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
+  const [modalType, setModalType] = useState<'gallery' | 'shoes' | 'veils' | null>(null);
  const [lastScrollY, setLastScrollY] = useState(0);
  const viewMoreButtonRef = useRef<HTMLDivElement>(null);
  const sixthItemRef = useRef<HTMLDivElement>(null);
  const galleryRef = useRef<HTMLDivElement>(null);
  const shoesRef = useRef<HTMLDivElement>(null);
  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 = () => {
-      if (!ticking) {
+      if (!ticking && !showModal) {
        window.requestAnimationFrame(() => {
-          const currentScrollY = window.scrollY;
+          if (galleryButtonContainerRef.current) {
-          setShowBackToTop(currentScrollY > 300);
+            const rect = galleryButtonContainerRef.current.getBoundingClientRect();
-
+            setShowGalleryViewMore(rect.top < window.innerHeight && rect.bottom > 0);
          // Determine scroll direction
          if (currentScrollY > lastScrollY) {
            setScrollDirection('down');
          } else {
            setScrollDirection('up');
          }
-          setLastScrollY(currentScrollY);
+          if (shoesButtonContainerRef.current) {
-
+            const rect = shoesButtonContainerRef.current.getBoundingClientRect();
-          // Check if gallery is in view
+            setShowShoesViewMore(rect.top < window.innerHeight && rect.bottom > 0);
          if (galleryRef.current) {
            const rect = galleryRef.current.getBoundingClientRect();
            const isInView = rect.top < window.innerHeight && rect.bottom > 0;
            // Show button when gallery is scrolled past (user scrolls down past gallery)
            // Hide button when user scrolls back to gallery area
            if (!isInView && currentScrollY > lastScrollY) {
              // We've scrolled past the gallery, show the up arrow
              setShowViewMoreButton(true);
            } else if (isInView && currentScrollY < lastScrollY) {
              // We're back at or above the gallery, hide the button
              setShowViewMoreButton(false);
            }
          }
-
+          if (veilsButtonContainerRef.current) {
-          // Check if shoes section is in view for arrow detection
+            const rect = veilsButtonContainerRef.current.getBoundingClientRect();
-          if (shoesRef.current) {
+            setShowVeilsViewMore(rect.top < window.innerHeight && rect.bottom > 0);
            const shoesRect = shoesRef.current.getBoundingClientRect();
            const shoesInView = shoesRect.top < window.innerHeight && shoesRect.bottom > 0;
            // Show up arrow when scrolled past shoes section
            // Show down arrow when above shoes section
            if (!shoesInView && currentScrollY > lastScrollY) {
              // We've scrolled past the shoes section, show the up arrow
              setShowShoesArrow(true);
            } else if (shoesInView) {
              // We're at or above the shoes section
              setShowShoesArrow(false);
            }
          }
          ticking = false;
        });
        ticking = true;
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
-  }, [lastScrollY]);
+  }, [showModal]);
-  const scrollToGallery = () => {
+  useEffect(() => {
-    const gallerySectionElement = document.getElementById('gallery');
+    document.body.style.overflow = showModal ? 'hidden' : 'unset';
-    if (gallerySectionElement) {
+    return () => { document.body.style.overflow = 'unset'; };
-      gallerySectionElement.scrollIntoView({
+  }, [showModal]);
-        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" }];
-      });
+  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" }];
-    }
+  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" }];
  const allReels = [{ id: "r1", category: "Behind the Scenes", title: "Our Studio Tour", excerpt: "Take a peek behind the curtain at Irentall.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773898154508-5owc9z0t.jpg?_wi=1", authorName: "Iren Ulikhanova", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg", date: "2024-05-20" }, { id: "r2", category: "BTS", title: "Fitting Process", excerpt: "See how we tailor every gown to perfection.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg?_wi=1", authorName: "Iren Ulikhanova", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg", date: "2024-05-18" }];
  const renderModal = () => {
    if (!showModal || !modalType) return null;
    const items = modalType === 'gallery' ? allDresses : modalType === 'shoes' ? allShoes : allVeils;
    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">
          <div className="flex items-center justify-between p-6 border-b border-[var(--accent)]/20">
            <h2 className="text-2xl font-semibold text-[var(--foreground)]">Collection</h2>
            <button onClick={() => setShowModal(false)} className="p-2 hover:bg-[var(--accent)]/10 rounded-lg"><X className="w-6 h-6" /></button>
          </div>
          <div className="overflow-y-auto flex-1 p-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {items.map((item) => (
                <div key={item.id} className="group relative overflow-hidden rounded-lg bg-[var(--card)] shadow-md">
                  <img src={item.imageSrc} alt={item.imageAlt} className="w-full h-64 object-cover" />
                  <div className="p-4">
                    <h3 className="font-semibold text-[var(--foreground)]">{item.name}</h3>
                    <p className="text-sm text-[var(--foreground)]/70">{item.variant}</p>
                    <p className="font-bold text-[var(--primary-cta)] mt-2">{item.price}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  };
  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
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="small" sizing="medium" background="grid" cardStyle="inset" primaryButtonStyle="radial-glow" secondaryButtonStyle="glass" headingFontWeight="light">
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="grid"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      {/* 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 - Only visible on home page */}
      <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 "Back to Dresses" Button - Appears when scrolled past gallery */}
      {showViewMoreButton && (
        <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 animate-in fade-in slide-in-from-bottom-4"
          aria-label="Back to Dresses"
          title="Back to Dresses"
        >
          <div className="flex flex-col items-center justify-center gap-0.5">
            <ArrowUp className="w-4 h-4" />
            <span className="text-xs font-semibold text-center leading-tight">Dress</span>
          </div>
        </button>
      )}
      {/* Fixed "Go to Shoes" Button - With scroll detection */}
      {!showShoesArrow && (
        <button
          onClick={scrollToShoes}
          className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
          aria-label="Go to Shoes"
          title="Go to Shoes"
        >
          <div className="flex flex-col items-center justify-center gap-0.5">
            <ArrowDown className="w-4 h-4" />
            <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
          </div>
        </button>
      )}
      {/* Fixed "Back to Shoes" Button - Appears when scrolled past shoes */}
      {showShoesArrow && (
        <button
          onClick={scrollToShoes}
          className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95 animate-in fade-in slide-in-from-bottom-4"
          aria-label="Back to Shoes"
          title="Back to Shoes"
        >
          <div className="flex flex-col items-center justify-center gap-0.5">
            <ArrowUp className="w-4 h-4" />
            <span className="text-xs font-semibold text-center leading-tight">Shoes</span>
          </div>
        </button>
      )}
      {/* Fixed Top Social & Contact Bar */}
      <div className="fixed top-0 left-0 right-0 z-50 bg-[#D4AF37] text-black py-3 px-4 flex items-center justify-center gap-6">
-        {/* Instagram */}
+        <a href="https://instagram.com/irentall.usa" target="_blank" rel="noopener noreferrer"><Instagram className="w-6 h-6" /></a>
-        <a
+        <a href="tel:747-800-7770"><Phone className="w-6 h-6" /></a>
-          href="https://instagram.com/irentall.usa"
+        <a href="https://www.google.com/maps/search/Irentall" target="_blank" rel="noopener noreferrer"><MapPin className="w-6 h-6" /></a>
          target="_blank"
          rel="noopener noreferrer"
          className="hover:scale-110 transition-transform duration-300 ease-out"
          aria-label="Follow us on Instagram"
          title="Follow us on Instagram @irentall.usa"
        >
          <Instagram className="w-6 h-6" />
        </a>
        {/* Phone */}
        <a
          href="tel:747-800-7770"
          className="hover:scale-110 transition-transform duration-300 ease-out"
          aria-label="Call us"
          title="Call (747) 800-7770"
        >
          <Phone className="w-6 h-6" />
        </a>
        {/* Google Maps */}
        <a
          href="https://www.google.com/maps/search/Irentall"
          target="_blank"
          rel="noopener noreferrer"
          className="hover:scale-110 transition-transform duration-300 ease-out"
          aria-label="Search Irentall on Google Maps"
          title="Search Irentall on Google Maps"
        >
          <MapPin className="w-6 h-6" />
        </a>
      </div>
      <div id="hero" data-section="hero" className="relative z-10 mt-16">
-        <HeroSplitDoubleCarousel
+        <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." background={{ variant: "plain" }} leftCarouselItems={allDresses.slice(0, 3).map(d => ({ imageSrc: d.imageSrc, imageAlt: d.imageAlt }))} rightCarouselItems={allDresses.slice(3, 6).map(d => ({ imageSrc: d.imageSrc, imageAlt: d.imageAlt }))} tag="5.0 ★ Loved by Local Brides" tagIcon={Star} tagAnimation="slide-up" buttons={[{ text: "Call Now", href: "tel:747-800-7770" }, { text: "Browse Dresses", onClick: () => galleryRef.current?.scrollIntoView({ behavior: 'smooth' }) }]} buttonAnimation="slide-up" carouselPosition="right" />
          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."
          background={{ variant: "plain" }}
          tag="5.0 ★ Loved by Local Brides"
          tagIcon={Star}
          tagAnimation="slide-up"
          buttons={[
            { 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?_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?_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"
            }
          ]}
          rightCarouselItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=1",              imageAlt: "Bride with friends at bridal boutique"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=1",              imageAlt: "Elegant white wedding dress on display"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=1",              imageAlt: "Bride in perfect wedding dress moment"
            }
          ]}
          carouselPosition="right"
        />
      </div>
      <div id="features" data-section="features" className="relative z-10">
-        <FeatureCardSixteen
+        <FeatureCardSixteen title="What Makes Irentall Different" description="At Irentall, we believe every bride deserves a personalized, stress-free experience. Here's what sets us apart." textboxLayout="default" useInvertedBackground={false} tag="Our Promise" tagIcon={Heart} tagAnimation="slide-up" negativeCard={{ items: ["Impersonal big-box store experience", "Limited dress selection", "Rushed appointments", "Generic styling advice"] }} positiveCard={{ items: ["Personalized one-on-one attention", "Curated collection of stunning gowns", "Unhurried, comfortable fittings", "Expert styling guidance"] }} animationType="slide-up" />
          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."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Promise"
          tagIcon={Heart}
          tagAnimation="slide-up"
          negativeCard={{
            items: [
              "Impersonal big-box store experience",              "Limited dress selection",              "Rushed appointments",              "Generic styling advice"
            ]
          }}
          positiveCard={{
            items: [
              "Personalized one-on-one attention",              "Curated collection of stunning gowns",              "Unhurried, comfortable fittings",              "Expert styling guidance tailored to you"
            ]
          }}
          animationType="slide-up"
        />
      </div>
      <div id="about" data-section="about" className="relative z-10">
-        <TestimonialAboutCard
+        <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. Known for her professionalism and attention to detail, Iren has helped countless couples bring their wedding visions to life." subdescription="" icon={Heart} imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg" mediaAnimation="slide-up" useInvertedBackground={true} />
          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."
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Customer Stories"
          tagIcon={Users}
          tagAnimation="slide-up"
          kpiItems={[
            { value: "50+", label: "Happy Brides" },
            { value: "5.0★", label: "Average Rating" },
            { value: "4.5+", label: "Month of Excellence" }
          ]}
          testimonials={[
            {
              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: "",              imageAlt: "Jessica Martinez - Bride with friends"
            }
          ]}
          animationType="slide-up"
        />
      </div>
      <div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
-        <div className="relative">
+        <div ref={galleryContainerRef}>
-          <ProductCardFour
+          <ProductCardFour title="Our Dress Collection" description="Handpicked dresses for every bride, every style, every story." textboxLayout="default" useInvertedBackground={false} tag="Gallery" tagIcon={Camera} tagAnimation="slide-up" gridVariant="bento-grid" animationType="slide-up" products={allDresses} />
-            title="Our Dress Collection"
+        </div>
-            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."
+        <div ref={galleryButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
-            textboxLayout="default"
+          {showGalleryViewMore && <button onClick={() => { setModalType('gallery'); setShowModal(true); }} className="inline-flex items-center gap-2 px-6 py-3 bg-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all">View More <ChevronRight className="w-5 h-5" /></button>}
            useInvertedBackground={false}
            tag="Gallery"
            tagIcon={Camera}
            tagAnimation="slide-up"
            gridVariant="bento-grid"
            animationType="slide-up"
            products={initialDresses}
          />
          {/* More Button - Positioned after gallery section */}
          <div className="relative mt-0">
            {showViewMoreButton && (
              <div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end animate-in fade-in slide-in-from-bottom-4 duration-300">
                <button
                  onClick={() => setShowModal(true)}
                  className="group relative inline-flex items-center gap-2 px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out shadow-lg"
                  aria-label="View More Dresses"
                >
                  <span className="text-sm md:text-base">More</span>
                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
                </button>
              </div>
            )}
          </div>
        </div>
        {/* 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
+        <BlogCardThree title="Behind the Beauty" description="See our latest bridal stories and inspirations." textboxLayout="default" useInvertedBackground={true} tag="Behind the Scenes" tagIcon={Play} tagAnimation="slide-up" animationType="slide-up" blogs={allReels} />
          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" ref={shoesRef}>
-        <ProductCardFour
+        <div ref={shoesContainerRef}>
-          title="Bridal Shoes"
+          <ProductCardFour title="Bridal Shoes" description="Complete your look with stunning shoes." textboxLayout="default" useInvertedBackground={true} tag="Accessory Collection" tagIcon={Sparkles} tagAnimation="slide-up" gridVariant="three-columns-all-equal-width" animationType="slide-up" products={allShoes} />
-          description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
+        </div>
-          textboxLayout="default"
+        <div ref={shoesButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
-          useInvertedBackground={true}
+          {showShoesViewMore && <button onClick={() => { setModalType('shoes'); setShowModal(true); }} className="inline-flex items-center gap-2 px-6 py-3 bg-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all">View More <ChevronRight className="w-5 h-5" /></button>}
-          tag="Accessory Collection"
+        </div>
          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">
+      <div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
-        <ProductCardFour
+        <div ref={veilsContainerRef}>
-          title="Veils & Crowns"
+          <ProductCardFour title="Veils & Crowns" description="Enhance your bridal beauty." textboxLayout="default" useInvertedBackground={false} tag="Veil Collection" tagIcon={Crown} tagAnimation="slide-up" gridVariant="three-columns-all-equal-width" animationType="slide-up" products={allVeils} />
-          description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
+        </div>
-          textboxLayout="default"
+        <div ref={veilsButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
-          useInvertedBackground={false}
+          {showVeilsViewMore && <button onClick={() => { setModalType('veils'); setShowModal(true); }} className="inline-flex items-center gap-2 px-6 py-3 bg-[#D4AF37] text-black rounded-lg font-semibold hover:shadow-lg transition-all">View More <ChevronRight className="w-5 h-5" /></button>}
-          tag="Veil Collection"
+        </div>
          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>
      <div id="contact" data-section="contact" className="relative z-10">
-        <ContactCTA
+        <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 today! Call or text (747) 800-7770." buttons={[{ text: "Call (747) 800-7770", href: "tel:747-800-7770" }, { text: "Text (747) 800-7770", href: "sms:747-800-7770" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
          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}
          buttonContainerClassName="flex flex-col-reverse sm:flex-row gap-3 justify-center"
        />
      </div>
      <div id="footer" data-section="footer" className="relative z-10">
-        <FooterSimple
+        <FooterSimple columns={[]} bottomLeftText="© 2024 Irentall Bridal Boutique." bottomRightText="3106 Los Feliz Blvd, Los Angeles, CA 90039" />
          columns={[
            {
              title: "Irentall",              items: [
                { label: "Home", href: "#home" },
                { label: "About", href: "#about" },
                { label: "Gallery", href: "#gallery" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Bridal Gowns", href: "#gallery" },
                { label: "Dress Fittings", href: "#appointment" },
                { label: "Personal Styling", href: "#appointment" },
                { label: "Consultations", href: "#appointment" }
              ]
            },
            {
              title: "Accessories",              items: [
                { label: "Shoes", href: "#shoes" },
                { label: "Veils & Headpieces", href: "#veils" },
                { label: "Complete Looks", href: "#appointment" }
              ]
            },
            {
              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" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Irentall Bridal Boutique. All rights reserved."
          bottomRightText="3106 Los Feliz Blvd, Los Angeles, CA 90039 | (747) 800-7770"
        />
      </div>
      {renderModal()}
    </ThemeProvider>
  );
 }
Author	SHA1	Message	Date
bender	f09797c81f	Update src/app/page.tsx	2026-04-27 01:32:10 +00:00
bender	df897af0cb	Update src/app/page.tsx	2026-04-27 01:27:33 +00:00
bender	6645a29157	Merge version_46 into main Merge version_46 into main	2026-04-27 01:26:19 +00:00
bender	a1db576e69	Update src/app/page.tsx	2026-04-27 01:26:16 +00:00
bender	0c3889534c	Merge version_46 into main Merge version_46 into main	2026-04-27 01:25:41 +00:00
bender	16ff4ba558	Update src/app/page.tsx	2026-04-27 01:25:38 +00:00
bender	c4cf684ec2	Update src/app/page.tsx	2026-04-27 01:25:17 +00:00
bender	6a3320444a	Update src/app/page.tsx	2026-04-27 01:23:07 +00:00
bender	c7759c2bb5	Merge version_45 into main Merge version_45 into main	2026-04-27 01:21:30 +00:00
bender	e329f755a6	Update src/app/page.tsx	2026-04-27 01:21:27 +00:00
bender	de15dcefc2	Merge version_44 into main Merge version_44 into main	2026-04-27 01:20:52 +00:00
bender	9c6bdd8c45	Update src/app/page.tsx	2026-04-27 01:20:49 +00:00
bender	644f78d536	Merge version_44 into main Merge version_44 into main	2026-04-27 01:20:19 +00:00
bender	bca2c66751	Update src/app/page.tsx	2026-04-27 01:20:13 +00:00
bender	d4f2914ac8	Merge version_44 into main Merge version_44 into main	2026-04-27 01:19:46 +00:00
bender	15c55dc458	Update src/app/page.tsx	2026-04-27 01:19:43 +00:00
bender	1c171ed1b1	Merge version_44 into main Merge version_44 into main	2026-04-27 01:19:17 +00:00
bender	dc7adc5c98	Update src/app/page.tsx	2026-04-27 01:19:14 +00:00
bender	c147799589	Merge version_44 into main Merge version_44 into main	2026-04-27 01:18:47 +00:00
bender	76d9e12897	Update src/app/page.tsx	2026-04-27 01:18:41 +00:00
bender	feb138eedc	Merge version_44 into main Merge version_44 into main	2026-04-27 01:18:15 +00:00
bender	28241e5df1	Update src/app/page.tsx	2026-04-27 01:18:11 +00:00
bender	a1937549ed	Merge version_41 into main Merge version_41 into main	2026-04-27 01:14:53 +00:00
bender	fdf4547d57	Update src/app/page.tsx	2026-04-27 01:14:50 +00:00
bender	8b30b26c01	Switch to version 41: modified src/app/page.tsx	2026-04-27 01:14:23 +00:00
bender	5b1f2eae47	Switch to version 42: modified src/app/page.tsx	2026-04-27 01:14:10 +00:00
bender	e390ee971e	Switch to version 42: modified src/app/layout.tsx	2026-04-27 01:14:09 +00:00
bender	eb04b57a29	Merge version_43 into main Merge version_43 into main	2026-04-27 01:13:15 +00:00
bender	df02d9f8c7	Update src/app/page.tsx	2026-04-27 01:13:12 +00:00
bender	bb6f9c0657	Merge version_43 into main Merge version_43 into main	2026-04-27 01:12:47 +00:00
bender	15f3759b8d	Update src/app/page.tsx	2026-04-27 01:12:44 +00:00
bender	1120992fc1	Update src/app/layout.tsx	2026-04-27 01:12:44 +00:00
bender	d8fc391dd1	Merge version_43 into main Merge version_43 into main	2026-04-27 01:12:21 +00:00
bender	33222485f9	Update src/app/page.tsx	2026-04-27 01:12:15 +00:00
bender	175337d9fe	Switch to version 41: modified src/app/page.tsx	2026-04-27 00:47:23 +00:00
bender	db72fecd40	Merge version_42 into main Merge version_42 into main	2026-04-27 00:42:32 +00:00
bender	8039db447b	Update src/app/page.tsx	2026-04-27 00:42:28 +00:00
bender	ae0bdfce63	Merge version_42 into main Merge version_42 into main	2026-04-27 00:42:06 +00:00
bender	db6c589753	Update src/app/page.tsx	2026-04-27 00:42:02 +00:00
bender	f413388ce2	Merge version_41 into main Merge version_41 into main	2026-04-27 00:40:19 +00:00
bender	a5e06e87b9	Update src/app/page.tsx	2026-04-27 00:40:16 +00:00
bender	c9abf24b7b	Merge version_41 into main Merge version_41 into main	2026-04-27 00:36:29 +00:00
bender	f3be5a11fe	Remove watermark	2026-04-27 00:36:26 +00:00
bender	7068ae76b5	Merge version_41 into main Merge version_41 into main	2026-03-21 23:23:54 +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