diff --git a/src/app/page.tsx b/src/app/page.tsx index 85a2d52..df1df7d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,148 +8,149 @@ 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(null); + const shoesRef = useRef(null); + const veilsRef = useRef(null); + const galleryContainerRef = useRef(null); + const shoesContainerRef = useRef(null); + const veilsContainerRef = useRef(null); const galleryButtonContainerRef = useRef(null); + const shoesButtonContainerRef = useRef(null); + const veilsButtonContainerRef = useRef(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 renderModal = () => { + if (!showModal || !modalType) return null; + const items = modalType === 'gallery' ? allDresses : modalType === 'shoes' ? allShoes : allVeils; + return ( +
+
+
+

Collection

+ +
+
+
+ {items.map((item) => ( +
+ {item.imageAlt} +
+

{item.name}

+

{item.variant}

+

{item.price}

+
+
+ ))} +
+
+
+
+ ); + }; return (
- + - +
-
- +
+ ({ 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" />
-
- +
+
-
- +
+
-