Compare commits
56 Commits
version_19
...
version_41
| Author | SHA1 | Date | |
|---|---|---|---|
| fdf4547d57 | |||
| a5e06e87b9 | |||
| f3be5a11fe | |||
| e2506c3a66 | |||
| b260ab6f15 | |||
| a5c834f9fc | |||
| 1aa9788a4a | |||
| 150f2b254c | |||
| 3aa7e33948 | |||
| 340716fe3e | |||
| 537601ee19 | |||
| 9c23776465 | |||
| d68a1badc9 | |||
| 5854c172f5 | |||
| 19f25d0b8f | |||
| 65db121ec6 | |||
| 290ecbdf18 | |||
| cf284f4bc6 | |||
| e812a41272 | |||
| 6ec05e6497 | |||
| 0847c98641 | |||
| 574e17251e | |||
| 82edf03cf2 | |||
| 7569facec5 | |||
| daab93c9f3 | |||
| a2228ca537 | |||
| 68094e5592 | |||
| 6dd47629e6 | |||
| ab485b0d30 | |||
| 651cc9427b | |||
| 7f18332905 | |||
| b0360b5784 | |||
| b6a8015b5a | |||
| c74227ca00 | |||
| 34667b3e39 | |||
| 3f4359dd46 | |||
| 30c0b01057 | |||
| 0b84fe33a3 | |||
| 970fa3fbea | |||
| 9807ee790c | |||
| b5994e8235 | |||
| e3f129208b | |||
| 1560f38543 | |||
| b835383e2a | |||
| c6ecfb010e | |||
| 64f3c3869b | |||
| 846aa84155 | |||
| 81a68f5e71 | |||
| 0de13d4ccc | |||
| fcc0441f5a | |||
| 452b4d00c9 | |||
| 53b6683972 | |||
| e94914d0ba | |||
| 5796afa7d7 | |||
| c91a752f88 | |||
| e56e865f1a |
@@ -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={{
|
||||
|
||||
597
src/app/page.tsx
597
src/app/page.tsx
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
@@ -10,21 +9,87 @@ 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 } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown, ArrowUp, Instagram, 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 = () => {
|
||||
setShowBackToTop(window.scrollY > 300);
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
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';
|
||||
};
|
||||
}, [showModal]);
|
||||
|
||||
const scrollToGallery = () => {
|
||||
const gallerySectionElement = document.getElementById('gallery');
|
||||
@@ -36,6 +101,26 @@ export default function LandingPage() {
|
||||
}
|
||||
};
|
||||
|
||||
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) {
|
||||
@@ -124,7 +209,169 @@ export default function LandingPage() {
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -205,47 +452,44 @@ export default function LandingPage() {
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Fixed "Go to Dresses" Button */}
|
||||
<button
|
||||
onClick={scrollToGallery}
|
||||
className="fixed right-6 bottom-32 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95"
|
||||
aria-label="Go to Dresses"
|
||||
title="Go to Dresses"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-1">
|
||||
<ArrowDown className="w-5 h-5" />
|
||||
<span className="text-xs font-semibold text-center leading-tight">Dresses</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Fixed Back-to-Top Button */}
|
||||
{showBackToTop && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed right-6 bottom-6 z-40 w-16 h-16 rounded-full bg-gradient-to-r from-[var(--secondary-cta)] to-[var(--secondary-cta)] text-[var(--secondary-cta-text)] shadow-lg hover:shadow-2xl transition-all duration-300 ease-out flex items-center justify-center hover:scale-110 active:scale-95 animate-in fade-in-0 duration-300"
|
||||
aria-label="Back to Top"
|
||||
title="Back to Top"
|
||||
{/* Fixed Top Social & Contact Bar */}
|
||||
<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"
|
||||
>
|
||||
<ArrowUp className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
<Instagram className="w-6 h-6" />
|
||||
</a>
|
||||
|
||||
<div id="nav" data-section="nav" className="relative z-20">
|
||||
<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"
|
||||
}}
|
||||
/>
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero" className="relative z-10">
|
||||
<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."
|
||||
@@ -266,7 +510,7 @@ export default function LandingPage() {
|
||||
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"
|
||||
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={[
|
||||
@@ -286,7 +530,7 @@ export default function LandingPage() {
|
||||
|
||||
<div id="features" data-section="features" className="relative z-10">
|
||||
<FeatureCardSixteen
|
||||
title="What Makes Us Different"
|
||||
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."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -333,34 +577,26 @@ export default function LandingPage() {
|
||||
tagIcon={Users}
|
||||
tagAnimation="slide-up"
|
||||
kpiItems={[
|
||||
{ value: "50+", label: "Happy Brides" },
|
||||
{ value: "120+", label: "Happy Brides" },
|
||||
{ value: "5.0★", label: "Average Rating" },
|
||||
{ value: "4.5+", label: "Month of Excellence" }
|
||||
{ value: "6+", label: "Month of Excellence" }
|
||||
]}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marina Farhardyan ", 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"
|
||||
imageSrc: "", 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"
|
||||
imageSrc: "", imageAlt: "Jessica Martinez - Bride with friends"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery" className="relative z-10">
|
||||
<div className="relative">
|
||||
<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."
|
||||
@@ -371,86 +607,29 @@ export default function LandingPage() {
|
||||
tagAnimation="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
products={initialDresses}
|
||||
products={initialDresses.map((dress, index) => ({
|
||||
...dress,
|
||||
_key: `gallery-${index}`
|
||||
}))}
|
||||
/>
|
||||
|
||||
{/* View More Button Positioned on Right */}
|
||||
<div className="flex justify-end px-4 md:px-8 lg:px-16 py-6 md:py-10">
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="group relative inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-[var(--primary-cta)] to-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-semibold hover:shadow-lg transition-all duration-300 ease-out"
|
||||
aria-label="View More Dresses"
|
||||
>
|
||||
<span className="text-sm md:text-base">View More Dresses</span>
|
||||
<ChevronRight className="w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Gallery */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 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)]">Complete Dress Gallery</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">
|
||||
{allDresses.map((dress) => (
|
||||
<div
|
||||
key={dress.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={dress.imageSrc}
|
||||
alt={dress.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">
|
||||
{dress.name}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[var(--foreground)]/70 mt-1">
|
||||
{dress.variant}
|
||||
</p>
|
||||
<p className="text-sm md:text-base font-bold text-[var(--primary-cta)] mt-2">
|
||||
{dress.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>
|
||||
)}
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
<div id="reels" data-section="reels" className="relative z-10">
|
||||
@@ -465,88 +644,97 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
blogs={[
|
||||
{
|
||||
id: "reel-1", category: "", title: "", excerpt: "", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5MJh3BJx339lVFA4KYjFzlzMX/uploaded-1773947446212-9rkbuuli.mp4", 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-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: "http://img.b2bpic.net/free-photo/young-women-enjoying-bachelorette-party_23-2149278361.jpg?_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-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: "http://img.b2bpic.net/free-photo/elegant-beautiful-fashionable-woman-blonde-long-white-dre_7502-4897.jpg?_wi=2", 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-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: "http://img.b2bpic.net/free-photo/elegant-bride-posing_23-2148105871.jpg?_wi=2", 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: ""
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shoes" data-section="shoes" className="relative z-10">
|
||||
<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="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>
|
||||
|
||||
<div id="veils" data-section="veils" className="relative z-10">
|
||||
<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="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>
|
||||
|
||||
<div id="contact" data-section="contact" className="relative z-10">
|
||||
@@ -606,6 +794,9 @@ export default function LandingPage() {
|
||||
bottomRightText="3106 Los Feliz Blvd, Los Angeles, CA 90039 | (747) 800-7770"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Universal Modal */}
|
||||
{renderModal()}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
78
src/hooks/useScrollDetection.ts
Normal file
78
src/hooks/useScrollDetection.ts
Normal 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,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user