// Problem section + What QTG builds (system diagram) + Modular architecture const ProblemSection = () => { const ref = React.useRef(null); const [inView, setInView] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0, rootMargin: '0px 0px -10% 0px' }); io.observe(el); return () => io.disconnect(); }, []); return (
THE PROBLEM

Trading businesses are scaling faster than their infrastructure.

Operators run on disconnected tools — separate CRMs, risk dashboards, payout sheets, and support tickets. Every new product line adds another vendor, another export, another reconciliation job. QTG replaces that fragmentation with one connected operating environment.

); }; const FragmentedColumn = ({ inView }) => { const tools = [ {n:'Spreadsheet · Payouts', t:'manual'}, {n:'Generic CRM · Traders', t:'no-trader-context'}, {n:'Email · Risk alerts', t:'lossy'}, {n:'Vendor A · Challenges', t:'siloed'}, {n:'Vendor B · Reporting', t:'export-only'},{n:'Slack · Support triage', t:'untracked'}, {n:'Vendor C · KYC', t:'reconciled-by-hand'},{n:'Sheet · Affiliate splits', t:'manual'}, ]; return (
BEFORE · FRAGMENTED STACK
{tools.map((t,i)=>{ const baseRot = (i%3-1)*0.4; return (
{t.n}
{t.t}
); })}
HIGH FRICTION Reconciliation runs nightly. Risk sees yesterday's data.
); }; const UnifiedColumn = ({ inView }) => { const blocks = [ {n:'Operations', d:'Traders · Accounts · Workflows'}, {n:'Risk', d:'QuantSentry · Rules · Alerts'}, {n:'Payments', d:'Payouts · Providers · Reconciliation'}, {n:'Automation', d:'AI agents · Triage · Reporting'}, {n:'Analytics', d:'BI · Dashboards · Cohorts'}, {n:'Support', d:'Tickets · Escalation · SLA'}, ]; return (
AFTER · QTG INFRASTRUCTURE
ONE CONNECTED ENVIRONMENT
{blocks.map((b,i)=>(
{b.n}
{b.d}
))}
REAL-TIME Operations, Risk, and Payouts Share One Source of Truth.
); }; const ArrowDivider = ({ inView }) => { // Five fragmented inputs fan in from the left, converge into one glowing // core, and leave as a single clean stream on the right. const NODE = { x: 70, y: 88 }; const ins = [ { p: 'M2 16 C 36 16, 44 88, 70 88', dur: 2.3, begin: 0.0, w: 1 }, { p: 'M2 52 C 38 52, 50 88, 70 88', dur: 1.9, begin: 0.7, w: 1 }, { p: 'M2 88 L 70 88', dur: 1.6, begin: 0.35, w: 1.2 }, { p: 'M2 124 C 38 124, 50 88, 70 88', dur: 2.1, begin: 1.05, w: 1 }, { p: 'M2 160 C 36 160, 44 88, 70 88', dur: 2.5, begin: 0.45, w: 1 }, ]; const outPath = 'M70 88 L 150 88'; return ( {/* faint base wires for every input */} {ins.map((s,i)=>( ))} {/* animated dashed energy flowing along each input */} {inView && ins.map((s,i)=>( ))} {/* travelling packets that get absorbed into the core */} {inView && ins.map((s,i)=>( ))} {/* convergence core */} {/* single clean output stream */} {inView && ( <> )} ); }; // ===== ARCHITECTURE DIAGRAM ===== const ArchitectureSection = () => (
WHAT WE BUILD

Modular technology that connects every layer of a trading business.

Each module operates independently, or composes into the broader QTG environment. Adopt one platform today — the rest plug in without re-platforming.

); const ArchitectureDiagram = () => { // Three-layer stack const layers = [ {label:'CHANNELS', items:['Trader portals','Admin dashboards','Mobile apps','Partner portals','Public APIs']}, {label:'PLATFORMS', items:['YourPropFirm','Broker Infrastructure','QuantSentry','QuantCX','TradoPay','PropTradeGroup'], accent:true}, {label:'COMPONENTS', items:['Prop CRM','Broker CRM','Risk & Rule Engine','AI Agents','BI & Reporting','Affiliate · IB','Trading Journal','Loyalty','Competitions']}, {label:'INFRASTRUCTURE', items:['Identity','Event bus','Audit log','Observability','Data plane','Integrations']}, ]; const ref = React.useRef(null); const [shown, setShown] = React.useState(false); // Hot chip per layer (rotates). const [hot, setHot] = React.useState(layers.map(() => -1)); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }); }, { threshold: 0.18 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (!shown) return; // Wait until cascade settles, then start pulses. const startDelay = setTimeout(() => { const id = setInterval(() => { setHot(prev => prev.map((_, li) => { const len = layers[li].items.length; // ~70% chance each layer has a hot chip, otherwise -1. return Math.random() < 0.7 ? Math.floor(Math.random() * len) : -1; })); }, 850); // Stash interval id on ref so cleanup works. ref.current.__pulseId = id; }, 1500); return () => { clearTimeout(startDelay); if (ref.current && ref.current.__pulseId) { clearInterval(ref.current.__pulseId); } }; }, [shown]); return (
{layers.map((l,i)=>(
{l.label}
{l.items.map((it,j)=>{ const isHot = hot[i] === j; const baseBorder = l.accent?'var(--line-stronger)':'var(--line)'; const baseBg = l.accent?'rgba(255,255,255,0.025)':'transparent'; const baseColor = l.accent?'var(--text)':'var(--text-2)'; const dotBase = l.accent?'var(--accent)':'var(--text-4)'; return (
{it}
); })}
))}
); }; Object.assign(window, { ProblemSection, ArchitectureSection });