Compare commits
1 Commits
version_43
...
version_39
| Author | SHA1 | Date | |
|---|---|---|---|
| 19c2ff1420 |
108
src/app/page.tsx
108
src/app/page.tsx
@@ -46,37 +46,25 @@ export default function LandingPage() {
|
|||||||
setScrollDirection('up');
|
setScrollDirection('up');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check gallery section - show View More when 6th item is visible
|
// Check gallery section - show View More when visible
|
||||||
if (galleryContainerRef.current) {
|
if (galleryContainerRef.current && galleryButtonContainerRef.current) {
|
||||||
const items = galleryContainerRef.current.querySelectorAll('[data-product-item]');
|
const rect = galleryButtonContainerRef.current.getBoundingClientRect();
|
||||||
if (items.length > 0) {
|
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
||||||
const sixthItem = items[5];
|
setShowGalleryViewMore(isInViewport);
|
||||||
const rect = sixthItem.getBoundingClientRect();
|
|
||||||
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
|
||||||
setShowGalleryViewMore(isInViewport);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check shoes section - show View More when 6th item is visible
|
// Check shoes section - show View More when visible
|
||||||
if (shoesContainerRef.current) {
|
if (shoesContainerRef.current && shoesButtonContainerRef.current) {
|
||||||
const items = shoesContainerRef.current.querySelectorAll('[data-product-item]');
|
const rect = shoesButtonContainerRef.current.getBoundingClientRect();
|
||||||
if (items.length > 0) {
|
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
||||||
const sixthItem = items[5];
|
setShowShoesViewMore(isInViewport);
|
||||||
const rect = sixthItem.getBoundingClientRect();
|
|
||||||
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
|
||||||
setShowShoesViewMore(isInViewport);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check veils section - show View More when 6th item is visible
|
// Check veils section - show View More when visible
|
||||||
if (veilsContainerRef.current) {
|
if (veilsContainerRef.current && veilsButtonContainerRef.current) {
|
||||||
const items = veilsContainerRef.current.querySelectorAll('[data-product-item]');
|
const rect = veilsButtonContainerRef.current.getBoundingClientRect();
|
||||||
if (items.length > 0) {
|
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
||||||
const sixthItem = items[5];
|
setShowVeilsViewMore(isInViewport);
|
||||||
const rect = sixthItem.getBoundingClientRect();
|
|
||||||
const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
|
|
||||||
setShowVeilsViewMore(isInViewport);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setLastScrollY(currentScrollY);
|
setLastScrollY(currentScrollY);
|
||||||
@@ -449,19 +437,19 @@ export default function LandingPage() {
|
|||||||
_key: `gallery-${index}`
|
_key: `gallery-${index}`
|
||||||
}))}
|
}))}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* View More Button - Positioned at bottom right of gallery section */}
|
{/* 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 && (
|
{showGalleryViewMore && (
|
||||||
<div ref={galleryButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
|
<button
|
||||||
<button
|
onClick={() => setShowModal(true)}
|
||||||
onClick={() => 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"
|
||||||
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"
|
||||||
aria-label="View More Dresses"
|
>
|
||||||
>
|
<span className="text-sm md:text-base">View 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" />
|
||||||
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -595,19 +583,19 @@ export default function LandingPage() {
|
|||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* View More Button for Shoes - Positioned at bottom right of shoes section */}
|
{/* 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 && (
|
{showShoesViewMore && (
|
||||||
<div ref={shoesButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
|
<button
|
||||||
<button
|
onClick={scrollToVeils}
|
||||||
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 animate-in fade-in slide-in-from-bottom-4 duration-300"
|
||||||
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"
|
||||||
aria-label="View More Shoes"
|
>
|
||||||
>
|
<span className="text-sm md:text-base">View 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" />
|
||||||
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -645,19 +633,19 @@ export default function LandingPage() {
|
|||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* View More Button for Veils - Positioned at bottom right of veils section */}
|
{/* 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 && (
|
{showVeilsViewMore && (
|
||||||
<div ref={veilsButtonContainerRef} className="flex justify-end px-8 lg:px-16 pt-8 pb-4">
|
<button
|
||||||
<button
|
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"
|
||||||
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"
|
||||||
aria-label="View More Veils"
|
disabled
|
||||||
disabled
|
>
|
||||||
>
|
<span className="text-sm md:text-base">View 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" />
|
||||||
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user