Compare commits

..

32 Commits

Author SHA1 Message Date
e329f755a6 Update src/app/page.tsx 2026-04-27 01:21:27 +00:00
de15dcefc2 Merge version_44 into main
Merge version_44 into main
2026-04-27 01:20:52 +00:00
9c6bdd8c45 Update src/app/page.tsx 2026-04-27 01:20:49 +00:00
644f78d536 Merge version_44 into main
Merge version_44 into main
2026-04-27 01:20:19 +00:00
bca2c66751 Update src/app/page.tsx 2026-04-27 01:20:13 +00:00
d4f2914ac8 Merge version_44 into main
Merge version_44 into main
2026-04-27 01:19:46 +00:00
15c55dc458 Update src/app/page.tsx 2026-04-27 01:19:43 +00:00
1c171ed1b1 Merge version_44 into main
Merge version_44 into main
2026-04-27 01:19:17 +00:00
dc7adc5c98 Update src/app/page.tsx 2026-04-27 01:19:14 +00:00
c147799589 Merge version_44 into main
Merge version_44 into main
2026-04-27 01:18:47 +00:00
76d9e12897 Update src/app/page.tsx 2026-04-27 01:18:41 +00:00
feb138eedc Merge version_44 into main
Merge version_44 into main
2026-04-27 01:18:15 +00:00
28241e5df1 Update src/app/page.tsx 2026-04-27 01:18:11 +00:00
a1937549ed Merge version_41 into main
Merge version_41 into main
2026-04-27 01:14:53 +00:00
8b30b26c01 Switch to version 41: modified src/app/page.tsx 2026-04-27 01:14:23 +00:00
5b1f2eae47 Switch to version 42: modified src/app/page.tsx 2026-04-27 01:14:10 +00:00
e390ee971e Switch to version 42: modified src/app/layout.tsx 2026-04-27 01:14:09 +00:00
eb04b57a29 Merge version_43 into main
Merge version_43 into main
2026-04-27 01:13:15 +00:00
df02d9f8c7 Update src/app/page.tsx 2026-04-27 01:13:12 +00:00
bb6f9c0657 Merge version_43 into main
Merge version_43 into main
2026-04-27 01:12:47 +00:00
15f3759b8d Update src/app/page.tsx 2026-04-27 01:12:44 +00:00
1120992fc1 Update src/app/layout.tsx 2026-04-27 01:12:44 +00:00
d8fc391dd1 Merge version_43 into main
Merge version_43 into main
2026-04-27 01:12:21 +00:00
33222485f9 Update src/app/page.tsx 2026-04-27 01:12:15 +00:00
175337d9fe Switch to version 41: modified src/app/page.tsx 2026-04-27 00:47:23 +00:00
db72fecd40 Merge version_42 into main
Merge version_42 into main
2026-04-27 00:42:32 +00:00
8039db447b Update src/app/page.tsx 2026-04-27 00:42:28 +00:00
ae0bdfce63 Merge version_42 into main
Merge version_42 into main
2026-04-27 00:42:06 +00:00
db6c589753 Update src/app/page.tsx 2026-04-27 00:42:02 +00:00
f413388ce2 Merge version_41 into main
Merge version_41 into main
2026-04-27 00:40:19 +00:00
c9abf24b7b Merge version_41 into main
Merge version_41 into main
2026-04-27 00:36:29 +00:00
7068ae76b5 Merge version_41 into main
Merge version_41 into main
2026-03-21 23:23:54 +00:00

View File

