Update src/app/page.tsx

src/app/page.tsx

@@ -10,8 +10,31 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
 
 export default function LandingPage() {
+  useEffect(() => {
+    const sections = [".contact-section-wrapper", ".footer-section-wrapper"];
+    sections.forEach((selector) => {
+      gsap.fromTo(
+        selector,
+        { opacity: 0, y: 50 },
+        {
+          opacity: 1,
+          y: 0,
+          scrollTrigger: {
+            trigger: selector,
+            start: "top 85%",            end: "top 60%",            scrub: 1,
+          },
+        }
+      );
+    });
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -30,21 +53,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "About",
+          name: "About",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Menu",
+          name: "Menu",          id: "menu"},
-          id: "menu",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Epicure"
     />
@@ -53,41 +68,26 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Elevated Dining Redefined in Rosebank"
       description="Experience culinary excellence at Epicure—where sophisticated flavors meet impeccable service. Reserve your table or order takeaway from Johannesburg's most celebrated restaurant."
       buttons={[
         {
-          text: "Reserve Table Now",
+          text: "Reserve Table Now",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-round-square-tables-some-chairs-plants_140725-8031.jpg",          imageAlt: "Luxury dining atmosphere"},
-          imageAlt: "Luxury dining atmosphere",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake-with-wine_114579-16605.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/square-slice-chocolate-cheesecake-with-wine_114579-16605.jpg",          imageAlt: "Chef preparing dish"},
-          imageAlt: "Chef preparing dish",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-grey-space_140725-83766.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-grey-space_140725-83766.jpg",          imageAlt: "Gourmet meal plating"},
-          imageAlt: "Gourmet meal plating",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/twigs-leaves-near-lamp-cutlery_23-2147811213.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/twigs-leaves-near-lamp-cutlery_23-2147811213.jpg",          imageAlt: "Elegant restaurant decor"},
-          imageAlt: "Elegant restaurant decor",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/grilled-tuna-with-avocado-tomatoes-greens-sesame-sauce-bread-glass-tarhun-lemonade-table_140725-10940.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/grilled-tuna-with-avocado-tomatoes-greens-sesame-sauce-bread-glass-tarhun-lemonade-table_140725-10940.jpg",          imageAlt: "Fine dining table setting"},
-          imageAlt: "Fine dining table setting",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598345.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598345.jpg",          imageAlt: "Professional service"},
-          imageAlt: "Professional service",
-        },
       ]}
     />
   </div>
@@ -110,41 +110,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "Truffle Infused Risotto",          price: "R320",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-grey-space_140725-83769.jpg"},
-          name: "Truffle Infused Risotto",
-          price: "R320",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-grey-space_140725-83769.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Slow-Roasted Wagyu Beef",          price: "R580",          imageSrc: "http://img.b2bpic.net/free-photo/grilled-foie-gras_1203-3591.jpg"},
-          name: "Slow-Roasted Wagyu Beef",
-          price: "R580",
-          imageSrc: "http://img.b2bpic.net/free-photo/grilled-foie-gras_1203-3591.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Deconstructed Malva Pudding",          price: "R180",          imageSrc: "http://img.b2bpic.net/free-photo/cheesecake-slice-with-berry-sauce-top_114579-2551.jpg"},
-          name: "Deconstructed Malva Pudding",
-          price: "R180",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheesecake-slice-with-berry-sauce-top_114579-2551.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "Heritage Garden Salad",          price: "R160",          imageSrc: "http://img.b2bpic.net/free-photo/salmon-salad_74190-5611.jpg"},
-          name: "Heritage Garden Salad",
-          price: "R160",
-          imageSrc: "http://img.b2bpic.net/free-photo/salmon-salad_74190-5611.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Pan-Seared Kingklip",          price: "R420",          imageSrc: "http://img.b2bpic.net/free-photo/seafood-salad-with-crabsters-mussels_114579-2138.jpg"},
-          name: "Pan-Seared Kingklip",
-          price: "R420",
-          imageSrc: "http://img.b2bpic.net/free-photo/seafood-salad-with-crabsters-mussels_114579-2138.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Valrhona Chocolate Sphere",          price: "R210",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cheesecake-with-chocolate-raspberries-white-oval-plateon-newspaper-grey-surface-free-space_140725-62326.jpg"},
-          name: "Valrhona Chocolate Sphere",
-          price: "R210",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cheesecake-with-chocolate-raspberries-white-oval-plateon-newspaper-grey-surface-free-space_140725-62326.jpg",
-        },
       ]}
       title="Curated Menu Selection"
       description="Discover our signature dishes, meticulously crafted to offer a journey through the finest flavors in Johannesburg."
