"use client"; import React, { useEffect, useRef, useState } from "react"; import { ArrowDown } from "lucide-react"; import Lenis from "lenis"; function TypewriterText({ text, speed = 80, delay = 0 }: { text: string; speed?: number; delay?: number }) { const [displayedText, setDisplayedText] = useState(""); const [complete, setComplete] = useState(false); useEffect(() => { let timeoutId: NodeJS.Timeout | undefined; let index = 0; const startTyping = () => { const intervalId = setInterval(() => { if (index < text.length) { setDisplayedText(text.slice(0, index + 1)); index++; } else { clearInterval(intervalId); setComplete(true); } }, speed); return intervalId; }; let typingIntervalId: NodeJS.Timeout | undefined; if (delay > 0) { timeoutId = setTimeout(() => { typingIntervalId = startTyping(); }, delay); } else { typingIntervalId = startTyping(); } return () => { if (timeoutId) clearTimeout(timeoutId); if (typingIntervalId) clearInterval(typingIntervalId); }; }, [text, speed, delay]); return ( {displayedText} {!complete && ( )} ); } export default function WebsiteAnalysisHeaderAutoai({ className }: { className?: string }) { const containerRef = useRef(null); const videoRef = useRef(null); const targetProgressRef = useRef(0); const currentProgressRef = useRef(0); const pendingSeekTimeRef = useRef(null); const rafIdRef = useRef(null); const [isVideoLoaded, setIsVideoLoaded] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const slowProgressRef = useRef(0); const leftOverlayRef = useRef(null); const bottomLeftRef = useRef(null); const rightOverlayRef = useRef(null); const scrollHelperRef = useRef(null); const cinematicContainerRef = useRef(null); const readyForBoostRef = useRef(null); const cinematicLines = [ "Launch with confidence.", "Our intelligent AI agent scans your website,", "uncovers hidden issues, identifies growth opportunities,", "and provides expert-level recommendations", "to improve user experience, increase conversions,", "and maximize performance—all within minutes." ]; const logoBoxStyle: React.CSSProperties = { display: "flex", padding: "10px 15px", alignItems: "center", gap: "6px", borderRadius: "8px", border: "1px solid #404040", background: "#252424", }; const logoStyle: React.CSSProperties = { width: "22px", height: "22px", aspectRatio: "1/1", filter: "drop-shadow(-6.583px 8.229px 6.584px rgba(0, 0, 0, 0.10)) drop-shadow(-12.07px 14.264px 7.681px rgba(0, 0, 0, 0.03))", color: "#FFF", }; const logoTypographyStyle: React.CSSProperties = { color: "#FFF", fontFamily: '"Cabinet Grotesk", sans-serif', fontSize: "18px", fontStyle: "normal", fontWeight: 700, lineHeight: "16px", }; const menuStyle: React.CSSProperties = { display: "flex", padding: "14px", alignItems: "center", gap: "6px", borderRadius: "8px", border: "1px solid #404040", background: "#252424", cursor: "pointer", }; const iconStyle: React.CSSProperties = { display: "flex", width: "22px", flexDirection: "column", alignItems: "flex-start", gap: "4px", }; const buttonStyle: React.CSSProperties = { display: "flex", padding: "14px 20px", alignItems: "center", gap: "6px", borderRadius: "8px", border: "1px solid #404040", background: "#FFF", cursor: "pointer", transition: "transform 0.2s ease, opacity 0.2s ease", }; const buttonTypographyStyle: React.CSSProperties = { color: "#0B3A17", fontFamily: '"Cabinet Grotesk", sans-serif', fontSize: "18px", fontStyle: "normal", fontWeight: 700, lineHeight: "16px", }; const headingLeftStyle: React.CSSProperties = { width: "100%", maxWidth: "352px", color: "#FFF", fontFamily: '"Chakra Petch", sans-serif', fontSize: "clamp(34px, 9vw, 69px)", fontStyle: "normal", fontWeight: "normal", lineHeight: "clamp(36px, 9vw, 69px)", }; const headingRightStyle: React.CSSProperties = { width: "100%", maxWidth: "264px", color: "#FFF", fontFamily: '"Chakra Petch", sans-serif', fontSize: "clamp(34px, 9vw, 69px)", fontStyle: "normal", fontWeight: 300, lineHeight: "clamp(36px, 9vw, 69px)", }; const paragraphStyle: React.CSSProperties = { width: "100%", maxWidth: "310px", color: "#9F9F9F", fontFamily: "Inter, sans-serif", fontSize: "clamp(15px, 4.5vw, 20px)", fontStyle: "normal", fontWeight: 400, lineHeight: "clamp(22px, 5.5vw, 26px)", }; useEffect(() => { if (typeof window === "undefined") return; const lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), orientation: "vertical", gestureOrientation: "vertical", smoothWheel: true, wheelMultiplier: 1, touchMultiplier: 1.5, infinite: false, }); let lastTime: number | null = null; const handleScroll = () => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const totalScrollableHeight = rect.height - window.innerHeight; if (totalScrollableHeight <= 0) return; const scrolledOffset = -rect.top; const progress = Math.max(0, Math.min(1, scrolledOffset / totalScrollableHeight)); targetProgressRef.current = progress; }; const updateLoop = (time: number) => { lenis.raf(time); if (lastTime === null) { lastTime = time; } const dt = Math.min(0.1, (time - lastTime) / 1000); lastTime = time; const target = targetProgressRef.current; const current = currentProgressRef.current; const diff = target - current; const lerpFactor = 1 - Math.exp(-4.5 * dt); let step = diff * lerpFactor; const maxSpeed = 0.45; const maxStep = maxSpeed * dt; if (step > maxStep) { step = maxStep; } else if (step < -maxStep) { step = -maxStep; } const nextProgress = Math.max(0, Math.min(1, current + step)); currentProgressRef.current = nextProgress; const currentSlow = slowProgressRef.current; const diffSlow = target - currentSlow; const lerpFactorSlow = 1 - Math.exp(-2.2 * dt); let stepSlow = diffSlow * lerpFactorSlow; const maxSpeedSlow = 0.30; const maxStepSlow = maxSpeedSlow * dt; if (stepSlow > maxStepSlow) { stepSlow = maxStepSlow; } else if (stepSlow < -maxStepSlow) { stepSlow = -maxStepSlow; } const nextSlowProgress = Math.max(0, Math.min(1, currentSlow + stepSlow)); slowProgressRef.current = nextSlowProgress; const opacityVal = Math.max(0, Math.min(1, (0.58 - nextProgress) / 0.13)); if (leftOverlayRef.current) { leftOverlayRef.current.style.opacity = String(opacityVal); leftOverlayRef.current.style.pointerEvents = opacityVal > 0.05 ? "auto" : "none"; } if (bottomLeftRef.current) { bottomLeftRef.current.style.opacity = String(opacityVal); bottomLeftRef.current.style.pointerEvents = opacityVal > 0.05 ? "auto" : "none"; } if (rightOverlayRef.current) { rightOverlayRef.current.style.opacity = String(opacityVal); rightOverlayRef.current.style.pointerEvents = opacityVal > 0.05 ? "auto" : "none"; } const scrollHelperOpacity = Math.max(0, Math.min(1, (0.52 - nextProgress) / 0.10)) * 0.6; if (scrollHelperRef.current) { scrollHelperRef.current.style.opacity = String(scrollHelperOpacity); scrollHelperRef.current.style.pointerEvents = scrollHelperOpacity > 0.05 ? "auto" : "none"; } const cinematicWrapper = cinematicContainerRef.current; if (cinematicWrapper) { if (nextProgress >= 0.45) { cinematicWrapper.style.display = "flex"; const cinematicProgress = Math.max(0, Math.min(1, (nextSlowProgress - 0.48) / 0.52)); const innerLines = cinematicWrapper.querySelector(".cinematic-lines-inner") as HTMLDivElement | null; if (innerLines) { const children = Array.from(innerLines.children) as HTMLDivElement[]; const isMobile = window.innerWidth < 768; const startY = isMobile ? 180 : 360; const travelDist = isMobile ? 750 : 1350; const lineGap = isMobile ? 85 : 140; const blurFactor = isMobile ? 50 : 90; const opacityFactor = isMobile ? 120 : 220; const scaleFactor = isMobile ? 200 : 350; children.forEach((el, i) => { const Y_i = startY - cinematicProgress * travelDist + (i * lineGap); const dist = Math.abs(Y_i); const blurVal = Math.min(5, dist / blurFactor); const lineOpacityVal = Math.max(0, Math.min(1, 1.8 - dist / opacityFactor)); const scaleVal = 0.95 + (1 - Math.min(1, dist / scaleFactor)) * 0.05; const rotateXVal = Y_i * 0.08; const translateZVal = -dist * 0.7; el.style.transform = "rotateX(" + rotateXVal + "deg) translateZ(" + translateZVal + "px) translateY(" + Y_i + "px) scale(" + scaleVal + ")"; el.style.filter = "blur(" + blurVal + "px)"; el.style.opacity = String(lineOpacityVal); }); } } else { cinematicWrapper.style.display = "none"; } } const boostEl = readyForBoostRef.current; if (boostEl) { if (nextSlowProgress >= 0.80) { boostEl.style.display = "flex"; const liftoffProgress = Math.max(0, Math.min(1, (nextSlowProgress - 0.82) / 0.16)); const liftoffY = 120 - liftoffProgress * 120; const liftoffBlur = Math.min(10, (1 - liftoffProgress) * 15); const liftoffOpacity = Math.max(0, Math.min(1, liftoffProgress)); const liftoffScale = 0.92 + liftoffProgress * 0.08; const rotateXVal = (1 - liftoffProgress) * 15; const translateZVal = (1 - liftoffProgress) * -150; const inner = boostEl.querySelector(".ready-for-boost-inner") as HTMLDivElement | null; if (inner) { inner.style.transform = "rotateX(" + rotateXVal + "deg) translateZ(" + translateZVal + "px) translateY(" + liftoffY + "px) scale(" + liftoffScale + ")"; inner.style.filter = "blur(" + liftoffBlur + "px)"; inner.style.opacity = String(liftoffOpacity); } } else { boostEl.style.display = "none"; } } const video = videoRef.current; if (video && isVideoLoaded && video.readyState >= 1 && !isNaN(video.duration) && video.duration > 0) { const targetTime = nextProgress * video.duration; if (!video.seeking) { if (Math.abs(video.currentTime - targetTime) > 0.01) { video.currentTime = targetTime; } } else { pendingSeekTimeRef.current = targetTime; } } rafIdRef.current = requestAnimationFrame(updateLoop); }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); rafIdRef.current = requestAnimationFrame(updateLoop); return () => { window.removeEventListener("scroll", handleScroll); if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current); } lenis.destroy(); }; }, [isVideoLoaded]); const handleLoadedMetadata = () => { setIsVideoLoaded(true); if (videoRef.current) { videoRef.current.currentTime = 0; } }; const handleSeeked = () => { const video = videoRef.current; if (video && pendingSeekTimeRef.current !== null) { const nextTime = pendingSeekTimeRef.current; pendingSeekTimeRef.current = null; video.currentTime = nextTime; } }; return ( <>