/* ───────────────────────────────────────────────────────────────── CorpSol — app shell (header, footer, modal, useT, helpers) ───────────────────────────────────────────────────────────────── */ // ── useT — re-render on language change ───────────────────────────────────── function useT() { const [, force] = React.useReducer((x) => x + 1, 0); React.useEffect(() => window.i18n.subscribe(() => force()), []); return window.i18n.t; } // ── Theme / typography / palette / radius / density driver ───────────────── function applyTokens(t) { const root = document.documentElement; root.setAttribute('data-theme', t.dark ? 'dark' : 'light'); root.setAttribute('data-density', t.density || 'regular'); root.setAttribute('data-radius', t.radius || 'rounded'); // font family const fonts = { manrope: "'Manrope', system-ui, sans-serif", inter: "'Inter', system-ui, sans-serif", space: "'Space Grotesk', system-ui, sans-serif", }; const fontDisplay = { manrope: "'Manrope', system-ui, sans-serif", inter: "'Inter Tight', 'Inter', system-ui, sans-serif", space: "'Space Grotesk', system-ui, sans-serif", }; root.style.setProperty('--font-body', fonts[t.font] || fonts.manrope); root.style.setProperty('--font-display', fontDisplay[t.font] || fontDisplay.manrope); // palette const palettes = { navy: { '--c-ink': '#0A1F44', '--c-ink-2': '#1a2a4e', '--c-mute': 'rgba(10, 31, 68, 0.58)', '--c-mute-2': 'rgba(10, 31, 68, 0.72)', '--c-faint': 'rgba(10, 31, 68, 0.36)', '--c-line': 'rgba(10, 31, 68, 0.08)', '--c-line-strong': 'rgba(10, 31, 68, 0.14)', '--c-accent': '#2563EB', '--c-accent-2': '#1d4ed8', '--c-accent-soft': 'rgba(37, 99, 235, 0.10)', }, royal: { '--c-ink': '#001E5C', '--c-ink-2': '#0a2e75', '--c-mute': 'rgba(0, 30, 92, 0.58)', '--c-mute-2': 'rgba(0, 30, 92, 0.74)', '--c-faint': 'rgba(0, 30, 92, 0.36)', '--c-line': 'rgba(0, 30, 92, 0.08)', '--c-line-strong': 'rgba(0, 30, 92, 0.16)', '--c-accent': '#3B82F6', '--c-accent-2': '#2563EB', '--c-accent-soft': 'rgba(59, 130, 246, 0.12)', }, teal: { '--c-ink': '#0F172A', '--c-ink-2': '#1e293b', '--c-mute': 'rgba(15, 23, 42, 0.6)', '--c-mute-2': 'rgba(15, 23, 42, 0.74)', '--c-faint': 'rgba(15, 23, 42, 0.36)', '--c-line': 'rgba(15, 23, 42, 0.08)', '--c-line-strong': 'rgba(15, 23, 42, 0.16)', '--c-accent': '#06B6D4', '--c-accent-2': '#0891B2', '--c-accent-soft': 'rgba(6, 182, 212, 0.12)', }, mono: { '--c-ink': '#0B0B0F', '--c-ink-2': '#1c1c24', '--c-mute': 'rgba(11, 11, 15, 0.62)', '--c-mute-2': 'rgba(11, 11, 15, 0.78)', '--c-faint': 'rgba(11, 11, 15, 0.36)', '--c-line': 'rgba(11, 11, 15, 0.08)', '--c-line-strong': 'rgba(11, 11, 15, 0.16)', '--c-accent': '#1E40AF', '--c-accent-2': '#1e3a8a', '--c-accent-soft': 'rgba(30, 64, 175, 0.10)', }, }; const pal = palettes[t.palette] || palettes.navy; Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v)); } // ── Tweaks defaults — shared across all pages ────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "dark": false, "font": "manrope", "palette": "navy", "density": "regular", "radius": "rounded", "hero": "split" }/*EDITMODE-END*/; // ── Brand mark ────────────────────────────────────────────────────────────── function Logo({ size = 28 }) { const h = Math.round(size * 1.5); return ( CorpSol ); } // ── Lang switcher ────────────────────────────────────────────────────────── function LangSwitch({ compact = false }) { const [lang, setLang] = React.useState(window.i18n.getLang()); React.useEffect(() => window.i18n.subscribe((l) => setLang(l)), []); const labels = { ru: 'RU', kz: 'ҚАЗ', en: 'EN' }; return (
{window.i18n.langs().map((l) => ( ))}
); } // ── Header ───────────────────────────────────────────────────────────────── function Header({ current = 'home', onOpenModal }) { const t = useT(); const [scrolled, setScrolled] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const [svcOpen, setSvcOpen] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 12); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); React.useEffect(() => { document.body.style.overflow = mobileOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [mobileOpen]); const nav = [ { key: 'services', label: t('nav.services'), dropdown: [ { label: t('nav.services.leadgen'), href: '/#services' }, { label: t('nav.services.callbase'), href: '/#services' }, { label: t('nav.services.pharma'), href: '/#services' }, { label: t('nav.services.webinars'), href: '/#services' }, ] }, { key: 'quanta', label: t('nav.quanta'), href: 'https://omnivoice.tilda.ws/#rightsld', external: true }, { key: 'insight', label: t('nav.insight'), href: 'https://insightlab.kz', external: true }, { key: 'team', label: t('nav.team'), href: '/team' }, { key: 'contacts', label: t('nav.contacts'), href: '/contacts' }, ]; return ( <>
{t('nav.phone')}
{mobileOpen && (
{t('nav.services')} {t('nav.quanta')} {t('nav.insight')} {t('nav.team')} {t('nav.contacts')}
{ setMobileOpen(false); onOpenModal(); }}> {t('nav.cp')}
)} ); } const HeaderStyles = () => ( ); // ── Footer ───────────────────────────────────────────────────────────────── function Footer({ onOpenModal }) { const t = useT(); return ( ); } // ── Modal: «Получить КП» — двухшаговая форма ─────────────────────────────── function CpModal({ open, onClose }) { const t = useT(); const [step, setStep] = React.useState(1); const [form, setForm] = React.useState({ name: '', phone: '', company: '', sphere: '', services: [], }); const [errors, setErrors] = React.useState({}); const [done, setDone] = React.useState('idle'); // idle | loading | success | error React.useEffect(() => { if (open) { setStep(1); setErrors({}); setDone('idle'); setForm({ name: '', phone: '', company: '', sphere: '', services: [] }); } document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); React.useEffect(() => { if (!open) return; const onKey = (e) => e.key === 'Escape' && onClose(); document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; const setField = (k, v) => setForm((f) => ({ ...f, [k]: v })); const toggleSvc = (s) => setForm((f) => ({ ...f, services: f.services.includes(s) ? f.services.filter((x) => x !== s) : [...f.services, s], })); const validate1 = () => { const e = {}; if (!form.name.trim()) e.name = t('err.required'); const phoneClean = form.phone.replace(/[\s()\-+]/g, ''); if (!form.phone.trim()) e.phone = t('err.required'); else if (phoneClean.length < 10 || !/^\d+$/.test(phoneClean)) e.phone = t('err.phone'); if (!form.company.trim()) e.company = t('err.required'); setErrors(e); return Object.keys(e).length === 0; }; const submit = (e) => { e.preventDefault(); if (step === 1) { if (validate1()) setStep(2); return; } setDone('loading'); fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), }) .then((r) => (r.ok ? setDone('success') : setDone('error'))) .catch(() => setDone('error')); }; const svcOptions = [ { k: 'lead', label: t('cta.svc.lead') }, { k: 'call', label: t('cta.svc.call') }, { k: 'custdev', label: t('cta.svc.custdev') }, { k: 'ai', label: t('cta.svc.ai') }, { k: 'other', label: t('cta.svc.other') }, ]; return (
e.target === e.currentTarget && onClose()}>
{done === 'success' ? (

{t('cta.thanks.t')}

{t('cta.thanks.d')}

) : done === 'error' ? (

Что-то пошло не так

Пожалуйста, позвоните нам или напишите в Telegram — мы ответим в течение 15 минут.

) : (
= 1 ? 'is-on' : '')}>1
= 2 ? 'is-on' : '')}>2

