Compare commits

..

114 Commits

Author SHA1 Message Date
8039db447b Update src/app/page.tsx 2026-04-27 00:42:28 +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
a5e06e87b9 Update src/app/page.tsx 2026-04-27 00:40:16 +00:00
c9abf24b7b Merge version_41 into main
Merge version_41 into main
2026-04-27 00:36:29 +00:00
f3be5a11fe Remove watermark 2026-04-27 00:36:26 +00:00
7068ae76b5 Merge version_41 into main
Merge version_41 into main
2026-03-21 23:23:54 +00:00
e2506c3a66 Update src/app/page.tsx 2026-03-21 23:23:50 +00:00
b260ab6f15 Merge version_40 into main
Merge version_40 into main
2026-03-21 23:16:27 +00:00
a5c834f9fc Update src/app/page.tsx 2026-03-21 23:16:17 +00:00
1aa9788a4a Update src/app/page.tsx 2026-03-21 23:11:27 +00:00
150f2b254c Merge version_38 into main
Merge version_38 into main
2026-03-21 23:10:39 +00:00
3aa7e33948 Update src/app/page.tsx 2026-03-21 23:10:35 +00:00
340716fe3e Merge version_37 into main
Merge version_37 into main
2026-03-21 23:07:29 +00:00
537601ee19 Update src/app/page.tsx 2026-03-21 23:07:25 +00:00
9c23776465 Merge version_36 into main
Merge version_36 into main
2026-03-21 23:04:00 +00:00
d68a1badc9 Update src/app/page.tsx 2026-03-21 23:03:56 +00:00
5854c172f5 Merge version_35 into main
Merge version_35 into main
2026-03-21 22:59:19 +00:00
19f25d0b8f Update src/app/page.tsx 2026-03-21 22:59:15 +00:00
65db121ec6 Merge version_34 into main
Merge version_34 into main
2026-03-21 22:56:54 +00:00
290ecbdf18 Update src/app/page.tsx 2026-03-21 22:56:50 +00:00
cf284f4bc6 Merge version_33 into main
Merge version_33 into main
2026-03-21 22:52:01 +00:00
e812a41272 Update src/app/page.tsx 2026-03-21 22:51:57 +00:00
6ec05e6497 Merge version_32 into main
Merge version_32 into main
2026-03-21 22:46:18 +00:00
0847c98641 Update src/app/page.tsx 2026-03-21 22:46:14 +00:00
574e17251e Merge version_31 into main
Merge version_31 into main
2026-03-21 22:34:46 +00:00
82edf03cf2 Update src/app/page.tsx 2026-03-21 22:34:42 +00:00
7569facec5 Merge version_30 into main
Merge version_30 into main
2026-03-21 22:30:41 +00:00
daab93c9f3 Update src/app/page.tsx 2026-03-21 22:30:37 +00:00
a2228ca537 Merge version_29 into main
Merge version_29 into main
2026-03-21 22:24:31 +00:00
68094e5592 Add src/hooks/useScrollDetection.ts 2026-03-21 22:24:27 +00:00
6dd47629e6 Update src/app/page.tsx 2026-03-21 22:24:27 +00:00
ab485b0d30 Merge version_28 into main
Merge version_28 into main
2026-03-21 22:16:05 +00:00
651cc9427b Update src/app/page.tsx 2026-03-21 22:16:01 +00:00
7f18332905 Merge version_27 into main
Merge version_27 into main
2026-03-21 22:08:53 +00:00
b0360b5784 Update src/app/page.tsx 2026-03-21 22:08:49 +00:00
b6a8015b5a Merge version_26 into main
Merge version_26 into main
2026-03-19 19:50:24 +00:00
c74227ca00 Update src/app/page.tsx 2026-03-19 19:50:20 +00:00
34667b3e39 Switch to version 24: modified src/app/page.tsx 2026-03-19 19:41:32 +00:00
3f4359dd46 Merge version_25 into main
Merge version_25 into main
2026-03-19 19:40:48 +00:00
30c0b01057 Update src/app/page.tsx 2026-03-19 19:40:44 +00:00
0b84fe33a3 Merge version_24 into main
Merge version_24 into main
2026-03-19 19:36:14 +00:00
970fa3fbea Update src/app/page.tsx 2026-03-19 19:36:10 +00:00
9807ee790c Merge version_23 into main
Merge version_23 into main
2026-03-19 19:33:13 +00:00
b5994e8235 Update src/app/page.tsx 2026-03-19 19:33:09 +00:00
e3f129208b Merge version_22 into main
Merge version_22 into main
2026-03-19 19:22:49 +00:00
1560f38543 Update src/app/page.tsx 2026-03-19 19:22:45 +00:00
b835383e2a Merge version_22 into main
Merge version_22 into main
2026-03-19 19:22:24 +00:00
c6ecfb010e Update src/app/page.tsx 2026-03-19 19:22:20 +00:00
64f3c3869b Merge version_22 into main
Merge version_22 into main
2026-03-19 19:21:49 +00:00
846aa84155 Update src/app/page.tsx 2026-03-19 19:21:45 +00:00
81a68f5e71 Merge version_19 into main
Merge version_19 into main
2026-03-19 19:19:40 +00:00
ef67dd7d0c Update src/app/page.tsx 2026-03-19 19:19:36 +00:00
0de13d4ccc Switch to version 19: modified src/app/page.tsx 2026-03-19 19:19:02 +00:00
fcc0441f5a Switch to version 20: modified src/app/page.tsx 2026-03-19 19:19:00 +00:00
452b4d00c9 Merge version_21 into main
Merge version_21 into main
2026-03-19 19:18:06 +00:00
53b6683972 Update src/app/page.tsx 2026-03-19 19:18:02 +00:00
e94914d0ba Merge version_20 into main
Merge version_20 into main
2026-03-19 19:13:03 +00:00
5796afa7d7 Update src/app/page.tsx 2026-03-19 19:12:59 +00:00
c91a752f88 Merge version_19 into main
Merge version_19 into main
2026-03-19 18:46:54 +00:00
c295bceaa4 Update src/app/page.tsx 2026-03-19 18:46:50 +00:00
e56e865f1a Merge version_19 into main
Merge version_19 into main
2026-03-19 07:27:03 +00:00
a16cb96315 Update src/app/page.tsx 2026-03-19 07:26:59 +00:00
08852338d6 Merge version_17 into main
Merge version_17 into main
2026-03-19 06:21:52 +00:00
e396880075 Update src/app/page.tsx 2026-03-19 06:21:48 +00:00
7a662c5872 Merge version_17 into main
Merge version_17 into main
2026-03-19 06:15:07 +00:00
dd69bdcbb8 Update src/app/page.tsx 2026-03-19 06:15:03 +00:00
35c9cd39b9 Merge version_16 into main
Merge version_16 into main
2026-03-19 06:10:53 +00:00
3eec907d94 Update src/app/page.tsx 2026-03-19 06:10:48 +00:00
ac8cb3c24e Merge version_15 into main
Merge version_15 into main
2026-03-19 06:06:45 +00:00
8af2e7629e Update src/app/page.tsx 2026-03-19 06:06:40 +00:00
abcce974ad Merge version_14 into main
Merge version_14 into main
2026-03-19 05:52:29 +00:00
0636e0dc0c Update src/app/page.tsx 2026-03-19 05:52:24 +00:00
da50567492 Merge version_13 into main
Merge version_13 into main
2026-03-19 05:47:46 +00:00
2db5bc271e Update src/app/page.tsx 2026-03-19 05:47:42 +00:00
30e0b609f0 Merge version_12 into main
Merge version_12 into main
2026-03-19 05:44:22 +00:00
fe82627870 Update src/app/page.tsx 2026-03-19 05:44:17 +00:00
0625be4861 Merge version_12 into main
Merge version_12 into main
2026-03-19 05:43:57 +00:00
80a742ed82 Update src/app/page.tsx 2026-03-19 05:43:52 +00:00
1fcebf8494 Merge version_11 into main
Merge version_11 into main
2026-03-19 05:30:21 +00:00
a0ed68e3ad Update src/app/page.tsx 2026-03-19 05:30:11 +00:00
776702551e Merge version_11 into main
Merge version_11 into main
2026-03-19 05:24:17 +00:00
46a552fc6b Update src/app/page.tsx 2026-03-19 05:24:13 +00:00
a0eab5e329 Merge version_11 into main
Merge version_11 into main
2026-03-19 04:58:27 +00:00
83b6ce08af Update src/app/page.tsx 2026-03-19 04:58:23 +00:00
28267be8d7 Merge version_10 into main
Merge version_10 into main
2026-03-19 04:52:35 +00:00
57c8ceb571 Update src/app/page.tsx 2026-03-19 04:52:31 +00:00
21e8a17008 Merge version_9 into main
Merge version_9 into main
2026-03-19 04:44:34 +00:00
d1158e3926 Update src/app/page.tsx 2026-03-19 04:44:30 +00:00
9cd56f31c0 Merge version_9 into main
Merge version_9 into main
2026-03-19 04:42:59 +00:00
f55c29902e Update src/app/page.tsx 2026-03-19 04:42:55 +00:00
c9387b7661 Merge version_9 into main
Merge version_9 into main
2026-03-19 04:29:32 +00:00
d0a67370d3 Update src/app/page.tsx 2026-03-19 04:29:28 +00:00
e23f14fd98 Merge version_9 into main
Merge version_9 into main
2026-03-19 04:18:21 +00:00
abbbacce2b Update theme colors 2026-03-19 04:18:15 +00:00
2ff3d96789 Merge version_9 into main
Merge version_9 into main
2026-03-19 04:17:55 +00:00
58d27703f5 Update theme colors 2026-03-19 04:17:48 +00:00
6f5cef901a Merge version_9 into main
Merge version_9 into main
2026-03-19 04:17:30 +00:00
a2145d2a43 Update src/app/page.tsx 2026-03-19 04:17:26 +00:00
7ab332f14f Merge version_9 into main
Merge version_9 into main
2026-03-19 04:02:52 +00:00
14c3766270 Update src/app/page.tsx 2026-03-19 04:02:47 +00:00
aa180ea59c Merge version_8 into main
Merge version_8 into main
2026-03-19 04:01:03 +00:00
42ab9097e1 Update src/app/page.tsx 2026-03-19 04:00:59 +00:00
baa7ef77c4 Merge version_7 into main
Merge version_7 into main
2026-03-17 20:17:30 +00:00
eb947fc39c Update src/app/page.tsx 2026-03-17 20:17:27 +00:00
b2cd9bbac9 Merge version_7 into main
Merge version_7 into main
2026-03-17 20:13:07 +00:00
c3bddf2d12 Update src/app/page.tsx 2026-03-17 20:13:03 +00:00
5b8214f56c Merge version_6 into main
Merge version_6 into main
2026-03-17 20:05:23 +00:00
9aa6cbb32f Update src/app/page.tsx 2026-03-17 20:05:19 +00:00
1995c06bce Merge version_5 into main
Merge version_5 into main
2026-03-17 19:56:32 +00:00
bd7c353aa6 Update src/app/page.tsx 2026-03-17 19:56:28 +00:00
e250b51e57 Merge version_5 into main
Merge version_5 into main
2026-03-17 19:50:58 +00:00
080a921d95 Update src/app/page.tsx 2026-03-17 19:50:48 +00:00
bec44c133d Merge version_4 into main
Merge version_4 into main
2026-03-17 19:45:51 +00:00
4 changed files with 152 additions and 290 deletions

