Switch to version 4: modified src/app/page.tsx

src/app/page.tsx

@@ -4,16 +4,37 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 
 export default function LandingPage() {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const sections = document.querySelectorAll("[data-section]");
+    sections.forEach((section) => {
+      gsap.fromTo(
+        section,
+        { opacity: 0, y: 50 },
+        {
+          opacity: 1,
+          y: 0,
+          duration: 1,
+          scrollTrigger: {
+            trigger: section,
+            start: "top 85%",            toggleActions: "play none none reverse"},
+        }
+      );
+    });
+  }, []);
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -34,7 +55,6 @@ export default function LandingPage() {
         { name: "About", id: "about" },
         { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
-        { name: "Testimonials", id: "/testimonials-page" },
         { name: "Contact", id: "contact" },
       ]}
       brandName="Design Agency"
@@ -147,13 +167,26 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterBaseReveal
       logoText="Design Agency"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{ text: "Contact Us", href: "#contact" }}
+      columns={[
+        {
+          title: "Services",          items: [
+            { label: "Branding", href: "#" },
+            { label: "Design", href: "#" },
+            { label: "Development", href: "#" },
+          ],
+        },
+        {
+          title: "Company",          items: [
+            { label: "About Us", href: "#about" },
+            { label: "Contact", href: "#contact" },
+          ],
+        },
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}