// ─── BRAND TOKENS ─────────────────────────────────────────────────────────────
const B = {
blue: '#1E73D8',
cyan: '#2FC7D6',
lcyan: '#57D6C7',
grad: 'linear-gradient(135deg,#1E73D8,#2FC7D6)',
bgW: '#FFFFFF',
bgL: '#F0F7FF',
bgD: '#0B1726',
bgD2: '#0E1C35',
bgFoot: '#070E1A',
tMain: '#0B1726',
tMuted: '#5B7A9B',
border: '#D8E6F2',
shadow: '0 4px 24px rgba(16,63,115,0.09)',
};
window.B = B;
// ─── HOOKS ────────────────────────────────────────────────────────────────────
function useOnScreen(ref, threshold = 0.15) {
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => { if(e.isIntersecting) setVis(true); }, { threshold });
if(ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return vis;
}
window.useOnScreen = useOnScreen;
// ─── ICONS ────────────────────────────────────────────────────────────────────
const Ico = {
Phone: () => ,
Clock: () => ,
Calendar: () => ,
Filter: () => ,
Chart: () => ,
Link: () => ,
Check: () => ,
ArrowR: ({size=14,color='white'}) => ,
Star: () => ,
Mic: () => ,
Shield: () => ,
Zap: () => ,
};
window.Ico = Ico;
// ─── ATOMS ────────────────────────────────────────────────────────────────────
// Logo — dark background
function OmniraLogo({ height = 68 }) {
return (
);
}
// Logo — light background
function OmniraLogoColor({ height = 68 }) {
return (
);
}
window.OmniraLogo = OmniraLogo;
window.OmniraLogoColor = OmniraLogoColor;
function Chip({ children, color = B.cyan }) {
return (
{children}
);
}
window.Chip = Chip;
function GBtn({ href='#', onClick, children, variant='primary', size='md', style:extraStyle={}, full=false }) {
const pad = {sm:'11px 24px',md:'14px 30px',lg:'17px 38px'}[size];
const fs = {sm:'13px',md:'14px',lg:'15px'}[size];
const variants = {
primary: {background:B.grad,color:'white',boxShadow:`0 6px 24px rgba(30,115,216,0.4),inset 0 1px 0 rgba(255,255,255,0.2)`},
outline: {background:'transparent',color:'white',border:'1px solid rgba(255,255,255,0.25)'},
white: {background:'white',color:'#0B1726',boxShadow:'0 8px 24px rgba(0,0,0,0.12)'},
light: {background:B.bgL,color:B.tMain,border:`1px solid ${B.border}`},
};
const base = {
position:'relative',overflow:'hidden',display:'inline-flex',alignItems:'center',justifyContent:full?'center':'flex-start',
gap:'8px',fontFamily:'Sora,sans-serif',fontWeight:700,borderRadius:'14px',padding:pad,fontSize:fs,
cursor:'pointer',textDecoration:'none',transition:'transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease, opacity 0.18s ease',
width:full?'100%':'auto',...variants[variant],...extraStyle
};
const up = e => {
e.currentTarget.style.transform = 'translateY(-3px) scale(1.03)';
if(variant==='primary') e.currentTarget.style.boxShadow = `0 14px 36px rgba(30,115,216,0.52),inset 0 1px 0 rgba(255,255,255,0.2)`;
};
const down = e => {
e.currentTarget.style.transform = 'translateY(0) scale(1)';
if(variant==='primary') e.currentTarget.style.boxShadow = `0 6px 24px rgba(30,115,216,0.4),inset 0 1px 0 rgba(255,255,255,0.2)`;
};
const inner = (
<>
{/* shimmer sweep */}
{sub}
}