{t('cta.h2')}

{t('cta.sub')}

{step === 1 && (
setField('name', e.target.value)} placeholder="Айгерим" /> {errors.name &&
{errors.name}
}
setField('phone', e.target.value)} placeholder="+7 (___) ___-__-__" /> {errors.phone &&
{errors.phone}
}
setField('company', e.target.value)} placeholder="Astana Tech LLP" /> {errors.company &&
{errors.company}
}
setField('sphere', e.target.value)} placeholder="SaaS / Fintech / Retail…" />
)} {step === 2 && (
{svcOptions.map((s) => ( ))}
)}
{step === 2 && ( )}

{t('cta.policy')}

)}
); } // ── ModalProvider — global modal state + opener ──────────────────────────── function useModal() { const [open, setOpen] = React.useState(false); return { open, openModal: () => setOpen(true), closeModal: () => setOpen(false) }; } // ── Scroll reveal ────────────────────────────────────────────────────────── function useReveal() { React.useEffect(() => { const observe = () => { const els = document.querySelectorAll('.cs-reveal:not(.is-in)'); if (els.length === 0) return; if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('is-in')); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }); els.forEach((e) => io.observe(e)); }; // Initial pass + a follow-up after layout settles observe(); const id = setTimeout(observe, 200); return () => clearTimeout(id); }, []); } // ── Tweaks panel — shared across pages ───────────────────────────────────── function SiteTweaks({ tweaks, setTweak }) { const t = useT(); return ( setTweak('dark', v)} /> { const map = { '#0a1f44': 'navy', '#001e5c': 'royal', '#0f172a': 'teal', '#0b0b0f': 'mono' }; setTweak('palette', map[String(v[0]).toLowerCase()] || 'navy'); }} /> setTweak('font', v)} /> setTweak('density', v)} /> setTweak('radius', v)} /> setTweak('hero', v)} /> ); } // Minimal useTweaks for production: returns fixed defaults, ignores setTweak. // In the design environment tweaks-panel.jsx overrides this with the full version. if (!window.useTweaks) { window.useTweaks = function useTweaks(defaults) { return [defaults, () => {}]; }; } // expose to other Babel scripts Object.assign(window, { useT, applyTokens, TWEAK_DEFAULTS, Logo, LangSwitch, Header, Footer, CpModal, useModal, useReveal, SiteTweaks, });