|
|
|
|
@@ -1,313 +1,151 @@
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
|
|
|
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
|
|
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
|
|
|
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 { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle } from "lucide-react";
|
|
|
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
|
|
|
import { Star, Heart, Camera, Sparkles, Crown, Phone, User, 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 (!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="small"
|
|
|
|
|
sizing="medium"
|
|
|
|
|
background="grid"
|
|
|
|
|
cardStyle="inset"
|
|
|
|
|
primaryButtonStyle="radial-glow"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="light"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleCentered
|
|
|
|
|
brandName="Irentall"
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Home", id: "home" },
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Gallery", id: "gallery" },
|
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
button={{
|
|
|
|
|
text: "Call Now", href: "tel:(747)800-7770"
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<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">
|
|
|
|
|
<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" }}
|
|
|
|
|
tag="5.0 ★ Loved by Local Brides"
|
|
|
|
|
tagIcon={Star}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Call Now", href: "tel:(747)800-7770" }
|
|
|
|
|
]}
|
|
|
|
|
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 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="about" data-section="about">
|
|
|
|
|
<InlineImageSplitTextAbout
|
|
|
|
|
heading={[
|
|
|
|
|
{ type: "text", content: "Why Irentall Stands Out" }
|
|
|
|
|
]}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Schedule Consultation", href: "#appointment" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
<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="features" data-section="features">
|
|
|
|
|
<FeatureCardSixteen
|
|
|
|
|
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 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="testimonials" data-section="testimonials">
|
|
|
|
|
<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: "Sarah Johnson", role: "Bride", company: "Irentall Boutique", rating: 5,
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-posing-medium-shot_23-2149860841.jpg?_wi=2", imageAlt: "Sarah Johnson - Happy bride"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Jessica Martinez", role: "Bride", company: "Irentall Boutique", rating: 5,
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_wi=2", imageAlt: "Jessica Martinez - Bride with friends"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Emily Chen", role: "Bride", company: "Irentall Boutique", rating: 5,
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/reflection-senior-mother-mature-daughter-mirror-home_23-2148202921.jpg", imageAlt: "Emily Chen - Bride in mirror"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", name: "Michelle Rodriguez", role: "Bride", company: "Irentall Boutique", rating: 5,
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2", imageAlt: "Michelle Rodriguez - Happy bride moment"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
/>
|
|
|
|
|
<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="gallery" data-section="gallery">
|
|
|
|
|
<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={[
|
|
|
|
|
{
|
|
|
|
|
id: "dress-1", name: "Classic Elegance", price: "Starting at $1,200", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2", imageAlt: "Elegant white wedding dress"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "dress-2", name: "Blush Romance", price: "Starting at $1,400", variant: "Blush Pink", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bridal-dress-hanger_23-2149640924.jpg?_wi=1", imageAlt: "Beautiful blush pink wedding gown"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "dress-3", name: "Modern Sophistication", price: "Starting at $1,300", variant: "Off-White", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-wedding-clothes-collection_1236-88.jpg", imageAlt: "Modern off-shoulder wedding dress"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "dress-4", name: "Intricate Lace", price: "Starting at $1,500", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/morning-bride-when-she-wears-beautiful-dress_1328-2238.jpg?_wi=1", imageAlt: "Detailed lace wedding dress"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "dress-5", name: "Minimalist Chic", price: "Starting at $1,100", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-bride-indoors_23-2149640909.jpg?_wi=1", imageAlt: "Sleek minimalist wedding dress"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "dress-6", name: "Royal Drama", price: "Starting at $1,600", variant: "White", imageSrc: "http://img.b2bpic.net/free-photo/bride-playing-with-her-skirt_1157-725.jpg?_wi=1", imageAlt: "Dramatic train wedding dress"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<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="shoes" data-section="shoes">
|
|
|
|
|
<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"
|
|
|
|
|
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 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="veils" data-section="veils">
|
|
|
|
|
<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={[
|
|
|
|
|
{
|
|
|
|
|
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 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
|
|
|
|
|
tag="Get in Touch"
|
|
|
|
|
tagIcon={Phone}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
title="Ready to Find Your Dream Dress?"
|
|
|
|
|
description="Call or text us at 747-800-7770 to schedule your personal styling appointment. Our team is here to make your bridal journey unforgettable."
|
|
|
|
|
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}
|
|
|
|
|
/>
|
|
|
|
|
<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">
|
|
|
|
|
<FooterSimple
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
title: "Irentall", items: [
|
|
|
|
|
{ label: "Home", href: "#home" },
|
|
|
|
|
{ label: "About Us", 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>
|
|
|
|
|
);
|
|
|
|
|
}
|
