From 0c05f9fff93ad2c6cca06c0e186a59c32538a592 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 19 Mar 2026 01:29:27 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 450 +++++++++++++++++++++++++++-------------------- 1 file changed, 257 insertions(+), 193 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 3667aa3..53b483b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,8 +10,70 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni import ContactCTA from '@/components/sections/contact/ContactCTA'; import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; import { Zap, Layers, TrendingUp, Star, Sparkles } from 'lucide-react'; +import { useEffect, useRef } from 'react'; +import gsap from 'gsap'; +import ScrollTrigger from 'gsap/ScrollTrigger'; + +gsap.registerPlugin(ScrollTrigger); export default function LandingPage() { + const gpuContainerRef = useRef(null); + + useEffect(() => { + if (!gpuContainerRef.current) return; + + const sections = gpuContainerRef.current.querySelectorAll('[data-section]'); + const revealElements = gpuContainerRef.current.querySelectorAll('[data-reveal]'); + + // Create a progressive reveal animation timeline + sections.forEach((section, index) => { + gsap.fromTo( + section, + { opacity: 0, y: 50 }, + { + opacity: 1, + y: 0, + duration: 0.8, + ease: 'power2.out', + scrollTrigger: { + trigger: section, + start: 'top 80%', + end: 'top 20%', + scrub: 0.5, + markers: false, + }, + } + ); + }); + + // Add a scroll-triggered GPU "zoom in" effect + const gpuZoomTimeline = gsap.timeline({ + scrollTrigger: { + trigger: gpuContainerRef.current, + start: 'top top', + end: 'bottom bottom', + scrub: 1, + pin: false, + onUpdate: (self) => { + // Progressive scale effect as user scrolls + const progress = self.progress; + revealElements.forEach((el: Element, i: number) => { + const delay = i * 0.15; + const triggerProgress = Math.max(0, progress - delay); + if (triggerProgress > 0) { + (el as HTMLElement).style.opacity = Math.min(triggerProgress * 1.5, 1).toString(); + (el as HTMLElement).style.transform = `scale(${0.8 + triggerProgress * 0.2}) translateZ(0)`; + } + }); + }, + }, + }); + + return () => { + ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); + }; + }, []); + return ( - +
+ -
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
- );