// 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: '10+ days', label: 'To close month-end in Oracle.', source: 'BlackLine · Close benchmark 2025' }, { value: '40+ hrs', label: 'Per vendor keyed into Fusion AP.', source: 'Ardent Partners · 2024' }, { value: '$148K/yr', label: 'On disconnected finance point tools.', source: 'Gartner · Finance ops 2025' }, { value: '60%', label: 'Of audit prep gathering GRC evidence.', source: 'ISACA · Audit benchmark' }, ]; return (
The problem

Where time
and money leak.

Fusion, NetSuite, and JD Edwards are powerful. Your team still handles the manual work between those systems and the business: onboarding, reconciliation, support, compliance.

{stats.map((s, i) => )}
); } // ── Agent glyphs ────────────────────────────────────────────────── const glyphs = { Docs: , Triage: , Audit: , 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 · ONBOARDING', name: 'Docs', domain: 'Vendor & Customer Onboarding', tagline: 'Parses W-9s and vendor packets. Posts to Fusion AP or NetSuite with read-back validation.', outcome: 'Every new vendor and customer live in Oracle the same day.', href: 'agents/docs.html' }, { num: '02 · AR · CLOSE', name: 'Ledger', domain: 'AR Cash App & Month-End Close', tagline: 'Matches remittances to open Oracle AR invoices, applies cash, flags disputes, and closes in Fusion GL.', outcome: '95%+ auto-applied to Oracle AR. Close in 2 days.', href: 'agents/ledger.html' }, { num: '03 · COMPLIANCE', name: 'Audit', domain: 'Audit & Evidence', tagline: 'Pulls SOC 2, SOX, and audit evidence from Oracle GRC and Azure AD. Flags expiring controls, drafts responses same day.', outcome: 'Same-day auditor response. 60% audit prep saved.', href: 'agents/audit.html' }, { num: '04 · SUPPORT', name: 'Triage', domain: 'Finance Support Triage', tagline: 'Classifies inbound finance tickets, pulls the Oracle record, and routes with a draft reply in under 60 seconds.', outcome: 'Every ticket classified and drafted in under 60 seconds.', href: 'agents/triage.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 Oracle stack', body: 'Azure AD SSO and read-write access to Fusion Cloud, NetSuite, or JD Edwards via Oracle REST APIs. Provisioned in your Azure tenant.', items: ['Azure AD / Entra SSO', 'Oracle REST 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, Slack, or email. Set escalation rules, approval thresholds, and per-workflow overrides.', items: ['Teams / Slack / Email', 'Escalation thresholds', 'Human-in-the-loop controls', 'Role-based overrides'], }, { tag: 'Step 03 · Operate', title: 'Atlas keeps watch', body: 'Every action logged with Oracle module, confidence score, and outcome. The Atlas dashboard gives finance and compliance a full audit trail.', items: ['Live audit log', 'Atlas dashboard', 'Oracle module 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: 'Vendor onboarding', today: 'AP keys W-9, banking, and vendor record into Oracle AP by hand', echo: 'Docs extracts and posts to Fusion AP same day' }, { workflow: 'Cash application', today: 'AR manually matches remittances against Oracle AR open items', echo: 'Ledger matches and posts to Oracle AR automatically' }, { workflow: 'Month-end close', today: '7-day Fusion GL scramble across finance and ops', echo: 'Ledger closes in 2 days with pre-reconciled AR' }, { workflow: 'Support triage', today: 'CSR looks up Oracle record, routes manually with no context', echo: 'Triage pulls Oracle context, routes with draft reply in 60s' }, { workflow: 'Audit evidence', today: 'Compliance pulls Oracle GRC logs and screenshots manually', echo: 'Audit pulls Oracle GRC + Azure AD, packages same day' }, ]; 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: 'Freight Brokers', accent: '#F59E0B', name: 'Freight Brokers & 3PLs', sub: 'Brokers · Tender-to-cash', body: 'Load posting, carrier check-calls, and settlement on autopilot.', href: '/freight', }, { 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, 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 finance staff?', a: 'No. Echo takes the repetitive work off your AR, AP, and audit teams: invoice matching, vendor onboarding, audit evidence pulls. Your team gets back to closing the books and handling exceptions.', }, { q: 'Does it integrate with Oracle Fusion or NetSuite?', a: 'Yes. Echo reads and writes through your existing Fusion or NetSuite APIs. 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, so your audit 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 GL entries, vendor 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 finance teams
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 });