useEffect(() => { const id = "dm-sans-font-v2"; if (!document.getElementById(id)) { const link = document.createElement("link"); link.id = id; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800&family=Azeret+Mono:wght@400;500;700&display=swap"; document.head.appendChild(link); } }, []); const HEADLINE = "One deck. Every purpose. AI builds the rest."; const TAGLINE = "Custom on-brand presentations, built in Minutes."; const URL_TEXT = "devdecks.ai"; const H_LINE1 = "One deck. Every purpose."; const [typed, setTyped] = useState({ h: 0, t: 0, u: 0 }); const [phase, setPhase] = useState(0); const [blink, setBlink] = useState(true); useEffect(() => { const id = setInterval(() => setBlink(b => !b), 500); return () => clearInterval(id); }, []); useEffect(() => { let dead = false; let tid; const type = (len, key, ms, done) => { let i = 0; const go = () => { if (dead) return; i++; setTyped(p => ({ ...p, [key]: i })); if (i < len) tid = setTimeout(go, ms); else tid = setTimeout(() => { if (!dead) done(); }, 240); }; tid = setTimeout(go, ms); }; type(HEADLINE.length, "h", 36, () => { setPhase(1); type(TAGLINE.length, "t", 20, () => { setPhase(2); type(URL_TEXT.length, "u", 55, () => { if (!dead) setPhase(3); }); }); }); return () => { dead = true; clearTimeout(tid); }; }, []); const hText = HEADLINE.slice(0, typed.h); const tText = TAGLINE.slice(0, typed.t); const uText = URL_TEXT.slice(0, typed.u); const l1 = hText.slice(0, Math.min(hText.length, H_LINE1.length)); const l2 = hText.length > H_LINE1.length ? hText.slice(H_LINE1.length) : ""; const hDone = typed.h >= HEADLINE.length; const Cursor = ({ on, color }) => ( ); return (

{/* Teal glow — anchored top-right corner */}

{/* Peach glow — anchored bottom-left corner */}

{/* Bottom accent bar */}

{/* Logo */} Dev Decks

{/* Headline */}

{/* Line 1 — teal */}

{l1} {!hDone && typed.h <= H_LINE1.length && }

{/* Line 2 — orange gradient text */}

0 ? "linear-gradient(90deg, #F09D66 0%, #e07a4a 100%)" : "none", WebkitBackgroundClip: l2.length > 0 ? "text" : "unset", WebkitTextFillColor: l2.length > 0 ? "transparent" : "inherit", backgroundClip: l2.length > 0 ? "text" : "unset", color: l2.length > 0 ? "transparent" : "#F09D66", }}> {l2.length > 0 ? l2 : "\u00A0"} {!hDone && hText.length > H_LINE1.length && }

{/* Tagline */}

= 1 ? 1 : 0, transition: "opacity 0.25s ease", position: "relative", zIndex: 1, }}> {tText}

{/* URL */}

= 2 ? 1 : 0, transition: "opacity 0.25s ease", position: "relative", zIndex: 1, minHeight: "1.8rem", }}> {uText}

);