Update src/app/page.tsx

Merge version_27 into main

src/app/page.tsx

@@ -10,11 +10,13 @@ import FooterSimple from "@/components/sections/footer/FooterSimple";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import BlogCardThree from "@/components/sections/blog/BlogCardThree";
 import { Star, Heart, Users, Camera, Sparkles, Crown, Phone, MessageCircle, User, Play, ChevronRight, X, ArrowDown, ArrowUp, Instagram, MapPin } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 export default function LandingPage() {
   const [showModal, setShowModal] = useState(false);
   const [showBackToTop, setShowBackToTop] = useState(false);
+  const [showViewMoreButton, setShowViewMoreButton] = useState(false);
+  const viewMoreButtonRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -25,6 +27,25 @@ export default function LandingPage() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setShowViewMoreButton(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+
+    if (viewMoreButtonRef.current) {
+      observer.observe(viewMoreButtonRef.current);
+    }
+
+    return () => {
+      if (viewMoreButtonRef.current) {
+        observer.unobserve(viewMoreButtonRef.current);
+      }
+    };
+  }, []);
+
   const scrollToGallery = () => {
     const gallerySectionElement = document.getElementById('gallery');
     if (gallerySectionElement) {
@@ -375,18 +396,20 @@ export default function LandingPage() {
             products={initialDresses}
           />
 
-          {/* View More Button Positioned After 6th Picture */}
+          {/* View More Button - Positioned after 6th picture, visible when 6th item is in view */}
-          <div className="relative mt-0">
+          <div ref={viewMoreButtonRef} className="relative mt-0">
-            <div className="absolute -top-[280px] right-8 lg:right-16 z-30 flex justify-end">
+            {showViewMoreButton && (
-              <button
+              <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">
-                onClick={() => setShowModal(true)}
+                <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"
+                  onClick={() => setShowModal(true)}
-                aria-label="View More Dresses"
+                  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">View More Dresses</span>
+                >
-                <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
+                  <span className="text-sm md:text-base">View More Dresses</span>
-              </button>
+                  <ChevronRight className="w-4 h-4 md:w-5 md:h-5 group-hover:translate-x-1 transition-transform" />
-            </div>
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
@@ -611,4 +634,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}