);
}
// ── Visual: Autonomy level selector ───────────────────────────────
// 4 stacked rows showing each granular approval level. One row is
// highlighted as the current setting. No dollar thresholds. The point
// is approval-level granularity, set per agent and per workflow.
function HITLVisual() {
const levels = [
{ key: 'read', label: 'READ-ONLY', desc: 'Logs everything, takes no action' },
{ key: 'suggest', label: 'SUGGEST', desc: 'Drafts replies, waits for approval' },
{ key: 'auto', label: 'AUTO-EXECUTE', desc: 'Runs without approval, alerts on completion' },
{ key: 'audit', label: 'AUTO-EXECUTE + AUDIT', desc: 'Runs and posts audit trail' },
];
const current = 'auto';
return (
);
}
// ── Why Echo Section ──────────────────────────────────────────────
function WhyEcho() {
const pillars = [
{
eyebrow: '01 · NATIVE TO YOUR TMS',
title: 'Lives in your tenant.',
sub: 'Direct API access. Your data stays put.',
body: 'Echo deploys inside your Azure subscription. Agents read and write to TruckMate (or your TMS) through the same APIs your developers would use.',
Visual: SystemsVisual,
},
{
eyebrow: '02 · IN YOUR CHANNELS',
title: 'Lives in Teams, Outlook, and SMS.',
sub: 'Zero new apps to learn.',
body: 'Dispatchers work in Teams. CS works in Outlook. Drivers text. Agents show up in the channels you already use.',
Visual: ChannelsVisual,
},
{
eyebrow: '03 · AUDITABLE',
title: 'Every action, traceable.',
sub: 'One timeline your compliance team can query.',
body: 'Every decision logged with the input, the confidence score, and the action taken. Queryable in Teams, exportable, SOC 2 ready.',
Visual: DecisionLogVisual,
},
{
eyebrow: '04 · HUMAN-IN-THE-LOOP',
title: 'You set the autonomy.',
sub: 'Per agent, per workflow.',
body: 'Read-only, suggest-only, or full execute. Echo respects the approval level you choose.',
Visual: HITLVisual,
},
];
return (
Why Echo
Four reasons Echo isn't another wrapper.
Tenant-native. Channel-native. Built for how LTL carriers run today.
{pillars.map((p, i) => (
))}
);
}
// ── Freight-native sub-row ───────────────────────────────────────
// Compact row of 4 mini-cards underneath the main pillars. Visually
// secondary: smaller fonts, lighter weight, simple bordered cards.
// 1 row × 4 cols on desktop, 2×2 on mobile.
function FreightNativeRow() {
const cards = [
{
eyebrow: '01 · AR',
title: 'Detention recovery, automated',
body: 'Echo watches every load and files the billable detention with GPS proof attached.',
},
{
eyebrow: '02 · OPS',
title: 'ELD-aware dispatch',
body: 'Live GPS from Samsara or Motive starts the detention clock the second a truck stops.',
},
{
eyebrow: '03 · COMPLIANCE',
title: 'Hours-of-service alerts',
body: 'Echo tracks driver clocks against FMCSA rules and warns dispatch before a violation.',
},
{
eyebrow: '04 · FUEL TAX',
title: 'IFTA quarterly prep',
body: 'Echo turns fuel receipts and per-state mileage into a quarterly IFTA-ready report.',
},
];
return (