/* ============== Reveal on scroll ============== */ function Reveal({ children, delay = 0, as: As = "div", className = "", style = {} }) { const ref = React.useRef(null); // Default to visible to avoid blank flashes; only animate-in items below the fold. const [visible, setVisible] = React.useState(true); const [armed, setArmed] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (rect.top >= vh * 0.95) { // Below the fold — start hidden then animate in. setVisible(false); setArmed(true); const io = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) {setVisible(true);io.disconnect();} }), { threshold: 0.05, rootMargin: "0px 0px -5% 0px" } ); io.observe(el); const t = setTimeout(() => setVisible(true), 1500); return () => {io.disconnect();clearTimeout(t);}; } }, []); return ( {children} ); } /* ============== Stroke icons (no lucide CDN — inline svg, 1.25 stroke) ============== */ const I = (paths, vb = "0 0 24 24") => ({ size = 18, color = "currentColor", className = "", style = {} }) => ; const IconArrow = I(<>); const IconArrowUp = I(<>); const IconCheck = I(); const IconPlus = I(<>); const IconMinus = I(); const IconBolt = I(); const IconShield = I(<>); const IconLock = I(<>); const IconServer = I(<>); const IconGlobe = I(<>); const IconBank = I(<>); const IconReceipt = I(<>); const IconUsers = I(<>); const IconChat = I(<>); const IconChart = I(<>); const IconSparkle = I(<>); const IconLayers = I(<>); const IconTelegram = I(<>); const IconKeys = I(<>); const IconAudit = I(<>); /* ============== Logo (ZertekFlow) — original, geometric ============== */ function Logo({ size = 20 }) { return ( ZertekFlow ); } /* ============== Marquee logos (placeholder text logos) ============== */ function LogoMarquee() { const items = [ "Алматы Технолоджи", "ТОО Балтык", "АО ЦентрФинанс", "Astana Group", "ТОО Темiр Жолы", "Karagandy Co.", "ИП Смагулов", "АО Жетысу", "ТОО Каспий Лоджистикс", "Aral Holdings", "ТОО Шёлковый Путь", "Tau Mining"]; const row = [...items, ...items]; return (
{row.map((n, i) => {n} )}
); } /* ============== Animated counter ============== */ function CountUp({ to = 142, duration = 1600, prefix = "", suffix = "" }) { const [val, setVal] = React.useState(0); const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; let raf, started = false; const start = () => { if (started) return; started = true; const t0 = performance.now(); const tick = (t) => { const p = Math.min(1, (t - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(to * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { start(); io.disconnect(); } }); }, { threshold: 0.4 }); io.observe(el); return () => { io.disconnect(); cancelAnimationFrame(raf); }; }, [to, duration]); return {prefix}{val}{suffix}; } /* ============== Hero mockup — Telegram chat + 1C panel ============== */ function HeroMockup() { // Mouse-tilt parallax const wrapRef = React.useRef(null); const onMove = (e) => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(2000px) rotateY(${-14 + x * 6}deg) rotateX(${3 - y * 6}deg)`; }; const onLeave = () => { const el = wrapRef.current; if (!el) return; el.style.transform = "perspective(2000px) rotateY(-14deg) rotateX(3deg)"; }; return (
{/* window chrome */}
zertekflow.app / live
{/* Left: Telegram bot */}
ZertekFlow Bot
online · агент №7
Поступил платёж от ТОО «Ромашка», 1 248 500 ₸. Создать ПКО? Да, и сверь с актом №112 ✓ ПКО №3041 проведён.
Акт №112 совпал на 100%.
0.8 сек · 1С:БК 3.0
 сегодня обработано: операции
агент печатает…
{/* Right: 1C panel */}
БАНК · 04.05.2026
{/* sparkline */}
CASH FLOW · 7d +12.4%
); } function Bubble({ side, children, small }) { const isOut = side === "out"; return (
{children}
); } function Row({ label, sub, amount, ok, live }) { return (
{label}
{sub}
{amount} ₸
); } function Sparkline() { const pts = [8, 12, 9, 14, 11, 18, 16, 22, 19, 26, 24, 30]; const max = Math.max(...pts),min = Math.min(...pts); const w = 220,h = 38; const sx = (i) => i / (pts.length - 1) * w; const sy = (v) => h - (v - min) / (max - min) * h; const d = pts.map((v, i) => `${i === 0 ? "M" : "L"}${sx(i).toFixed(1)} ${sy(v).toFixed(1)}`).join(" "); const fill = `${d} L${w} ${h} L0 ${h} Z`; return ( ); } /* ============== Magnetic button wrapper ============== */ function Magnetic({ children, strength = 8, className = "", style = {} }) { const ref = React.useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const dx = (e.clientX - (r.left + r.width / 2)) / r.width; const dy = (e.clientY - (r.top + r.height / 2)) / r.height; el.style.transform = `translate(${dx * strength}px, ${dy * strength}px)`; }; const onLeave = () => { const el = ref.current; if (!el) return; el.style.transform = "translate(0,0)"; }; return ( {children} ); } /* ============== Export to global ============== */ Object.assign(window, { Reveal, Logo, LogoMarquee, HeroMockup, CountUp, Magnetic, IconArrow, IconArrowUp, IconCheck, IconPlus, IconMinus, IconBolt, IconShield, IconLock, IconServer, IconGlobe, IconBank, IconReceipt, IconUsers, IconChat, IconChart, IconSparkle, IconLayers, IconTelegram, IconKeys, IconAudit });