Compare commits
6 Commits
version_31
...
version_34
| Author | SHA1 | Date | |
|---|---|---|---|
| 290ecbdf18 | |||
| cf284f4bc6 | |||
| e812a41272 | |||
| 6ec05e6497 | |||
| 0847c98641 | |||
| 574e17251e |
262
src/app/page.tsx
262
src/app/page.tsx
@@ -16,11 +16,18 @@ export default function LandingPage() {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [showViewMoreButton, setShowViewMoreButton] = useState(false);
|
||||
const [showShoesArrow, setShowShoesArrow] = useState(false);
|
||||
const [showShoesMoreButton, setShowShoesMoreButton] = useState(false);
|
||||
const [showVeilsMoreButton, setShowVeilsMoreButton] = useState(false);
|
||||
const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
|
||||
const [lastScrollY, setLastScrollY] = useState(0);
|
||||
const viewMoreButtonRef = useRef<HTMLDivElement>(null);
|
||||
const sixthItemRef = useRef<HTMLDivElement>(null);
|
||||
const galleryRef = useRef<HTMLDivElement>(null);
|
||||
const shoesRef = useRef<HTMLDivElement>(null);
|
||||
const veilsRef = useRef<HTMLDivElement>(null);
|
||||
const shoesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const veilsContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let ticking = false;
|
||||
@@ -55,6 +62,38 @@ export default function LandingPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Check if shoes container (with button) is in view
|
||||
if (shoesContainerRef.current) {
|
||||
const shoesContainerRect = shoesContainerRef.current.getBoundingClientRect();
|
||||
const shoesContainerInView = shoesContainerRect.top < window.innerHeight && shoesContainerRect.bottom > 0;
|
||||
|
||||
// Show more button when scrolled past shoes section
|
||||
// Hide when user scrolls back to shoes area
|
||||
if (!shoesContainerInView && currentScrollY > lastScrollY) {
|
||||
// We've scrolled past the shoes section, show the more button
|
||||
setShowShoesMoreButton(true);
|
||||
} else if (shoesContainerInView && currentScrollY < lastScrollY) {
|
||||
// We're back at or above the shoes section, hide the button
|
||||
setShowShoesMoreButton(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Check if veils container (with button) is in view
|
||||
if (veilsContainerRef.current) {
|
||||
const veilsContainerRect = veilsContainerRef.current.getBoundingClientRect();
|
||||
const veilsContainerInView = veilsContainerRect.top < window.innerHeight && veilsContainerRect.bottom > 0;
|
||||
|
||||
// Show more button when scrolled past veils section
|
||||
// Hide when user scrolls back to veils area
|
||||
if (!veilsContainerInView && currentScrollY > lastScrollY) {
|
||||
// We've scrolled past the veils section, show the more button
|
||||
setShowVeilsMoreButton(true);
|
||||
} else if (veilsContainerInView && currentScrollY < lastScrollY) {
|
||||
// We're back at or above the veils section, hide the button
|
||||
setShowVeilsMoreButton(false);
|
||||
}
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
@@ -85,6 +124,16 @@ export default function LandingPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToVeils = () => {
|
||||
const veilsSectionElement = document.getElementById('veils');
|
||||
if (veilsSectionElement) {
|
||||
veilsSectionElement.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToTop = () => {
|
||||
const heroSectionElement = document.getElementById('hero');
|
||||
if (heroSectionElement) {
|
||||
@@ -282,18 +331,35 @@ export default function LandingPage() {
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Fixed "Go to Shoes" Button */}
|
||||
<button
|
||||
onClick={scrollToShoes}
|
||||
className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black 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 Shoes"
|
||||
title="Go to Shoes"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-0.5">
|
||||
<ArrowDown className="w-4 h-4" />
|
||||
<span className="text-xs font-semibold text-center leading-tight">Shoes</span>
|
||||
</div>
|
||||
</button>
|
||||
{/* Fixed "Go to Shoes" Button - With scroll detection */}
|
||||
{!showShoesArrow && (
|
||||
<button
|
||||
onClick={scrollToShoes}
|
||||
className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black 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 Shoes"
|
||||
title="Go to Shoes"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-0.5">
|
||||
<ArrowDown className="w-4 h-4" />
|
||||
<span className="text-xs font-semibold text-center leading-tight">Shoes</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Fixed "Back to Shoes" Button - Appears when scrolled past shoes */}
|
||||
{showShoesArrow && (
|
||||
<button
|
||||
onClick={scrollToShoes}
|
||||
className="fixed right-6 bottom-20 z-40 w-12 h-12 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#D4AF37] text-black 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 slide-in-from-bottom-4"
|
||||
aria-label="Back to Shoes"
|
||||
title="Back to Shoes"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center gap-0.5">
|
||||
<ArrowUp className="w-4 h-4" />
|
||||
<span className="text-xs font-semibold text-center leading-tight">Shoes</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
@@ -462,7 +528,7 @@ export default function LandingPage() {
|
||||
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"
|
||||
aria-label="View More Dresses"
|
||||
>
|
||||
<span className="text-sm md:text-base">More</span>
|
||||
<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>
|
||||
@@ -564,75 +630,111 @@ export default function LandingPage() {
|
||||
/>
|
||||
</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"
|
||||
buttons={[
|
||||
{ text: "Explore All Shoes", onClick: scrollToShoes }
|
||||
]}
|
||||
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={[
|
||||
{
|
||||
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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* More Button for Shoes - Positioned after shoes section */}
|
||||
<div className="relative mt-0">
|
||||
{showShoesMoreButton && (
|
||||
<div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end animate-in fade-in slide-in-from-bottom-4 duration-300">
|
||||
<button
|
||||
onClick={scrollToVeils}
|
||||
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"
|
||||
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>
|
||||
</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={[
|
||||
{
|
||||
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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* More Button for Veils - Positioned after veils section */}
|
||||
<div className="relative mt-0">
|
||||
{showVeilsMoreButton && (
|
||||
<div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end animate-in fade-in slide-in-from-bottom-4 duration-300">
|
||||
<button
|
||||
onClick={scrollToVeils}
|
||||
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"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact" className="relative z-10">
|
||||
|
||||
Reference in New Issue
Block a user