Update src/app/page.tsx

Merge version_41 into main

src/app/layout.tsx

@@ -9,8 +9,8 @@ import { Lato } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Irentall - Bridal Styling Los Angeles',
-  description: 'Find your perfect wedding dress in Los Angeles with our personalized bridal styling services.',
+  title: 'Irentall Bridal Boutique | Wedding Dresses Los Angeles',
+  description: 'Find your perfect wedding dress at Irentall, a luxury bridal boutique in Los Feliz, Los Angeles. Personalized styling, curated gowns, and 5-star service.',
 };
 
 const lato = Lato({

src/app/page.tsx

@@ -5,48 +5,152 @@ import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleC
 import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
 import ProductCardFour from "@/components/sections/product/ProductCardFour";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import { Instagram, Phone, MapPin } from "lucide-react";
-import { useState, useRef } from "react";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
+import BlogCardThree from "@/components/sections/blog/BlogCardThree";
+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 allDresses = Array.from({ length: 6 }, (_, i) => ({ id: `dress-${i + 1}`, name: "Wedding Dress", price: "$1,200+", variant: "White", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773897612811-03t85tl3.jpg", imageAlt: "Wedding gown" }));
+  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 (!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: "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 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="medium" sizing="medium" background="grid" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
-      <div id="nav" data-section="nav" className="fixed top-0 left-0 w-full z-50 bg-[var(--background)]/90 backdrop-blur-md flex flex-col items-center py-2 gap-2 border-b border-[var(--accent)]/20">
-        <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1777252323498-sec9a8v5.png" alt="Logo" className="h-12 w-auto object-contain" />
-        <div className="flex items-center gap-6">
-          <a href="https://instagram.com/irentall.usa" target="_blank" rel="noopener noreferrer" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><Instagram className="w-5 h-5" /></a>
-          <a href="tel:747-800-7770" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><Phone className="w-5 h-5" /></a>
-          <a href="https://www.google.com/maps/search/Irentall" target="_blank" rel="noopener noreferrer" className="text-[var(--foreground)] hover:text-[var(--primary-cta)]"><MapPin className="w-5 h-5" /></a>
+    <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="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="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="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" 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" 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" 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="hero" data-section="hero" className="pt-32">
-        <HeroSplitDoubleCarousel title="Find Your Perfect Wedding Dress in Los Angeles" description="Personalized bridal styling with a curated collection of stunning gowns." background={{ variant: "plain" }} leftCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg" }]} rightCarouselItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg" }]} />
+      <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="Featured Content" tagIcon={Play} tagAnimation="slide-up" animationType="slide-up" blogs={[]} />
       </div>
 
-      <div id="features" data-section="features">
-        <FeatureCardSixteen title="What Makes Us Different" description="Personalized service for your big day." negativeCard={{ items: ["Impersonal shopping"] }} positiveCard={{ items: ["One-on-one attention"] }} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+      <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="about" data-section="about">
-        <InlineImageSplitTextAbout heading={[{ type: 'text', content: "Iren Ulikhanova" }]} useInvertedBackground={false} />
+      <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="gallery" data-section="gallery">
-        <ProductCardFour title="Our Collection" description="Explore our latest gowns." textboxLayout="default" useInvertedBackground={false} gridVariant="bento-grid" animationType="slide-up" products={allDresses} />
+      <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="contact" data-section="contact">
-        <ContactCTA background={{ variant: "plain" }} useInvertedBackground={false} tag="Contact" title="Book Your Appointment" description="Call 747-800-7770 to get started." buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]} />
+      <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>
 
-      <div id="footer" data-section="footer">
-        <FooterBaseCard logoText="Irentall" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} copyrightText="© 2024 Irentall." />
-      </div>
+      {renderModal()}
     </ThemeProvider>
   );
 }