bender/6f6c5e78-9ee1-4bdb-b92e-e19a18b28169
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-21 22:34:42 +00:00
parent 7569facec5
commit 82edf03cf2
1 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/page.tsx
View File

@@ -20,6 +20,7 @@ export default function LandingPage() {
const [lastScrollY, setLastScrollY] = useState(0);
const viewMoreButtonRef = useRef<HTMLDivElement>(null);
const sixthItemRef = useRef<HTMLDivElement>(null);
const galleryRef = useRef<HTMLDivElement>(null);
useEffect(() => {
let ticking = false;
@@ -38,17 +39,18 @@ export default function LandingPage() {
}
setLastScrollY(currentScrollY);
// Check if 6th item is in view
if (sixthItemRef.current) {
const rect = sixthItemRef.current.getBoundingClientRect();
// Check if gallery is in view
if (galleryRef.current) {
const rect = galleryRef.current.getBoundingClientRect();
const isInView = rect.top < window.innerHeight && rect.bottom > 0;
const isScrollingDown = scrollDirection === 'down';
// Show button when 6th item is reached AND scrolling down
// Hide button when scrolling back up past the 6th item
if (isInView && isScrollingDown) {
// Show button when gallery is scrolled past (user scrolls down past gallery)
// Hide button when user scrolls back to gallery area
if (!isInView && currentScrollY > lastScrollY) {
// We've scrolled past the gallery, show the up arrow
setShowViewMoreButton(true);
} else if (!isInView && scrollDirection === 'up') {
} else if (isInView && currentScrollY < lastScrollY) {
// We're back at or above the gallery, hide the button
setShowViewMoreButton(false);
}
}
@@ -61,7 +63,7 @@ export default function LandingPage() {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [lastScrollY, scrollDirection]);
}, [lastScrollY]);
const scrollToGallery = () => {
const gallerySectionElement = document.getElementById('gallery');
@@ -252,7 +254,7 @@ export default function LandingPage() {
/>
</svg>
{/* Fixed "Go to Dresses" Button */}
{/* Fixed "Go to Dresses" Button - Only visible on home page */}
<button
onClick={scrollToGallery}
className="fixed right-6 bottom-32 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"
@@ -265,6 +267,21 @@ export default function LandingPage() {
</div>
</button>
{/* Fixed "Back to Dresses" Button - Appears when scrolled past gallery */}
{showViewMoreButton && (
<button
onClick={scrollToGallery}
className="fixed right-6 bottom-32 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 Dresses"
title="Back to Dresses"
>
<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">Dress</span>
</div>
</button>
)}
{/* Fixed "Go to Shoes" Button */}
<button
onClick={scrollToShoes}
@@ -421,7 +438,7 @@ export default function LandingPage() {
/>
</div>
<div id="gallery" data-section="gallery" className="relative z-10">
<div id="gallery" data-section="gallery" className="relative z-10" ref={galleryRef}>
<div className="relative">
<ProductCardFour
title="Our Dress Collection"
@@ -436,12 +453,9 @@ export default function LandingPage() {
products={initialDresses}
/>
{/* Reference to 6th item for scroll detection */}
<div ref={sixthItemRef} className="absolute pointer-events-none" style={{ height: 0, top: 'calc(100% - 500px)' }} />
{/* More Button - Positioned after 6th picture, visible when 6th item is reached and scrolling down */}
{/* More Button - Positioned after gallery section */}
<div className="relative mt-0">
{showViewMoreButton && scrollDirection === 'down' && (
{showViewMoreButton && (
<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={() => setShowModal(true)}