// 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 }) { // Brand mark — uses the canonical Echo logo image asset. return ( Echo ); } // (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: '5-8%', label: 'Overcharge on the avg carrier invoice.', source: 'FreightAudit.com benchmark' }, { value: '60 days', label: 'Claim window. Most brokers miss it.', source: 'NMFTA claims rules' }, { value: '2 days', label: 'Avg email response, mid-size brokers.', source: 'Industry benchmark 2025' }, { value: '40+ hrs', label: 'To onboard one shipper in TMS.', source: 'Ardent Partners 2024' }, ]; return (
The problem

Where time
and money leak.

Freight back-office runs on manual invoice review, untracked claims, and inbox triage.

{stats.map((s, i) => )}
); } // ── Agent glyphs ────────────────────────────────────────────────── const glyphs = { Recover: , Triage: , Quote: , Docs: , }; 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 · AP · CARRIER AUDIT', name: 'Recover', domain: 'Invoice Audit', tagline: 'Audits every carrier invoice against booked rate and tariff. Flags overcharges before AP pays.', outcome: 'Recovers 5-8% of every carrier invoice.', href: 'agents/recover.html' }, { num: '02 · CUSTOMER SERVICE · EMAIL', name: 'Triage', domain: 'Email Triage', tagline: 'Classifies every inbound email, pulls the shipment record, and drafts a reply.', outcome: 'Every customer email answered in under 4 minutes.', href: 'agents/triage.html' }, { num: '03 · PRICING · QUOTING', name: 'Quote', domain: 'Rate Quotes & Contract Lookup',tagline: 'Parses rate requests, pulls contract pricing or spot rates, and returns a quote in minutes.', outcome: 'Every rate request quoted in under 5 minutes.', href: 'agents/quote.html' }, { num: '04 · ONBOARDING · PLATFORM', name: 'Docs', domain: 'Shipper Onboarding', tagline: 'Reads new shipper applications, creates the TMS account, and sends the welcome email.', outcome: 'Every new shipper onboarded same day.', href: 'agents/docs.html' }, ]; return (
Meet the agents

Four agents.
One unified back-office.

{ 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 TMS access (TruckMate, McLeod, TMW), provisioned in your tenant.', items: ['Azure AD / Entra SSO', 'Your TMS API access', 'Azure OpenAI (your tenant)', 'No data egress'], }, { tag: 'Step 02 · Configure', title: 'Assign agents to channels', body: 'Each agent connects to Teams, SMS, or email. Set escalation rules, thresholds, and overrides.', 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. Atlas shows what each agent did, why, and when.', items: ['Live 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: 'Invoice audit', today: 'AP spot-checks. Most overcharges clear undetected.', echo: 'Recover audits every invoice against booked rate before payment' }, { workflow: 'Customer emails', today: 'CSR reads, looks up shipment, types reply. 2-day avg.', echo: 'Triage classifies, pulls status, sends draft reply in 4 minutes' }, { workflow: 'Rate quotes', today: 'Pricing team builds each quote by hand. Hours per lane.',echo: 'Quote pulls contract or spot rate, returns a quote in 5 minutes' }, { workflow: 'Shipper onboarding', today: 'Manual verification and data entry across 3 systems', echo: 'Docs verifies and creates the account same day' }, { workflow: 'Win rate', today: 'Lost to faster brokers. No visibility on why.', echo: 'Quote tracks every quote, posts win rate by lane each week' }, ]; 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}
))}
); } // ── Vertical Teasers ────────────────────────────────────────────── // Cross-links to Echo's other industry verticals. Each card carries // its own accent so the section reads as "same shape, different domain" // at a glance — no need to read every word. function VerticalCard({ tag, accent, name, sub, body, href }) { const [hovered, setHovered] = useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ position: 'relative', background: 'var(--bg)', border: `1px solid ${hovered ? accent : 'var(--hairline)'}`, borderRadius: 12, padding: '26px 24px 22px', display: 'flex', flexDirection: 'column', gap: 14, cursor: 'pointer', textDecoration: 'none', color: 'inherit', transform: hovered ? 'translateY(-3px)' : 'none', boxShadow: hovered ? `0 14px 40px ${accent}33` : 'none', transition: 'border-color 0.28s, transform 0.28s, box-shadow 0.28s', overflow: 'hidden', }} > {/* Accent corner bar — sits flush against top-left, signature mark */}
{tag}
{name}
{sub}

{body}

View
); } function VerticalTeasers() { const verticals = [ { tag: 'Carriers', accent: '#60A5FA', name: 'Carriers', sub: 'LTL · Truckload · 3PL fleets', body: 'Email, PODs, dispatch, and detention claims handled inside Teams and TruckMate.', href: '/', }, { tag: 'Oracle ERP', accent: '#0EA5E9', name: 'Oracle ERP', sub: 'Fusion · NetSuite · JD Edwards', body: 'Agents that close the books faster inside Fusion and NetSuite.', href: '/erp', }, { tag: 'Regen Health', accent: '#10B981', name: 'Regenerative Health Clinics', sub: 'Patient intake · Claims · AR', body: 'Intake, eligibility, and claims for regenerative and aesthetic clinics.', href: '/health', }, ]; return (
More verticals

Echo runs on
other stacks too.

One playbook. Carriers, finance, and clinics.

{verticals.map(v => )}
); } // ── FAQ ─────────────────────────────────────────────────────────── // Single-open accordion. Click a question to expand its answer; opening // a new one closes the rest. Chevron rotates 180° on the open row. function FaqItem({ q, a, open, onToggle, isLast }) { return (

{a}

); } function FAQ() { const [openIdx, setOpenIdx] = useState(-1); const items = [ { q: 'How long does Echo take to deploy?', a: 'Your first agent goes live in 2 to 3 weeks. The full suite is running within 6.', }, { q: 'Does Echo replace my broker staff?', a: 'No. Echo takes the repetitive work off your dispatchers and ops team: load posting, carrier check-calls, settlement audits. Your team gets back to building customer relationships.', }, { q: 'Does it integrate with my TMS or load board?', a: 'Yes. Echo works with McLeod, Aljex, Tai, DAT, and Truckstop via API. Read-write access stays in your tenant. Your data never leaves your systems.', }, { q: 'What if an agent gets it wrong?', a: 'Every action needs human approval by default, and you set the confidence threshold. Atlas logs every decision with full context for your audit trail.', }, { q: 'Who owns the data?', a: 'You do. Echo runs inside your Microsoft Azure tenant. Your loads, carrier records, and customer master data stay where they already live.', }, { q: 'What does it cost?', a: 'Pricing is per agent. One flat rate per agent per month. Book a demo for the number on your volume.', }, ]; return (
Frequently asked

What freight brokers
usually ask.

Don't see your question? Book a call and we'll answer it directly.

{items.map((it, i) => ( setOpenIdx(openIdx === i ? -1 : i)} isLast={i === items.length - 1} /> ))}
); } // ── Solutions row (footer vertical nav) ─────────────────────────── function SolutionsRow({ current }) { const items = [ { href: '/', label: 'Carriers', key: 'carriers' }, { href: '/erp', label: 'Oracle ERP', key: 'erp' }, { href: '/freight', label: 'Freight & Logistics', key: 'freight' }, { href: '/health', label: 'Regenerative Health', key: 'health' }, ]; return (
Verticals
{items.map((v, i) => ( {v.key === current ? ( {v.label} ) : ( {v.label} )} {i < items.length - 1 && ·} ))}
); } // ── Footer ──────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { EchoLogo, Problem, Agents, HowItWorks, Comparison, VerticalTeasers, FAQ, Footer });