// 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: '30+ hrs / wk', label: 'Lost to manual back-office work.', source: 'McKinsey · 2025' }, { value: '$2M / yr', label: 'Wasted on manual workflows.', source: 'ATRI · 2024' }, { value: '48%', label: 'Still run on email and sheets.', source: 'PwC · 2025' }, { value: '2 days', label: 'Average email response.', source: 'Industry benchmark' }, ]; return (
The problem

Where time
and money leak.

Back-office still runs on inbound email, phone calls, and manual TMS entry.

{stats.map((s, i) => )}
); } // ── Agent glyphs ────────────────────────────────────────────────── const glyphs = { Docs: , Triage: , Cal: , Ledger: , }; 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 · TEAMS + OUTLOOK', name: 'Triage', domain: 'Email Triage', tagline: 'Reads every inbound email, classifies the intent (rate, T&T, pickup, claim), and routes to the right action.', outcome: 'Every email triaged. Intent classified. Routed.', href: 'agents/triage.html' }, { num: '02 · TEAMS', name: 'Docs', domain: 'PODs & BOLs', tagline: 'Reads inbound PODs and BOLs, extracts the data, posts to your TMS the same shift.', outcome: 'Every POD posted the same shift.', href: 'agents/docs.html' }, { num: '03 · SMS + TEAMS', name: 'Cal', domain: 'Dock Scheduling', tagline: 'Takes dock booking requests by SMS or Teams. Books into TMS and OpenDock the same minute.', outcome: 'Every booking in your TMS. Automatically.', href: 'agents/cal.html' }, { num: '04 · TEAMS', name: 'Ledger', domain: 'Detention & Claims', tagline: 'Pulls GPS and timestamps to substantiate detention. Files the package to AR.', outcome: 'Every detention charge documented and billed.',href: 'agents/ledger.html' }, ]; return (
Meet the agents

Four agents.
One Teams channel.

{ 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)'; }} > See Triage in action
{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 access, provisioned in your tenant. Nothing leaves your infrastructure.', items: ['Azure AD / Entra SSO', 'Your TMS / ERP 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, thresholds, and overrides.', items: ['Teams / SMS / Email', 'Escalation thresholds', 'Human-in-the-loop controls', 'Role-based overrides'], }, { tag: 'Step 03 · Operate', title: 'Decision log, in Teams', body: 'Every agent action posts to a Teams channel with the input, the confidence score, and the action taken. Your team scans the feed, your compliance team queries it.', items: ['Streaming decision log', 'Posts to Teams', '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: 'Customer email triage', today: 'CSR sorts inbox; replies stretch into days', echo: 'Triage responds in minutes with full context' }, { workflow: 'Document intake', today: 'Team keys data from emailed PDFs or fax', echo: 'Docs extracts and posts to TMS same shift' }, { workflow: 'Booking + scheduling', today: 'Phone calls and manual entry across two systems', echo: 'Cal books from a Teams or SMS request' }, { workflow: 'AR + claims', today: 'Team reconstructs timelines after the fact', echo: 'Ledger pulls GPS timestamps as the wait happens 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}
))}
); } // ── 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: 'Oracle ERP', accent: '#C74634', name: 'Oracle ERP', sub: 'Fusion · NetSuite · JD Edwards', body: 'Agents that close the books faster inside Fusion and NetSuite.', href: '/erp', }, { tag: 'Freight Brokers', accent: '#F59E0B', name: 'Freight & 3PLs', sub: 'Brokers · Tender-to-cash', body: 'Load posting, carrier check-calls, and settlement on autopilot.', href: '/freight', }, { tag: 'Regen Health', accent: '#10B981', name: '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. Finance, brokerage, 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 staff?', a: 'No. Echo takes the repetitive work off your CSRs and AR team: email triage, POD posting, detention filings. Your team gets their afternoons back to handle real exceptions.', }, { q: 'Does it integrate with my TMS?', a: 'Yes. Echo is TruckMate-native and works with any TMS 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. Every decision posts to the Teams audit channel with full context, so your compliance team gets the trail they have been asking for.', }, { q: 'Who owns the data?', a: 'You do. Echo runs inside your Microsoft Azure tenant. Your emails, PODs, and customer records 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 carriers
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 });