setPressed(true)} onMouseUp={() => setPressed(false)} onMouseEnter={() => setHover(true)} onMouseLeave={() => {setHover(false);setPressed(false);}} onClick={click} role="button" aria-label={text} style={{ position: 'relative', width, height, flexShrink: 0, cursor: 'pointer', userSelect: 'none' }}> {/* Soft drop shadow pool under the key — gives the 'floating pillow' look */}

{/* Key face — frosted glass */}

{/* specular highlight streak */}

{text}

); } function Keyboard() { // Responsive sizing const [scale, setScale] = React.useState(1); React.useEffect(() => { const compute = () => { const w = window.innerWidth; if (w < 480) setScale(0.55);else if (w < 768) setScale(0.72);else if (w < 1100) setScale(0.85);else setScale(1); }; compute(); window.addEventListener('resize', compute); return () => window.removeEventListener('resize', compute); }, []); // Auto-type animation: types "intgrtr vibecd 2.0" char by char in a terminal // line above, and simultaneously lights up the corresponding key on the keyboard. // Letters scattered across the keyboard — no duplicates. // 2, . and 0 each get their own key. const row1 = ['R', 'T', 'I', 'N', 'G', 'V', 'B']; const row2 = ['E', 'C', 'D', '2', '.', '0']; // Typing order "intgrtr vibecd 2.0" mapped to unique key positions. const sequence = React.useMemo(() => [ { ch: 'i', id: 'r1-2' }, { ch: 'n', id: 'r1-3' }, { ch: 't', id: 'r1-1' }, { ch: 'g', id: 'r1-4' }, { ch: 'r', id: 'r1-0' }, { ch: 't', id: 'r1-1' }, { ch: 'r', id: 'r1-0' }, { ch: ' ', id: null }, { ch: 'v', id: 'r1-5' }, { ch: 'i', id: 'r1-2' }, { ch: 'b', id: 'r1-6' }, { ch: 'e', id: 'r2-0' }, { ch: 'c', id: 'r2-1' }, { ch: 'd', id: 'r2-2' }, { ch: ' ', id: null }, { ch: '2', id: 'r2-3' }, { ch: '.', id: 'r2-4' }, { ch: '0', id: 'r2-5' }], []); const [pressedSet, setPressedSet] = React.useState(() => new Set()); const [typed, setTyped] = React.useState(''); React.useEffect(() => { let cancelled = false; let timers = []; const clearAll = () => {timers.forEach(clearTimeout);timers = [];}; const addTimer = (fn, ms) => {const t = setTimeout(fn, ms);timers.push(t);return t;}; const pressKey = (id) => { if (!id) return; setPressedSet((s) => {const n = new Set(s);n.add(id);return n;}); addTimer(() => { setPressedSet((s) => {const n = new Set(s);n.delete(id);return n;}); }, 180 + Math.random() * 80); }; const loop = () => { if (cancelled) return; setTyped(''); let i = 0; const typeNext = () => { if (cancelled) return; if (i >= sequence.length) { // full string typed — pause, then clear and loop addTimer(() => { if (cancelled) return; setTyped(''); addTimer(loop, 500); }, 1400); return; } const step = sequence[i++]; setTyped((t) => t + step.ch); pressKey(step.id); // pacing: space is a tiny pause, regular char = fast, "2.0" slightly longer const delay = step.ch === ' ' ? 160 : step.ch === '2.0' ? 260 : 90 + Math.random() * 60; addTimer(typeNext, delay); }; typeNext(); }; const start = addTimer(loop, 400); return () => {cancelled = true;clearAll();}; // eslint-disable-next-line }, []); const kb = (n) => Math.round(n * scale); const keyH = kb(62); const gap = kb(8); const unit = kb(62); // standard 1u key width // Actions const scrollTo = (sel) => () => { const el = document.querySelector(sel); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const openTG = () => window.open('https://t.me/ai_mng', '_blank', 'noopener'); // Layout: // Row 1: 7 буквенных клавиш — INTGRTR // Row 2: 6 букв VIBECD + "2.0" (все ширины unit) // Row 3: ПРОГРАММА (wide) + НАЧАТЬ (orange, остаток) const totalRow1 = unit * 7 + gap * 6; const row3Wide = unit * 2.5 + gap * 1.5; const row3Huge = totalRow1 - row3Wide - gap; // Terminal line dimensions — match keyboard width const kbWidth = totalRow1 + kb(44); // inner width + horizontal padding (22*2) return (

{/* Terminal line */}

$ {typed}

{/* inner rim */}

{/* Row 1 */}

{row1.map((ch, i) => { const id = `r1-${i}`; const down = pressedSet.has(id); return ; })}

{/* Row 2 — offset slightly right like a real keyboard stagger */}

{row2.map((ch, i) => { const id = `r2-${i}`; const down = pressedSet.has(id); return ; })}

{/* Row 3 — action keys */}

); } function FinalCTA() { const openTG = () => window.open('https://t.me/ai_mng', '_blank', 'noopener'); return (

ты со мной?

залетаю на обуч

); } function Footer() { const linkStyle = { color: 'var(--fg-dim)', textDecoration: 'underline', textDecorationColor: 'var(--line-2)', textDecorationThickness: '1px', textUnderlineOffset: '3px', transition: 'color .15s, text-decoration-color .15s' }; const onHover = (e, on) => { e.currentTarget.style.color = on ? 'var(--yellow)' : 'var(--fg-dim)'; e.currentTarget.style.textDecorationColor = on ? 'var(--yellow)' : 'var(--line-2)'; }; return ( ); } function StatusBar() { const [t, setT] = React.useState('—'); React.useEffect(() => { const id = setInterval(() => { const d = new Date(); setT(`${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`); }, 1000); return () => clearInterval(id); }, []); return (

● READY | поток #2 | 7/10 мест | UTF-8 Ln 1, Col 1 | {t}

); } Object.assign(window, { FAQSection, FinalCTA, Footer, StatusBar });