// sections.jsx — All homepage sections const { useState, useEffect, useRef } = React; function useInView(threshold = 0.12) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold }); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, visible]; } function useCountUp(target, duration = 1600, started = false) { const [val, setVal] = useState(0); useEffect(() => { if (!started) return; let start = null; const isNum = typeof target === 'number'; if (!isNum) return; const step = (ts) => { if (!start) start = ts; const p = Math.min((ts - start) / duration, 1); const ease = 1 - Math.pow(1 - p, 3); setVal(Math.floor(ease * target)); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }, [started, target, duration]); return val; } function Eyebrow({ children, light }) { return (
{children}
); } // ── Logo SVG ────────────────────────────────────────────────────── // Tight 32×28 viewBox. Solid dot at left, then three concentric arcs. // Each arc is the right-opening half-circle of its radius. Radii grow in // arithmetic 5 → 8 → 11 so the stroke spacing stays visually even. // Anchor x for each arc = (16 - r/2) so they share a center column near // x=16 and read as one tightening wave. Endpoints (cx, cy±r) lie exactly // on each circle so the arc geometry is mathematically clean. function EchoLogo({ size = 28 }) { const w = size * (24 / 28); return ( ); } // (DemoSection removed — demo is now embedded inside the Agents section.) // ── Problem ─────────────────────────────────────────────────────── function StatCard({ prefix = '', value, suffix = '', label, source, started }) { const count = useCountUp(typeof value === 'number' ? value : 0, 1800, started); const isNum = typeof value === 'number'; const display = isNum ? `${prefix}${count.toLocaleString()}${suffix}` : value; return (
{ e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--hairline)'; e.currentTarget.style.transform = 'none'; }} >
{display}
{label}
{source}
); } function Problem() { const [ref, visible] = useInView(0.12); const stats = [ { value: '30K+ / mo', label: 'PODs + BOLs still keyed by hand.', source: 'Regional LTL benchmark' }, { value: '2 days', label: 'POD-to-invoice drag.', source: 'Industry · LTL automation 2025' }, { value: '<50%', label: 'Of detention ever gets paid.', source: 'Industry · detention data' }, { value: '10–15 min', label: 'Per booking re-keyed.', source: 'Carrier ops benchmark' }, ]; return (
The problem

Where time
and money leak.

High-margin operations still run on inbound email, phone calls, and manual TMS entry. Every handoff is a delay or an error.

{stats.map((s, i) => )}
); } // ── Agent glyphs ────────────────────────────────────────────────── const glyphs = { Otis: , Dax: , Ren: , Mira: , }; function AgentCard({ num, name, domain, tagline, outcome, href, delay = 0 }) { const [hovered, setHovered] = useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: 'var(--bg)', border: `1px solid ${hovered ? 'var(--accent)' : 'var(--hairline)'}`, borderRadius: 12, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 16, cursor: 'pointer', textDecoration: 'none', color: 'inherit', transform: hovered ? 'translateY(-3px)' : 'none', boxShadow: hovered ? '0 12px 40px var(--accent-glow)' : 'none', transition: 'all 0.28s cubic-bezier(0.4,0,0.2,1)', }}>
{num} {glyphs[name]}
{domain}
{name}

{tagline}

{outcome}
); } function Agents() { const agents = [ { num: '01 · DOCUMENTS · AR', name: 'Otis', domain: 'Documents & AR', tagline: 'Reads inbound PODs and BOLs, extracts the data, and posts to TruckMate AR instantly.', outcome: 'Every document processed the same shift.', href: 'agents/otis.html' }, { num: '02 · CUSTOMER SERVICE · INTAKE', name: 'Dax', domain: 'Customer Service', tagline: 'Triages inbound customer emails, pulls live rates from TruckMate, and sends quotes in minutes.', outcome: 'Rate quotes out in minutes. Inbox clear.', href: 'agents/dax.html' }, { num: '03 · SCHEDULING · DOCK OPS', name: 'Ren', domain: 'Scheduling & Dock Ops', tagline: 'Takes dock booking requests from Teams or SMS and books them into TruckMate and OpenDock automatically.', outcome: 'Every booking in OpenDock. Automatically.', href: 'agents/ren.html' }, { num: '04 · AR · ACCESSORIAL OPS', name: 'Mira', domain: 'AR & Accessorial', tagline: 'Pulls GPS and timestamp data to substantiate detention and accessorial charges, then submits the package.', outcome: 'Every detention charge documented and billed.', href: 'agents/mira.html' }, ]; return (
Meet the agents

Four agents.
One freight stack.

{ e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; }} onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--hairline)'; }} > All agents
{agents.map((a, i) => )}
); } // ── How It Works ────────────────────────────────────────────────── function HowItWorks() { const steps = [ { tag: 'Step 01 · Connect', title: 'Point Echo at your stack', body: 'Azure AD SSO and read-write TruckMate access, provisioned in your own tenant. Nothing leaves your infrastructure.', items: ['Azure AD / Entra SSO', 'TruckMate API access', 'Azure OpenAI (your tenant)', 'No data egress'], }, { tag: 'Step 02 · Configure', title: 'Assign agents to channels', body: 'Each agent connects to its channel — Teams, SMS, or email. Set escalation rules, approval thresholds, and override controls.', items: ['Teams / SMS / Email', 'Escalation thresholds', 'Human-in-the-loop controls', 'Role-based overrides'], }, { tag: 'Step 03 · Operate', title: 'Atlas keeps watch', body: 'Every agent action is logged and auditable. The Atlas dashboard shows what each agent did, why, and when.', items: ['Real-time audit log', 'Atlas dashboard', 'SLA tracking', '24/7 operation'], }, ]; return (
Deployment

Operational in weeks,
not months.

{steps.map((s, i) => (
{s.tag}

{s.title}

{s.body}

{s.items.map(d => (
{d}
))}
))}
); } // ── Comparison ──────────────────────────────────────────────────── function Comparison() { const [ref, visible] = useInView(0.08); const rows = [ { workflow: 'POD intake', today: 'CSR manually keys data from emailed PDF or fax', echo: 'Otis extracts and posts to TruckMate AR same shift' }, { workflow: 'Rate quotes', today: 'CSR pulls rate from TMS, emails back', echo: 'Dax responds in minutes with lane history' }, { workflow: 'Dock scheduling', today: 'Driver calls dispatcher; manual OpenDock entry', echo: 'Ren books from a Teams or SMS request' }, { workflow: 'Detention claims', today: 'Claims team reconstructs timelines after the fact', echo: 'Mira substantiates in real time and files' }, { workflow: 'Accessorial billing', today: 'Inconsistent — depends which CSR caught it', echo: 'Every charge flagged, documented, billed' }, ]; return (
Today vs. Echo {/* (Pillar section is 04 · Why Echo) */}

What changes when
agents go to work.

{[['WORKFLOW', false], ['TODAY', false], ['WITH ECHO', true]].map(([h, accent]) => (
{h}
))}
{rows.map((r, i) => (
{r.workflow}
{r.today}
{r.echo}
))}
); } // ── Footer ──────────────────────────────────────────────────────── function Footer({ theme, setTheme }) { const links = { Product: ['Agents', 'How It Works', 'Changelog'], Company: ['About', 'Contact', 'Privacy', 'Terms'], }; return ( ); } Object.assign(window, { EchoLogo, Problem, Agents, HowItWorks, Comparison, Footer });