diff --git a/src/app/page.tsx b/src/app/page.tsx index 3784a9b..486f2d6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ "use client"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; import HeroCentered from "@/components/sections/hero/HeroCentered"; import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout"; @@ -13,12 +13,18 @@ import ContactSplit from "@/components/sections/contact/ContactSplit"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow"; import { Moon, Sun } from "lucide-react"; +import gsap from "gsap"; +import ScrollTrigger from "gsap/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); const lightTheme = { - "--background": "#ffffff", "--card": "#f9f9f9", "--foreground": "#000000", "--primary-cta": "#000000", "--secondary-cta": "#f9f9f9", "--accent": "#e2e2e2", "--background-accent": "#c4c4c4", "--primary-cta-text": "#ffffff", "--secondary-cta-text": "#000000"}; + "--background": "#ffffff", "--card": "#f9f9f9", "--foreground": "#000000", "--primary-cta": "#000000", "--secondary-cta": "#f9f9f9", "--accent": "#e2e2e2", "--background-accent": "#c4c4c4", "--primary-cta-text": "#ffffff", "--secondary-cta-text": "#000000" +}; const darkTheme = { - "--background": "#0a0a0a", "--card": "#1a1a1a", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#1a1a1a", "--accent": "#737373", "--background-accent": "#737373", "--primary-cta-text": "#0a0a0a", "--secondary-cta-text": "#ffffff"}; + "--background": "#0a0a0a", "--card": "#1a1a1a", "--foreground": "#ffffff", "--primary-cta": "#ffffff", "--secondary-cta": "#1a1a1a", "--accent": "#737373", "--background-accent": "#737373", "--primary-cta-text": "#0a0a0a", "--secondary-cta-text": "#ffffff" +}; export default function LandingPage() { const [isDarkMode, setIsDarkMode] = useState(false); @@ -32,6 +38,106 @@ export default function LandingPage() { }); }; + useEffect(() => { + // Initialize GSAP animations + gsap.utils.toArray("[data-section]").forEach((section) => { + // Fade in on scroll + gsap.from(section, { + opacity: 0, + duration: 0.8, + scrollTrigger: { + trigger: section, + start: "top 80%", end: "top 20%", scrub: 1, + markers: false + } + }); + + // Parallax effect on hero + if (section.id === "hero") { + gsap.to(section, { + y: 50, + duration: 0.5, + scrollTrigger: { + trigger: section, + start: "top center", end: "bottom center", scrub: 0.5, + markers: false + } + }); + } + }); + + // Animate hero title and description with stagger + gsap.from("#hero h1, #hero p", { + opacity: 0, + y: 30, + duration: 0.8, + stagger: 0.2, + delay: 0.3 + }); + + // Button hover effects + const buttons = document.querySelectorAll("button[class*='button']"); + buttons.forEach((button) => { + button.addEventListener("mouseenter", () => { + gsap.to(button, { + scale: 1.05, + duration: 0.3, + overwrite: "auto" + }); + }); + button.addEventListener("mouseleave", () => { + gsap.to(button, { + scale: 1, + duration: 0.3, + overwrite: "auto" + }); + }); + }); + + // Animate metric cards with scroll trigger + gsap.from("[class*='metric']", { + opacity: 0, + scale: 0.8, + duration: 0.6, + stagger: 0.1, + scrollTrigger: { + trigger: "#metrics", start: "top 80%", end: "top 20%", scrub: 1, + markers: false + } + }); + + // Animate testimonial cards + gsap.from("[class*='testimonial']", { + opacity: 0, + x: -30, + duration: 0.6, + stagger: 0.15, + scrollTrigger: { + trigger: "#testimonials", start: "top 80%", end: "top 20%", scrub: 0.5, + markers: false + } + }); + + // Text reveal effect on section titles + gsap.utils.toArray("[data-section] h2, [data-section] h3").forEach((heading) => { + gsap.from(heading, { + opacity: 0, + y: 20, + duration: 0.6, + scrollTrigger: { + trigger: heading, + start: "top 90%", end: "top 70%", scrub: 0.3, + markers: false + } + }); + }); + + // Cleanup + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, []); + return (