View File

@@ -3,7 +3,6 @@ import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Lato } from "next/font/google";
@@ -28,7 +27,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${lato.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{

View File

@@ -1,312 +1,97 @@
"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 ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Star, Heart, Users, Camera, Sparkles, Crown } from "lucide-react";
import { Phone, Instagram, MapPin, X } from "lucide-react";
import { useState, useEffect, useRef } from "react";
export default function LandingPage() {
const [showModal, setShowModal] = useState(false);
const [modalType, setModalType] = useState<'gallery' | null>(null);
const galleryRef = useRef<HTMLDivElement>(null);
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" }
];
const renderModal = () => {
if (!showModal || !modalType) return null;
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-4xl max-h-[80vh] bg-[var(--background)] rounded-2xl p-6 shadow-2xl flex flex-col">
<button onClick={() => setShowModal(false)} className="absolute top-4 right-4 p-2 bg-[var(--card)] rounded-full"><X /></button>
<h2 className="text-2xl font-bold mb-6">Dress Details</h2>
<div className="grid grid-cols-2 gap-4 overflow-y-auto">
{allDresses.map((item) => (
<img key={item.id} src={item.imageSrc} alt={item.imageAlt} className="rounded-lg shadow-sm w-full h-auto" />
))}
</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="#"><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">
<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="Expert bridal styling for your dream day."
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"
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 }))}
/>
</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>
<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>
<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"
}
]}
buttons={[
{ text: "See More Reviews", href: "#" }
]}
buttonAnimation="slide-up"
animationType="slide-up"
/>
</div>
<div id="gallery" data-section="gallery">
<div id="gallery" data-section="gallery" ref={galleryRef}>
<ProductCardFour
title="Our Dress Collection"
description="Handpicked dresses for every bride, every style, every story. From classic elegance to modern minimalism."
description="Handpicked designs by Maral."
textboxLayout="default"
useInvertedBackground={false}
tag="Gallery"
tagIcon={Camera}
tagAnimation="slide-up"
buttons={[
{ text: "Book Your Fitting", href: "#appointment" }
]}
buttonAnimation="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"
products={allDresses.slice(0, 4).map((dress) => ({
...dress,
onProductClick: () => {
setModalType('gallery');
setShowModal(true);
}
]}
/>
</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"
buttons={[
{ text: "Explore Shoes", href: "#appointment" }
]}
buttonAnimation="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>
<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"
buttons={[
{ text: "Shop Veils", href: "#appointment" }
]}
buttonAnimation="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>
<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"
<FooterSimple
columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }] }]}
bottomLeftText="© 2025 Maral Bridal"
bottomRightText="All rights reserved."
/>
</div>
{renderModal()}
</ThemeProvider>
);
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #1c1c1c;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #159c49;
--background-accent: #a8e8ba;
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #2b180a;
--primary-cta: #2b180a;
--primary-cta-text: #f6f0e9;
--secondary-cta: #efe7dd;
--secondary-cta-text: #2b180a;
--accent: #94877c;
--background-accent: #afa094;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

