Merge version_47 into main

Merge version_47 into main

src/app/page.tsx

@@ -8,148 +8,150 @@ 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, User, ChevronRight, Instagram, Phone, 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 [showGalleryViewMore, setShowGalleryViewMore] = useState(false);
+  const [showShoesViewMore, setShowShoesViewMore] = useState(false);
+  const [showVeilsViewMore, setShowVeilsViewMore] = useState(false);
+  const [modalType, setModalType] = useState<'gallery' | 'shoes' | 'veils' | null>(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 (galleryButtonContainerRef.current) {
-        const rect = galleryButtonContainerRef.current.getBoundingClientRect();
-        setShowGalleryViewMore(rect.top < window.innerHeight && rect.bottom > 0);
+      if (!ticking && !showModal) {
+        window.requestAnimationFrame(() => {
+          if (galleryButtonContainerRef.current) {
+            const rect = galleryButtonContainerRef.current.getBoundingClientRect();
+            setShowGalleryViewMore(rect.top < window.innerHeight && rect.bottom > 0);
+          }
+          if (shoesButtonContainerRef.current) {
+            const rect = shoesButtonContainerRef.current.getBoundingClientRect();
+            setShowShoesViewMore(rect.top < window.innerHeight && rect.bottom > 0);
+          }
+          if (veilsButtonContainerRef.current) {
+            const rect = veilsButtonContainerRef.current.getBoundingClientRect();
+            setShowVeilsViewMore(rect.top < window.innerHeight && rect.bottom > 0);
+          }
+          ticking = false;
+        });
+        ticking = true;
       }
     };
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  }, [showModal]);
 
   useEffect(() => {
     document.body.style.overflow = showModal ? 'hidden' : 'unset';
     return () => { document.body.style.overflow = 'unset'; };
   }, [showModal]);
 
-  const allDresses = [{id: "d1", name: "Classic Elegance", price: "$1,200", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg"}];
-  const allShoes = [{id: "s1", name: "Classic Heels", price: "$250", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg"}];
-  const allVeils = [{id: "v1", name: "Cathedral Veil", price: "$180", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg"}];
+  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>
+    );
+  };
 
   return (
     <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="small" sizing="medium" background="grid" cardStyle="inset" primaryButtonStyle="radial-glow" secondaryButtonStyle="glass" headingFontWeight="light">
       <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">
-        <a href="#"><Instagram className="w-6 h-6" /></a>
+        <a href="https://instagram.com/irentall.usa" target="_blank" rel="noopener noreferrer"><Instagram className="w-6 h-6" /></a>
         <a href="tel:747-800-7770"><Phone className="w-6 h-6" /></a>
-        <a href="#"><MapPin className="w-6 h-6" /></a>
+        <a href="https://www.google.com/maps/search/Irentall" target="_blank" rel="noopener noreferrer"><MapPin className="w-6 h-6" /></a>
       </div>
 
-      <div id="hero" data-section="hero" className="mt-16">
-        <HeroSplitDoubleCarousel
-          title="Find Your Perfect Wedding Dress in Los Angeles"
-          description="Personalized bridal styling with a curated collection of stunning gowns."
-          background={{ variant: "plain" }}
-          tag="5.0 ★ Loved by Local Brides"
-          tagIcon={Star}
-          buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]}
-          leftCarouselItems={[]}
-          rightCarouselItems={[]}
-        />
+      <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." 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" />
       </div>
 
-      <div id="features" data-section="features">
-        <FeatureCardSixteen
-          title="What Makes Irentall Different"
-          description="At Irentall, we believe every bride deserves a personalized experience."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          negativeCard={{ items: ["Impersonal experience", "Limited selection"] }}
-          positiveCard={{ items: ["Personalized attention", "Curated collection"] }}
-          animationType="slide-up"
-        />
+      <div id="features" data-section="features" className="relative z-10">
+        <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" />
       </div>
 
-      <div id="about" data-section="about">
-        <TestimonialAboutCard
-          tag="Meet Our Founder"
-          tagIcon={User}
-          title="Iren Ulikhanova"
-          description="Iren is an accomplished professional in the bridal industry, combining vision with elegance."
-          subdescription="Bridal expert in LA."
-          icon={Heart}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773894327718-8nx4sc9p.jpg"
-          useInvertedBackground={true}
-        />
+      <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. 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} />
       </div>
 
-      <div id="gallery" data-section="gallery">
-        <ProductCardFour
-          title="Our Dress Collection"
-          description="Handpicked dresses for every bride."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={allDresses}
-        />
-        <div ref={galleryButtonContainerRef} className="flex justify-end p-8">
-          {showGalleryViewMore && <button onClick={() => setShowModal(true)} className="flex items-center gap-2 bg-[#D4AF37] text-black px-6 py-3 rounded-lg">View More <ChevronRight /></button>}
+      <div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
+        <div ref={galleryContainerRef}>
+          <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} />
+        </div>
+        <div ref={galleryButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
+          {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>}
         </div>
       </div>
 
-      <div id="reels" data-section="reels">
-        <BlogCardThree
-          title="Behind the Beauty"
-          description="See our latest collections in motion."
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          blogs={[]}
-        />
+      <div id="reels" data-section="reels" className="relative z-10">
+        <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} />
       </div>
 
-      <div id="shoes" data-section="shoes">
-        <ProductCardFour
-          title="Bridal Shoes"
-          description="Complete your look with comfort and elegance."
-          textboxLayout="default"
-          useInvertedBackground={true}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={allShoes}
-        />
+      <div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
+        <div ref={shoesContainerRef}>
+          <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} />
+        </div>
+        <div ref={shoesButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
+          {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>}
+        </div>
       </div>
 
-      <div id="veils" data-section="veils">
-        <ProductCardFour
-          title="Veils & Crowns"
-          description="Exquisite headpieces."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={allVeils}
-        />
+      <div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
+        <div ref={veilsContainerRef}>
+          <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} />
+        </div>
+        <div ref={veilsButtonContainerRef} className="flex justify-end px-8 pt-8 pb-4">
+          {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>}
+        </div>
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Get in Touch"
-          title="Ready to Find Your Dream Dress?"
-          description="Book your free 30-minute session today."
-          buttons={[{ text: "Call (747) 800-7770", href: "tel:747-800-7770" }]}
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-        />
+      <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 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} />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-          bottomLeftText="© 2024 Irentall"
-          bottomRightText="All rights reserved"
-        />
+      <div id="footer" data-section="footer" className="relative z-10">
+        <FooterSimple columns={[]} bottomLeftText="© 2024 Irentall Bridal Boutique." bottomRightText="3106 Los Feliz Blvd, Los Angeles, CA 90039" />
       </div>
+
+      {renderModal()}
     </ThemeProvider>
   );
 }