Merge version_34 into main #52

Merged
bender merged 1 commits from version_34 into main 2026-03-21 22:56:54 +00:00

View File

@@ -26,6 +26,8 @@ export default function LandingPage() {
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;
@@ -60,35 +62,33 @@ export default function LandingPage() {
}
}
// Check if shoes section is in view for arrow detection
if (shoesRef.current) {
const shoesRect = shoesRef.current.getBoundingClientRect();
const shoesInView = shoesRect.top < window.innerHeight && shoesRect.bottom > 0;
// 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 up arrow when scrolled past shoes section
// Show down arrow when above shoes section
if (!shoesInView && currentScrollY > lastScrollY) {
// We've scrolled past the shoes section, show the up arrow
setShowShoesArrow(true);
// 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 (shoesInView) {
// We're at or above the shoes section
setShowShoesArrow(false);
} else if (shoesContainerInView && currentScrollY < lastScrollY) {
// We're back at or above the shoes section, hide the button
setShowShoesMoreButton(false);
}
}
// Check if veils section is in view for more button
if (veilsRef.current) {
const veilsRect = veilsRef.current.getBoundingClientRect();
const veilsInView = veilsRect.top < window.innerHeight && veilsRect.bottom > 0;
// 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 (!veilsInView && currentScrollY > lastScrollY) {
if (!veilsContainerInView && currentScrollY > lastScrollY) {
// We've scrolled past the veils section, show the more button
setShowVeilsMoreButton(true);
} else if (veilsInView && currentScrollY < lastScrollY) {
} else if (veilsContainerInView && currentScrollY < lastScrollY) {
// We're back at or above the veils section, hide the button
setShowVeilsMoreButton(false);
}
@@ -528,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>
@@ -631,7 +631,7 @@ export default function LandingPage() {
</div>
<div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
<div className="relative">
<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."
@@ -674,9 +674,9 @@ export default function LandingPage() {
<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 Veils Section"
aria-label="View More Shoes"
>
<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>
@@ -686,7 +686,7 @@ export default function LandingPage() {
</div>
<div id="veils" data-section="veils" className="relative z-10" ref={veilsRef}>
<div className="relative">
<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."
@@ -726,9 +726,9 @@ export default function LandingPage() {
<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="Back to Veils"
aria-label="View More Veils"
>
<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>