View File

@@ -0,0 +1,78 @@
import { useEffect, useRef, useState } from 'react';
interface UseScrollDetectionOptions {
targetElementId: string;
scrollThreshold?: number;
onStateChange?: (state: {
isScrollingPastTarget: boolean;
isScrollingBack: boolean;
scrollProgress: number;
}) => void;
}
interface UseScrollDetectionReturn {
isScrollingPastTarget: boolean;
isScrollingBack: boolean;
scrollProgress: number;
}
export function useScrollDetection({
targetElementId,
scrollThreshold = 0.3,
onStateChange,
}: UseScrollDetectionOptions): UseScrollDetectionReturn {
const [isScrollingPastTarget, setIsScrollingPastTarget] = useState(false);
const [isScrollingBack, setIsScrollingBack] = useState(false);
const [scrollProgress, setScrollProgress] = useState(0);
const lastScrollYRef = useRef(0);
const targetElementRef = useRef<HTMLElement | null>(null);
useEffect(() => {
// Get target element
targetElementRef.current = document.getElementById(targetElementId);
const handleScroll = () => {
if (!targetElementRef.current) return;
const targetRect = targetElementRef.current.getBoundingClientRect();
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
const currentScrollDirection = scrollY > lastScrollYRef.current ? 'down' : 'up';
// Calculate if we've scrolled past the target element
const targetTop = targetRect.top + scrollY;
const thresholdDistance = window.innerHeight * scrollThreshold;
const isPastTarget = scrollY > targetTop - thresholdDistance;
// Determine scroll direction
const isScrollingBackward = currentScrollDirection === 'up';
// Calculate scroll progress (0 to 1)
const progress = Math.min(scrollY / (targetTop + thresholdDistance), 1);
setIsScrollingPastTarget(isPastTarget);
setIsScrollingBack(isScrollingBackward);
setScrollProgress(progress);
// Call callback if provided
if (onStateChange) {
onStateChange({
isScrollingPastTarget: isPastTarget,
isScrollingBack: isScrollingBackward,
scrollProgress: progress,
});
}
lastScrollYRef.current = scrollY;
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, [targetElementId, scrollThreshold, onStateChange]);
return {
isScrollingPastTarget,
isScrollingBack,
scrollProgress,
};
}