// DSS Industria — Hero Section with typing animation const { useState, useEffect, useRef } = React; function AgentTrace() { const lines = window.DSS.hero.traceLines; const [shown, setShown] = useState(0); // complete lines shown const [chars, setChars] = useState(0); // chars of current line const [phase, setPhase] = useState('typing'); // typing | pause | fade const [faded, setFaded] = useState(false); useEffect(() => { let timer; if (phase === 'fade') { setFaded(true); timer = setTimeout(() => { setShown(0); setChars(0); setFaded(false); setPhase('typing'); }, 700); return () => clearTimeout(timer); } if (phase === 'pause') { timer = setTimeout(() => setPhase('fade'), 2800); return () => clearTimeout(timer); } // typing const cur = lines[shown]; if (!cur) { setPhase('pause'); return; } if (chars < cur.text.length) { timer = setTimeout(() => setChars(c => c + 1), 22); } else { timer = setTimeout(() => { setShown(s => s + 1); setChars(0); }, 160); } return () => clearTimeout(timer); }, [phase, shown, chars]); return (
{/* Terminal header */}
{['#FF5F56','#FFBD2E','#27C93F'].map((c, i) => (
))}
DSS Agent — Supplier Evaluation
running
{/* Lines */}
{lines.map((line, i) => { const isComplete = i < shown; const isCurrent = i === shown && phase === 'typing'; const isVisible = isComplete || isCurrent; if (!isVisible) return null; const displayText = isComplete ? line.text : line.text.slice(0, chars); return (
{line.role} {displayText} {isCurrent && ▌}
); })}
); } function DSSHero() { const d = window.DSS.hero; return (
{/* Background blobs */}
{/* Left: copy */}
{d.eyebrow}

{d.h1}

{d.sub}

{/* Trust strip */}
{d.trustStrip.split(' · ').map((item, i, arr) => ( {item} {i < arr.length - 1 && ·} ))}
{/* Right: agent trace */}
); } Object.assign(window, { DSSHero });