From 6bbed4b46e2af865cba5f2f9fce1aad3ad25c519 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 04:55:55 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 112 ++++------------------------------------------- 1 file changed, 8 insertions(+), 104 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 486f2d6..b646dc9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -13,10 +13,6 @@ 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" @@ -28,115 +24,23 @@ const darkTheme = { export default function LandingPage() { const [isDarkMode, setIsDarkMode] = useState(false); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); const theme = isDarkMode ? darkTheme : lightTheme; const toggleTheme = () => { setIsDarkMode(!isDarkMode); - Object.entries(theme).forEach(([key, value]) => { + const newTheme = !isDarkMode ? darkTheme : lightTheme; + Object.entries(newTheme).forEach(([key, value]) => { document.documentElement.style.setProperty(key, value); }); }; - 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()); - }; - }, []); + if (!mounted) return null; return (