// V1 Funding Flow page — calculator-tied 3-step explainer. // Distinct from the header-nav "How It Works" (#how) which covers Apply → // Connect → Offer → Funded as a process overview. This page is the // post-estimate explainer: "Here's what happens between your estimate and // the wire," modeled on main's HowItWorksPage.tsx (3 steps with bullets, // stat numbers, deeper copy). // // Animation budget: oversized hero with line-mask reveal + ambient bloom, // each step gets a unique scroll-revealed mock UI (typed form, bar-chart // draw-in, wire-transfer progress), connecting indigo rule that scales as // you scroll between steps, count-ups on every stat number. const { useState: ffUseState, useEffect: ffUseEffect, useRef: ffUseRef } = React; // ─── Step icon set (reused inline) ─────────────────────────── function FfIcon({ name, size = 14 }) { const p = { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'doc') return ; if (name === 'bank') return ; if (name === 'shield') return ; if (name === 'clock') return ; if (name === 'chart') return ; if (name === 'users') return ; if (name === 'pie') return ; if (name === 'zap') return ; if (name === 'wire') return ; if (name === 'refresh') return ; if (name === 'card') return ; if (name === 'trend') return ; if (name === 'check') return ; if (name === 'arr') return ; if (name === 'dollar') return ; return null; } // ─── Hero with mask-reveal title + ambient indigo bloom ────── function FfHero({ onApply }) { const mounted = useV1Mounted(60); const enter = (delay) => ({ opacity: mounted ? 1 : 0, transform: mounted ? 'translateY(0)' : 'translateY(10px)', transition: `opacity 720ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms, transform 720ms cubic-bezier(0.22, 1, 0.36, 1) ${delay}ms`, }); return (
Vol. VII · Funding flow
From estimate to wire

Here's how your offer actually{' '} works.

From the moment you submit to the moment funds clear — what happens on our side, who reads what, and how long every step actually takes.

{[ ['Application', '5', 'min'], ['Approval', '24', 'hrs'], ['To wire', '24', 'h'], ['Hidden fees', '0', '$'], ].map(([label, value, unit], i) => (
0 ? 24 : 0, borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.12)' : 'none', }}>
{label}
{unit}
))}
); } // ─── Shared step shell ───────────────────────────────────────── function FfStepShell({ index, eyebrow, title, tagline, body, bullets, statLabel, mock }) { const [ref, inView] = useV1InView(0.2, '0px 0px -10% 0px'); return (
{/* LEFT — copy */}
Step {String(index).padStart(2, '0')} {eyebrow}

{title}

{tagline}

{body}

    {bullets.map((b, i) => (
  • {b.text}
    • ))}
{statLabel}
{/* RIGHT — mock UI */}
{mock(inView)}
); } // ─── Mock 1 — application form auto-filling ─────────────────── function FfMock1({ active }) { const [filled, setFilled] = ffUseState(0); ffUseEffect(() => { if (!active) return; const fields = 4; let i = 0; const id = setInterval(() => { i += 1; setFilled(i); if (i >= fields) clearInterval(id); }, 480); return () => clearInterval(id); }, [active]); const rows = [ { label: 'Legal business name', value: 'La Rosa Restaurant LLC' }, { label: 'EIN / Tax ID', value: '83-1429•••' }, { label: 'Average monthly revenue', value: '$48,200' }, { label: 'Time in business', value: '4 years' }, ]; return (
Step 01 · Application = 4 ? V1.green : V1.muted, display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'color 220ms', }}> {filled >= 4 ? '● Soft-pull received' : '○ Filling fields…'}
{rows.map((r, i) => { const done = filled > i; const active = filled === i; return (
{r.label}
{r.value} {active && ( )} {done && ( )}
); })}
); } // ─── Mock 2 — 90-day deposit chart drawing in, then "Approved" ── function FfMock2({ active }) { const [phase, setPhase] = ffUseState('idle'); // idle → drawing → reviewing → approved ffUseEffect(() => { if (!active) return; const t1 = setTimeout(() => setPhase('drawing'), 200); const t2 = setTimeout(() => setPhase('reviewing'), 1700); const t3 = setTimeout(() => setPhase('approved'), 3200); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [active]); const drawing = phase !== 'idle'; const approved = phase === 'approved'; // 12 weekly bars (≈ 90 days), variable heights for realism const bars = [42, 58, 51, 67, 72, 49, 80, 76, 64, 88, 71, 90]; return (
Step 02 · Underwriting {phase === 'idle' && 'Awaiting bank link'} {phase === 'drawing' && '◉ Reading deposits…'} {phase === 'reviewing' && '◉ Running model…'} {approved && '✓ Approved'}
90-day deposits · weekly
{bars.map((h, i) => (
))}
{[ ['Avg. balance', '$28,410'], ['Neg. days', '0'], ['Mo. deposits', '$104K'], ].map(([k, v], i) => (
{k}
{v}
))}
{approved && (
Approved · $24,000–$32,000 at 1.18×
Reviewed by Robert K. · Underwriter
)}
); } // ─── Mock 3 — wire transfer progress + cleared check ────────── function FfMock3({ active }) { const [pct, setPct] = ffUseState(0); const [phase, setPhase] = ffUseState('idle'); // idle → sending → cleared ffUseEffect(() => { if (!active) return; const start = setTimeout(() => { setPhase('sending'); }, 200); return () => clearTimeout(start); }, [active]); ffUseEffect(() => { if (phase !== 'sending') return; const id = setInterval(() => { setPct((p) => { const next = Math.min(100, p + 2.4 + Math.random() * 1.6); if (next >= 100) { clearInterval(id); setTimeout(() => setPhase('cleared'), 280); } return next; }); }, 60); return () => clearInterval(id); }, [phase]); const cleared = phase === 'cleared'; return (
Step 03 · Wire {phase === 'idle' && 'Pending sign'} {phase === 'sending' && '◉ Sending…'} {cleared && '✓ Cleared'}
{/* Wire visualization: Delt → bank with a moving dot */}
{[ { l: 'Delt', k: 'd' }, { l: 'Wire network', k: 'w' }, { l: 'Your bank', k: 'b' }, ].map((n, i) => (
{n.l}
))} {/* Static rail behind */}
{/* Filled rail */}
{/* Moving dot */} {phase === 'sending' && (
)}
Funding amount
$28,000
{cleared ? 'Funds available' : `${Math.floor(pct)}% sent`}
{cleared ? 'Cleared in 19h 14m · Wire trace #DELT-7421' : 'Median time: 19h 14m'}
); } // ─── Bottom CTA — sheen sweep on hover ───────────────────────── function FfCta({ onApply, onCalc }) { const [ref, inView] = useV1InView(0.2, '0px 0px -10% 0px'); const [hover, setHover] = ffUseState(false); return (
Now you know

Five minutes in, twenty-four hours out.

A real range, a real underwriter, and a wire that actually clears the same day. No call centers, no broker layers, no junk fees.

); } // ═══════════════════════════════════════════════════════════════ // V1FundingFlowPage — main exporter // ═══════════════════════════════════════════════════════════════ function V1FundingFlowPage({ accent, onApply, onCalc }) { return (
} /> } /> } />
); } Object.assign(window, { V1FundingFlowPage });