@@ -157,45 +133,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          title: "Incredible Experience",          quote: "The food and ambiance were perfectly balanced for our business dinner.",          name: "Sarah M.",          role: "Corporate Lead",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-holding-cup_23-2149655610.jpg"},
-          title: "Incredible Experience",
-          quote: "The food and ambiance were perfectly balanced for our business dinner.",
-          name: "Sarah M.",
-          role: "Corporate Lead",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-holding-cup_23-2149655610.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          title: "Stellar Service",          quote: "Impeccable service. The best fine dining spot in Johannesburg by far.",          name: "Michael D.",          role: "Food Critic",          imageSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg"},
-          title: "Stellar Service",
-          quote: "Impeccable service. The best fine dining spot in Johannesburg by far.",
-          name: "Michael D.",
-          role: "Food Critic",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          title: "Perfect Date Night",          quote: "The atmosphere and flavors made for a truly magical date night experience.",          name: "Elena R.",          role: "Creative Director",          imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-toasting-with-colleague-office-party_637285-9559.jpg"},
-          title: "Perfect Date Night",
-          quote: "The atmosphere and flavors made for a truly magical date night experience.",
-          name: "Elena R.",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-toasting-with-colleague-office-party_637285-9559.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          title: "Culinary Perfection",          quote: "The Wagyu beef was a transformative culinary journey. Simply brilliant.",          name: "David L.",          role: "Professional",          imageSrc: "http://img.b2bpic.net/free-photo/man-woman-with-glass-wine-looking-camera_259150-58460.jpg"},
-          title: "Culinary Perfection",
-          quote: "The Wagyu beef was a transformative culinary journey. Simply brilliant.",
-          name: "David L.",
-          role: "Professional",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-woman-with-glass-wine-looking-camera_259150-58460.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          title: "Must Try Rosebank Venue",          quote: "An absolute treasure for anyone seeking quality dining in Rosebank.",          name: "Jane K.",          role: "Entrepreneur",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-standing-front-toys-amusement-park_23-2147910668.jpg"},
-          title: "Must Try Rosebank Venue",
-          quote: "An absolute treasure for anyone seeking quality dining in Rosebank.",
-          name: "Jane K.",
-          role: "Entrepreneur",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-standing-front-toys-amusement-park_23-2147910668.jpg",
-        },
       ]}
       title="Voices of Epicure"
       description="Rated 4.3 stars by our guests, Epicure continues to set the standard for fine dining in Rosebank."
@@ -208,25 +154,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
+          id: "f1",          title: "Do I need a reservation?",          content: "We highly recommend reservations, especially on weekends and evenings."},
-          title: "Do I need a reservation?",
-          content: "We highly recommend reservations, especially on weekends and evenings.",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Is takeaway available?",          content: "Yes, we offer premium takeaway for our guests to enjoy Epicure at home."},
-          title: "Is takeaway available?",
-          content: "Yes, we offer premium takeaway for our guests to enjoy Epicure at home.",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Are there private dining options?",          content: "Yes, we provide flexible private dining areas for group and corporate bookings."},
-          title: "Are there private dining options?",
-          content: "Yes, we provide flexible private dining areas for group and corporate bookings.",
-        },
         {
-          id: "f4",
+          id: "f4",          title: "What are your operating hours?",          content: "We are open daily until midnight to serve you."},
-          title: "What are your operating hours?",
-          content: "We are open daily until midnight to serve you.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/stylish-businessman-working-office_1157-21037.jpg"
       title="Planning Your Visit"
@@ -235,12 +169,11 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="contact-section-wrapper">
       <ContactCenter
       useInvertedBackground={true}
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       tag="Reservations"
       title="Secure Your Table"
       description="Join our newsletter for updates or reserve your table now. For group bookings, contact us directly via email."
@@ -248,7 +181,7 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="footer-section-wrapper">
       <FooterCard
       logoText="Epicure"
       copyrightText="© 2025 Epicure Restaurant | Johannesburg"
@@ -257,4 +190,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}