@@ -3,800 +3,140 @@
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, User, ChevronRight, Instagram, Phone, 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 [showShoesViewMore, setShowShoesViewMore] = useState(false);
const [showVeilsViewMore, setShowVeilsViewMore] = useState(false);
const [modalType, setModalType] = useState<'gallery' | 'shoes' | 'veils' | null>(null);
const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
const [lastScrollY, setLastScrollY] = useState(0);
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(() => {
const currentScrollY = window.scrollY;
setShowBackToTop(currentScrollY > 300);
// Determine scroll direction
if (currentScrollY > lastScrollY) {
setScrollDirection('down');
} else {
setScrollDirection('up');
}
// Check gallery section - show View More when visible
if (galleryContainerRef.current && galleryButtonContainerRef.current) {
const rect = galleryButtonContainerRef.current.getBoundingClientRect();
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
setShowGalleryViewMore(isInViewport);
}
// Check shoes section - show View More when visible
if (shoesContainerRef.current && shoesButtonContainerRef.current) {
const rect = shoesButtonContainerRef.current.getBoundingClientRect();
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
setShowShoesViewMore(isInViewport);
}
// Check veils section - show View More when visible
if (veilsContainerRef.current && veilsButtonContainerRef.current) {
const rect = veilsButtonContainerRef.current.getBoundingClientRect();
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
setShowVeilsViewMore(isInViewport);
}
setLastScrollY(currentScrollY);
ticking = false;
});
ticking = true;
if (galleryButtonContainerRef.current) {
const rect = galleryButtonContainerRef.current.getBoundingClientRect();
setShowGalleryViewMore(rect.top < window.innerHeight && rect.bottom > 0);
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [lastScrollY, showModal]);
}, []);
useEffect(() => {
if (showModal) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
document.body.style.overflow = showModal ? 'hidden' : 'unset';
return () => { document.body.style.overflow = 'unset'; };
}, [showModal]);
const scrollToGallery = () => {
const gallerySectionElement = document.getElementById('gallery');
if (gallerySectionElement) {
gallerySectionElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
};
const scrollToShoes = () => {
const shoesSectionElement = document.getElementById('shoes');
if (shoesSectionElement) {
shoesSectionElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
};
const scrollToVeils = () => {
const veilsSectionElement = document.getElementById('veils');
if (veilsSectionElement) {
veilsSectionElement.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 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"
},
{
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"
},
{
id: "shoe-7", name: "Elegant Crystal Heels", price: "Starting at $310", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=3", imageAlt: "Elegant crystal white heels"
},
{
id: "shoe-8", name: "Champagne Satin Pumps", price: "Starting at $275", variant: "Champagne", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=3", imageAlt: "Champagne satin pump heels"
},
{
id: "shoe-9", name: "Ivory Lace Flats", price: "Starting at $240", variant: "Ivory", imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=3", imageAlt: "Ivory lace flat bridal shoes"
},
{
id: "shoe-10", name: "Pearl White Heels", price: "Starting at $295", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=3", imageAlt: "Pearl white bridal heels"
},
{
id: "shoe-11", name: "Silver Strappy Heels", price: "Starting at $265", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=3", imageAlt: "Silver strappy bridal heels"
},
{
id: "shoe-12", name: "Gold Accent Pumps", price: "Starting at $330", variant: "Gold", imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=3", imageAlt: "Gold accent wedding 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"
},
{
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"
},
{
id: "veil-7", name: "Tulle and Lace Veil", price: "Starting at $210", variant: "Ivory", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-herself_1157-187.jpg?_wi=3", imageAlt: "Tulle and lace combination veil"
},
{
id: "veil-8", name: "Romantic Cascading Veil", price: "Starting at $240", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-two-shirts_23-2147601332.jpg?_wi=3", imageAlt: "Romantic cascading bridal veil"
},
{
id: "veil-9", name: "Minimalist Tulle Veil", price: "Starting at $160", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2", imageAlt: "Minimalist white tulle veil"
},
{
id: "veil-10", name: "Beaded Edge Veil", price: "Starting at $280", variant: "Champagne", imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=2", imageAlt: "Beaded edge champagne veil"
},
{
id: "veil-11", name: "Classic Elbow Veil", price: "Starting at $140", variant: "Ivory", imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2", imageAlt: "Classic ivory elbow length veil"
},
{
id: "veil-12", name: "Dramatic Train Veil", price: "Starting at $310", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2", imageAlt: "Dramatic white train veil"
}
];
const initialDresses = allDresses.slice(0, 6);
const initialShoes = allShoes.slice(0, 3);
const initialVeils = allVeils.slice(0, 3);
const renderModal = () => {
if (!showModal || !modalType) return null;
let items = [];
let title = '';
if (modalType === 'gallery') {
items = allDresses;
title = 'Complete Dress Gallery';
} else if (modalType === 'shoes') {
items = allShoes;
title = 'Complete Bridal Shoes Collection';
} else if (modalType === 'veils') {
items = allVeils;
title = 'Complete Veils & Crowns Collection';
}
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">
{/* 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)]">{title}</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">
{items.map((item) => (
<div
key={item.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={item.imageSrc}
alt={item.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">
{item.name}
</h3>
<p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
{item.variant}
</p>
<p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
{item.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>
);
};
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"}];
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"
>
{/* 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 Top Social & Contact Bar */}
<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">
{/* Instagram */}
<a
href="https://instagram.com/irentall.usa"
target="_blank"
rel="noopener noreferrer"
className="hover:scale-110 transition-transform duration-300 ease-out"
aria-label="Follow us on Instagram"
title="Follow us on Instagram @irentall.usa"
>
<Instagram className="w-6 h-6" />
</a>
{/* Phone */}
<a
href="tel:747-800-7770"
className="hover:scale-110 transition-transform duration-300 ease-out"
aria-label="Call us"
title="Call (747) 800-7770"
>
<Phone className="w-6 h-6" />
</a>
{/* Google Maps */}
<a
href="https://www.google.com/maps/search/Irentall"
target="_blank"
rel="noopener noreferrer"
className="hover:scale-110 transition-transform duration-300 ease-out"
aria-label="Search Irentall on Google Maps"
title="Search Irentall on Google Maps"
>
<MapPin className="w-6 h-6" />
</a>
<a href="#"><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>
</div>
<div id="hero" data-section="hero" className="relative z-10 mt-16">
<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. Our expert team will guide you through every moment of your journey to find the dress of your dreams."
description="Personalized bridal styling with a curated collection of stunning gowns."
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"
},
{
videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947877000-kdhrbcou.mp4", 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"
buttons={[{ text: "Call Now", href: "tel:747-800-7770" }]}
leftCarouselItems={[]}
rightCarouselItems={[]}
/>
</div>
<div id="features" data-section="features" className="relative z-10">
<div id="features" data-section="features">
<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 from other boutiques."
description="At Irentall, we believe every bride deserves a personalized experience."
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"
]
}}
negativeCard={{ items: ["Impersonal experience", "Limited selection"] }}
positiveCard={{ items: ["Personalized attention", "Curated collection"] }}
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. 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."
<div id="gallery" data-section="gallery">
<ProductCardFour
title="Our Dress Collection"
description="Handpicked dresses for every bride."
textboxLayout="default"
useInvertedBackground={false}
tag="Customer Stories"
tagIcon={Users}
tagAnimation="slide-up"
kpiItems={[
{ value: "120+", label: "Happy Brides" },
{ value: "5.0★", label: "Average Rating" },
{ value: "6+", 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"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={allDresses}
/>
</div>
<div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
<div className="relative" ref={galleryContainerRef}>
<ProductCardFour
title="Our Dress Collection"
description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism. Some of these dresses are exquisitely and elegantly sewed and crafted by MARAL."
textboxLayout="default"
useInvertedBackground={false}
tag="Gallery"
tagIcon={Camera}
tagAnimation="slide-up"
gridVariant="bento-grid"
animationType="slide-up"
products={initialDresses.map((dress, index) => ({
...dress,
_key: `gallery-${index}`
}))}
/>
</div>
{/* View More Button - Positioned at bottom right of gallery section */}
<div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
{showGalleryViewMore && (
<button
onClick={() => {
setModalType('gallery');
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 animate-in fade-in slide-in-from-bottom-4 duration-300"
aria-label="View More Dresses"
>
<span className="text-sm md:text-base">View More</span>
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
</button>
)}
<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>
</div>
<div id="reels" data-section="reels" className="relative z-10">
<div id="reels" data-section="reels">
<BlogCardThree
title="Behind the Beauty"
description=""
description="See our latest collections in motion."
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"
blogs={[]}
/>
</div>
<div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
<div className="relative" ref={shoesContainerRef}>
<ProductCardFour
title="Bridal Shoes"
description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
textboxLayout="default"
useInvertedBackground={true}
tag="Accessory Collection"
tagIcon={Sparkles}
tagAnimation="slide-up"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
buttons={[
{ text: "Explore All Shoes", onClick: scrollToShoes }
]}
products={initialShoes.map((shoe, index) => ({
...shoe,
_key: `shoes-${index}`
}))}
/>
</div>
{/* View More Button for Shoes - Positioned at bottom right of shoes section */}
<div ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
{showShoesViewMore && (
<button
onClick={() => {
setModalType('shoes');
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 animate-in fade-in slide-in-from-bottom-4 duration-300"
aria-label="View More Shoes"
>
<span className="text-sm md:text-base">View More</span>
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
</button>
)}
</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>
<div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
<div className="relative" ref={veilsContainerRef}>
<ProductCardFour
title="Veils & Crowns"
description="Enhance your bridal beauty with our exquisite collection of veils and headpieces. Each piece is carefully selected to complement your gown perfectly."
textboxLayout="default"
useInvertedBackground={false}
tag="Veil Collection"
tagIcon={Crown}
tagAnimation="slide-up"
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={initialVeils.map((veil, index) => ({
...veil,
_key: `veils-${index}`
}))}
/>
</div>
{/* View More Button for Veils - Positioned at bottom right of veils section */}
<div ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
{showVeilsViewMore && (
<button
onClick={() => {
setModalType('veils');
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 animate-in fade-in slide-in-from-bottom-4 duration-300"
aria-label="View More Veils"
>
<span className="text-sm md:text-base">View More</span>
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
</button>
)}
</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>
<div id="contact" data-section="contact" className="relative z-10">
<div id="contact" data-section="contact">
<ContactCTA
tag="Get in Touch"
tagIcon={Phone}
tagAnimation="slide-up"
title="Ready to Find Your Dream Dress?"
description="Book your free 30-minute styling session with limited availability! Our bridal experts will work with you one-on-one to find the perfect gown. Call or text (747) 800-7770 to secure your appointment today."
buttons={[
{ text: "Call (747) 800-7770", href: "tel:747-800-7770" },
{ text: "Text (747) 800-7770", href: "sms:747-800-7770" }
]}
buttonAnimation="slide-up"
description="Book your free 30-minute session today."
buttons={[{ text: "Call (747) 800-7770", href: "tel:747-800-7770" }]}
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">
<div id="footer" data-section="footer">
<FooterSimple
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"
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
bottomLeftText="© 2024 Irentall"
bottomRightText="All rights reserved"
/>
</div>
{/* Universal Modal */}
{renderModal()}
</ThemeProvider>
);
}