Merge version_32 into main
Merge version_32 into main
This commit was merged in pull request #50.
This commit is contained in:
@@ -16,11 +16,13 @@ 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 [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);
|
||||
|
||||
useEffect(() => {
|
||||
let ticking = false;
|
||||
@@ -55,6 +57,22 @@ 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;
|
||||
|
||||
// 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);
|
||||
} else if (shoesInView) {
|
||||
// We're at or above the shoes section
|
||||
setShowShoesArrow(false);
|
||||
}
|
||||
}
|
||||
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
@@ -282,18 +300,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">
|
||||
@@ -564,7 +599,7 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shoes" data-section="shoes" className="relative z-10">
|
||||
<div id="shoes" data-section="shoes" className="relative z-10" ref={shoesRef}>
|
||||
<ProductCardFour
|
||||
title="Bridal Shoes"
|
||||
description="Complete your wedding day look with stunning shoes designed for comfort and elegance. From classic heels to modern designs."
|
||||
|
||||
Reference in New Issue
Block a user