'use client'; import { useEffect, useRef, useState } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { ArrowRight } from 'lucide-react'; import ASCIIBackground from '../components/ASCIIBackground'; import { PRIMARY_COLOR, PRIMARY_COLOR_HOVER, LANDING_BTN_PRIMARY_PILL } from './landing-constants'; gsap.registerPlugin(ScrollTrigger); const phrases = [ { first: 'Complexity', second: 'Clarity' }, { first: 'Clarity', second: 'Insights' }, { first: 'Insights', second: 'Decisions' }, ]; export default function Hero() { const sectionRef = useRef(null); const contentRef = useRef(null); const ctaRef = useRef(null); const blobRef = useRef(null); const [currentPhraseIndex, setCurrentPhraseIndex] = useState(0); const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null); const firstWordRef = useRef(null); const secondWordRef = useRef(null); const isFirstRenderRef = useRef(true); const handleMouseMove = (e: React.MouseEvent) => { if (!sectionRef.current) return; const rect = sectionRef.current.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; setMousePos({ x, y }); }; const handleMouseLeave = () => { setMousePos(null); }; useEffect(() => { const ctx = gsap.context(() => { gsap.fromTo( contentRef.current, { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.95, ease: 'power3.out' } ); if (blobRef.current) { gsap.fromTo(blobRef.current, { scale: 0.85, opacity: 0 }, { scale: 1, opacity: 1, duration: 1.1, ease: 'power2.out', delay: 0.08 }); } if (ctaRef.current) { const btn = ctaRef.current; btn.addEventListener('mouseenter', () => gsap.to(btn, { scale: 1.02, x: 3, duration: 0.2, ease: 'power2.out' })); btn.addEventListener('mouseleave', () => gsap.to(btn, { scale: 1, x: 0, duration: 0.2, ease: 'power2.out' })); } }, sectionRef); return () => ctx.revert(); }, []); useEffect(() => { if (!firstWordRef.current || !secondWordRef.current) return; const first = firstWordRef.current; const second = secondWordRef.current; if (isFirstRenderRef.current) { isFirstRenderRef.current = false; gsap.set([first, second], { opacity: 1 }); return; } gsap.to([first, second], { opacity: 1, duration: 0.4, ease: 'power2.out', stagger: 0.06, }); }, [currentPhraseIndex]); useEffect(() => { const interval = setInterval(() => { if (!firstWordRef.current || !secondWordRef.current) return; const first = firstWordRef.current; const second = secondWordRef.current; gsap.to([first, second], { opacity: 0, duration: 0.3, ease: 'power2.in', onComplete: () => { setCurrentPhraseIndex((prev) => (prev + 1) % phrases.length); }, }); }, 3200); return () => clearInterval(interval); }, []); return (
{/* Softer overlays so background stays visible */}
{/* Lighter dot grid so ASCII background reads better */}
{/* Content: centered in viewport, responsive padding and spacing */}
{/* Eyebrow */}
{/* Headline — "Turn" / "into" fixed column, each line block so no overlap */}

{phrases[currentPhraseIndex].first} {phrases[currentPhraseIndex].second}

{/* Taglines */}

One dashboard for infinite portfolio intelligence.

Consolidate, visualise and track assets in one place.

{/* CTA */}
); }