'use client'; import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { gsap, useGSAP, syncLenisScrollTrigger } from '../story/gsapkit'; import { Ico } from '../story/Ico'; const INK = '#0a0a0a'; const BLUE = '#2F6BFF'; const NAV = [ { title: 'Earn', color: '#C8FF37', // lime links: [ { label: 'Walk to Earn', href: '#how-it-works' }, { label: 'Play & Win', href: '#how-it-works' }, { label: 'Refer Friends', href: '#how-it-works' }, ], }, { title: 'Spend', color: '#FF2E88', // pink links: [ { label: 'The Difference', href: '#difference' }, { label: 'How It Works', href: '#how-it-works' }, { label: 'The Loop', href: '#the-loop' }, ], }, { title: 'Live', color: '#8B3DFF', // purple links: [ { label: 'The Vision', href: '#the-vision' }, { label: 'The Why', href: '#the-why' }, { label: 'Our Belief', href: '#our-belief' }, ], }, ]; const SOCIALS = [ { label: 'Instagram', href: 'https://instagram.com/lytsup', bg: '#FF2E88', icon: , }, { label: 'X / Twitter', href: 'https://twitter.com/lytsup', bg: '#8B3DFF', icon: , }, { label: 'YouTube', href: 'https://www.youtube.com/@lytsup', bg: '#FF6B35', icon: , }, ]; /* Kinetic ticker phrases + the giant wordmark letters */ const TICKER = ['Earn', 'Spend', 'Live More', 'Make Everyday Count', 'Join The Loop', 'Real Value']; function Star({ size = 22, color = INK }: { size?: number; color?: string }) { return ( ); } export default function Footer() { const [showScroll, setShowScroll] = useState(false); const rootRef = useRef(null); useEffect(() => { const onScroll = () => setShowScroll(window.scrollY > 400); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useGSAP( () => { syncLenisScrollTrigger(); const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!reduce) { /* Continuous continuous animations */ gsap.to('.foot-ticker-track', { xPercent: -50, duration: 22, ease: 'none', repeat: -1 }); gsap.to('.foot-cta-star-spin', { rotate: 360, duration: 9, ease: 'none', repeat: -1 }); /* ── 3D Sticker Fold-Out & Stamp Burst Reveal for Footer CTA Banner ── */ gsap.set('.lu-cta', { transformStyle: 'preserve-3d', transformOrigin: '50% 100%', rotationX: 35, rotationY: -10, scale: 0.85, y: 70, autoAlpha: 0, boxShadow: '0 40px 80px rgba(0,0,0,0.4)', }); gsap.set('.foot-cta-star', { scale: 0, rotation: -180, autoAlpha: 0 }); gsap.set('.lu-cta-pill', { y: -25, autoAlpha: 0 }); gsap.set('.lu-cta-heading', { y: 30, rotationX: -40, autoAlpha: 0 }); gsap.set('.lu-cta-btn', { scale: 0.6, rotationZ: -12, autoAlpha: 0 }); gsap.set('.lu-columns > *', { y: 40, autoAlpha: 0 }); const tl = gsap.timeline({ scrollTrigger: { trigger: '.lu-cta-wrap', start: 'top 78%', once: true, }, defaults: { ease: 'power3.out' }, }); /* Phase 1: Card Unfolds from 3D Stack */ tl.to('.lu-cta', { rotationX: 0, rotationY: 0, scale: 1, y: 0, autoAlpha: 1, boxShadow: '8px 8px 0 0 #0a0a0a', duration: 0.85, ease: 'back.out(1.5)', onComplete: () => { gsap.set('.lu-cta', { clearProps: 'transform,transformStyle' }); }, }) /* Phase 2: Pink Star Pops Out from Top Corner */ .to( '.foot-cta-star', { scale: 1, rotation: 0, autoAlpha: 1, duration: 0.5, ease: 'back.out(2)', }, '-=0.4' ) /* Phase 3: Purple Pill Tag Drops Down */ .to( '.lu-cta-pill', { y: 0, autoAlpha: 1, duration: 0.4, ease: 'back.out(1.8)', }, '-=0.3' ) /* Phase 4: Heading 3D Unrolls */ .to( '.lu-cta-heading', { y: 0, rotationX: 0, autoAlpha: 1, duration: 0.55, ease: 'power4.out', }, '-=0.3' ) /* Phase 5: Yellow Download Button Stamps On */ .to( '.lu-cta-btn', { scale: 1, rotationZ: 0, autoAlpha: 1, duration: 0.5, ease: 'back.out(2.2)', }, '-=0.35' ) /* Phase 6: Footer columns cascade in */ .to( '.lu-columns > *', { y: 0, autoAlpha: 1, duration: 0.6, stagger: 0.1, ease: 'power3.out', }, '-=0.2' ); } }, { scope: rootRef }, ); return ( <> {/* Scroll-to-top — neobrutalist */} ); }