// ============================================================================
// Delt Capital — Plaid-structured homepage sections (3 through 9).
//
// These sections mirror Plaid.com's section rhythm but are skinned in Delt's
// warm-paper + indigo palette and populated with Delt content. They assume
// the Babel-standalone runtime, so there are no imports — React, DELT,
// DeltContent, fmt, Btn, Arr, useV1InView, V1CountUp, etc. are all read from
// window globals. Everything is exported via Object.assign at the bottom.
//
// Design constraints honoured throughout:
// - Strict Delt indigo palette (#4945FF), never Plaid mint/teal.
// - No external images/deps — every UI mock is inline SVG/HTML.
// - Every animation is CSS keyframes or RAF, gated on prefers-reduced-motion.
// - Every section collapses to a single column at <=768px via a shared
// responsive hook (useIsMobile) + inline conditionals.
// ============================================================================
// Literal palette echoes of the brief. We read the shared DELT tokens for the
// brand-managed values, but the DNA/banner want specific hues (violet #8B5CF6,
// cyan #7DD3FC) that differ from DELT.colors.violet (which is aliased to
// indigo in shared.jsx), so we keep those as locals here.
const PLX = {
navy: '#041E42', // deep hero navy — dark bands only
navyMid: '#0A1A6E', // gradient partner for the dark banner
indigo: '#4945FF',
indigoDeep: '#3730A3',
softIndigo: '#7C6BFF',
violet: '#8B5CF6', // DNA strand B (brief-specified, not DELT.colors.violet)
cyan: '#7DD3FC', // accent glow, DNA strand A
ink: '#0F0E17',
};
// One shared responsive signal. Inline styles can't use media queries, so we
// branch layout on this boolean. Updates live on resize so a device rotation
// or a Playwright viewport change re-lays-out without a reload.
function useIsMobile(bp = 768) {
const [m, setM] = React.useState(
() => typeof window !== 'undefined' && window.matchMedia
? window.matchMedia(`(max-width:${bp}px)`).matches : false
);
React.useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia(`(max-width:${bp}px)`);
const on = (e) => setM(e.matches);
// addEventListener is the modern API; addListener is the Safari<14 fallback.
if (mq.addEventListener) mq.addEventListener('change', on);
else mq.addListener(on);
return () => {
if (mq.removeEventListener) mq.removeEventListener('change', on);
else mq.removeListener(on);
};
}, [bp]);
return m;
}
// Reduced-motion signal — used to statically render the DNA + marquees.
const PLX_REDUCED = typeof window !== 'undefined' && window.matchMedia
&& window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// A small circular "→" affordance shared by the product cards (top-right of
// each card in Plaid's grid). Two variants: default is a dark filled circle
// (Plaid's actual case-study style), `dark=true` inverts to a light outline
// on the dark AI banner.
function PlxArrowCircle({ dark = false, active = false }) {
// Three visual states:
// - dark (on dark backgrounds): thin ivory outline, always visible.
// - default (card not hovered): thin ink-tinted outline, ~50% opacity.
// Sits quietly in the corner instead of competing with the mock.
// - active (card hovered): fills to solid ink + white icon, translates
// a couple of px → reads as "this whole card is clickable."
const filled = dark ? false : active;
return (
);
}
// ============================================================================
// SECTION 3 — V1LogoMarquee
// Auto-scrolling monotone wordmarks on the hero's dark navy, so the eye reads
// hero → "trusted by" as one continuous dark band before the paper begins.
// ============================================================================
function V1LogoMarquee() {
// Processor / partner brands. Rendered as monospace wordmarks (no logo files)
// to match Plaid's monotone treatment.
const brands = ['Paysafe', 'NMI', 'Global Payments', 'Goat Payments', 'PAX',
'Verifone', 'Landi', 'Korona', 'Plaid', 'Supabase'];
// Duplicate the array so the -50% translate loops seamlessly.
const loop = [...brands, ...brands];
return (
{/* Eyebrow */}
Trusted across the payments stack
{/* Fade-out edges keep wordmarks from hard-clipping at the viewport edge. */}
{loop.map((b, i) => (
{b}
))}
);
}
// ============================================================================
// SECTION 4 — V1ProductGrid ("Built for every operator")
// Plaid's 2-large-over-3-medium card grid on warm paper. Each card carries a
// tiny hand-built UI mock so the grid reads like real product surfaces, not
// marketing filler.
// ============================================================================
// The Plaid hover signature: on hover, a rainbow conic-gradient "glow border"
// appears just outside the card, matching the lead-form treatment. This lives
// as an absolutely-positioned aria-hidden div behind the card content, fading
// opacity from 0 → ~0.55 over 240ms. Cards themselves keep their solid tinted
// background and elevate slightly.
function PlxProductCard({ title, desc, children, large, mobile, tint, onClick }) {
const [hover, setHover] = React.useState(false);
// When an onClick is supplied the whole card becomes an activatable button:
// pointer cursor, keyboard-focusable, and Enter/Space trigger navigation so
// the arrow-circle affordance is honored for keyboard + assistive-tech users.
const clickable = typeof onClick === 'function';
const activate = clickable ? (e) => { if (e) e.preventDefault(); onClick(); } : undefined;
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={activate}
role={clickable ? 'link' : undefined}
tabIndex={clickable ? 0 : undefined}
aria-label={clickable ? title : undefined}
onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') activate(e); } : undefined}
style={{ position: 'relative', display: 'flex', cursor: clickable ? 'pointer' : 'default' }}
>
{/* Soft indigo→cyan glow, revealed on hover. Toned down from the old
5-stop rainbow conic: on an editorial palette that read arcade-y,
especially with five cards in view at once. A 2-stop diagonal blur
at 35% opacity gives the same "card lifts off the page" feeling
without the color show. */}
{/* The card itself. */}
{/* Subtle radial fade inside the card so the mock sits on a soft
atmosphere instead of a flat panel. */}
{title}
{desc}
{/* Hero visual — floats large in the bottom half, no bordered sub-tile. */}
{children}
);
}
// ---- Card mocks (pure SVG/HTML) --------------------------------------------
// Each mock is a rich, Plaid-scale hero visual — phone mockup, gauge, chart,
// etc. — that floats directly on the card's tinted gradient background.
// 1. Revenue-based funding — polished Nano Banana Pro phone mockup.
function PlxMockOffer_OLD() {
return (
);
}
function PlxMockTerminals_OLD() {
const Term = ({ label, accent, tilt }) => (
{label}
);
return (
$0 downOwn or lease
);
}
// ============================================================================
// PREMIUM BENTO MOCKS — unified design language
// ============================================================================
// All product-surface mocks share:
// • White canvas, 18px radius, 1px hairline border, layered soft shadow
// • DELT.font.display for hero numbers (tabular-nums, tight tracking)
// • DELT.font.mono uppercase 10px/0.14em label style
// • Green status pill: bg rgba(15,169,104,0.10), text #0FA968
// • One indigo→softIndigo gradient accent per mock (never two competing)
//
// Card frame primitive — identical chrome across every product surface so the
// section reads as one design system instead of five separate illustrations.
function PlxSurface({ width = 300, children, style }) {
return (
{children}
);
}
// Small helpers to keep type consistent across mocks.
const PlxLabel = ({ children, color }) => (
{children}
);
const PlxPill = ({ children, tone = 'green' }) => {
const tones = {
green: { bg: 'rgba(15,169,104,0.10)', fg: '#0FA968' },
indigo: { bg: 'rgba(73,69,255,0.10)', fg: DELT.colors.indigo },
};
const t = tones[tone];
return (
{children}
);
};
// 1. Revenue-based funding — iPhone-frame with fully-designed Delt Capital
// offer UI. No JPG; everything is a coded surface so it stays razor-sharp
// on retina and can be tweaked without re-rendering an image.
function PlxMockOffer() {
return (
{/* Side buttons — tiny detail that sells the "real device" read */}
{/* Screen */}
{/* MCAs are revenue-tied — no fixed term. Payback is expressed as the
factor × total repay + a holdback (percentage of daily card
settlements), never as a duration. */}
{[
['Advance', '$95,000'],
['Factor', '1.16×'],
['Total repay', '$110,200'],
['Holdback', '9% of sales'],
].map((row, i, arr) => (
{row[0]}{row[1]}
))}
{/* Progress + status */}
Approved · funds in 24h
{/* CTA */}
Accept offer →
{/* Home indicator */}
);
}
// 2. Instant approvals — replaces the arbitrary "82" gauge with a coherent
// 60-second countdown story: circular progress arc showing what actually
// happens during the soft-pull, with three timestamped checks below.
function PlxMockApprovals() {
// Arc geometry — sweeps ~270° from 135° (bottom-left) to 45° (bottom-right).
// Fill = 68% of the way through underwriting (softened from instant/60s
// framing — MCAs are faster than banks but not literally instant).
const start = 135; const end = 405; const pct = 0.68;
const R = 68; const cx = 90; const cy = 90;
const rad = (a) => (a * Math.PI) / 180;
const arcPath = (a0, a1) => {
const x0 = cx + R * Math.cos(rad(a0));
const y0 = cy + R * Math.sin(rad(a0));
const x1 = cx + R * Math.cos(rad(a1));
const y1 = cy + R * Math.sin(rad(a1));
const large = a1 - a0 > 180 ? 1 : 0;
return `M ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1}`;
};
const fillEnd = start + (end - start) * pct;
return (
Approval · liveSoft pull
{/* Ring + center timer */}
Live
underwriting
{/* Live checklist */}
{[
['Deposits verified', 'Done'],
['Ownership matched', 'Done'],
['Offer ranged', 'Done'],
].map((row) => (
/* Steps not stopwatch times — Delt underwrites in minutes to hours,
not seconds. Signal the process, not a false clock. */
{row[0]}
{row[1]}
))}
);
}
// (Legacy) Commissions mock — unused since the "Agent portal" bento was
// replaced with Lines-of-credit. Kept here for reference in case an
// agent-only variant is spun up later.
function PlxMockCommissions() {
const bars = [42, 55, 48, 68, 78, 92];
const max = 100;
return (
Commissions · YTD
$74,820
▲ 34% vs last year
100% residual
{bars.map((v, i) => (
{['J','F','M','A','M','J'][i]}
))}
);
}
// 3. Line of credit — already the strongest mock in the section; small
// refinements to match the new shared surface primitive and add a subtle
// 12-week draw sparkline so the card has one more micro-detail without
// getting noisy.
function PlxMockLineOfCredit() {
const limit = 250000;
const drawn = 92500;
const available = limit - drawn;
const pct = (drawn / limit) * 100;
const fmt = (n) => `$${n.toLocaleString('en-US')}`;
// Deterministic sparkline shape — 12 weekly draw touches ranging 0.15–0.90.
const spark = [0.20, 0.35, 0.28, 0.52, 0.44, 0.60, 0.55, 0.72, 0.68, 0.80, 0.75, 0.90];
const sparkW = 260; const sparkH = 24;
const points = spark.map((v, i) => {
const x = (i / (spark.length - 1)) * sparkW;
const y = sparkH - v * sparkH;
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
return (
Delt Credit LineOpen
Available to draw
{fmt(available)}
{fmt(drawn)} drawn{fmt(limit)} limit
{/* Sparkline — last 12 weeks of draw activity, indigo→cyan gradient */}
Draws · 12wk▲ 22%
Bank line
12.5% APR
Your rate
8.9% APR
);
}
// 4. Merchant processing — rebuilt from scratch. The old floating-chip
// diagram carried no information. New mock is a rate-comparison stack:
// current processor rate vs Delt rate, with the monthly savings computed
// prominently in the same visual family as the credit-line card.
function PlxMockProcessors() {
return (
Rate comparisonLive quote
{/* Current processor row — Square as the reference merchant is on now.
Square in-person is 2.6% + $0.15 per transaction (Free plan, verified
against Square's published pricing). On $100K/month volume with a
typical ~$50 avg ticket (≈2,000 txns), that's an effective ~2.9%
all-in — or roughly $2,900/mo in processing fees. */}
Current · Square
2.6% + $0.15 per swipe
~2.9%
{/* Delt row — cash discount program. Merchant nets 0% because the
non-cash adjustment is passed to the cardholder. Fits retail,
service, QSR — the categories David flagged. */}
Delt · cash discount
Retail, service, QSR
0% net
{/* Savings summary — Square math on $100K/mo, ~$50 avg ticket:
2.6% × $100K + $0.15 × 2,000 txns = $2,600 + $300 = $2,900/mo.
With cash discount the customer covers the fee, so the merchant
keeps essentially the full $2,900. */}
You keep
on $100K/month volume
▲$2,900/mo
);
}
// 5. Terminal financing — hero photograph (Nano Banana Pro editorial render:
// three POS terminals on a soft lavender studio background matching the
// #F5F1FF card tint). Below the image: a compact spec strip in the same
// mono-caps style used across the section, plus a small "Certified" chip
// to signal the terminals are pre-boarded and ready.
function PlxMockTerminals() {
return (
{/* Terminal-agnostic caption — no manufacturer names. Delt boards any
major terminal, so lock-in to specific brands would misrepresent the
product. */}
Countertop · handheld · mobile
{/* Spec strip — same visual language as the other mocks. Two facts,
separated by a divider dot. "Certified" chip on the right signals
the whole line is pre-boarded / no compatibility risk. */}
$0 down•Own or lease•
Same-day board
);
}
function V1ProductGrid({ onNav }) {
const mobile = useIsMobile();
const go = (page) => (typeof onNav === 'function' ? () => onNav(page) : undefined);
return (
{/* Header row */}
Don't wait on the bank.
Every day you wait is revenue you don't book. Capital wired in 24 hours — priced off your deposits, not your paperwork.
{/* Top row — 2 large cards with tinted interiors. */}
{/* Bottom row — 3 medium cards */}
);
}
// ============================================================================
// SECTION 5 — V1IntelligentBanner (dark card + animated DNA double-helix)
// The signature moment: two interlacing sine strands rotating slowly, nodes
// pulsing at the cross-over points, all softly glowing. Pure inline SVG.
// ============================================================================
// The DNA helix, isolated so its keyframes live with it. Built parametrically:
// two vertical sine strands 180° out of phase, sampled into cubic-Bezier paths,
// with nodes where the strands cross (i.e. where the sine == the axis).
function PlxDnaHelix({ size = 400 }) {
// Geometry: strands run top→bottom along a central axis, waving left/right.
const H = 420, W = 260, cx = W / 2; // logical SVG canvas
const amp = 78; // horizontal wave amplitude
const turns = 3.2; // number of full sine cycles
const samples = 48; // path smoothness
// Build a smooth path for a strand at a given phase offset (radians).
const strandPath = (phase) => {
let d = '';
for (let i = 0; i <= samples; i++) {
const t = i / samples;
const y = t * H;
const x = cx + amp * Math.sin(t * turns * Math.PI * 2 + phase);
d += i === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
}
return d;
};
// Cross-over points: where the two strands (phase 0 and phase π) meet, i.e.
// where sin(θ) == sin(θ+π) → only where both are ~0 (the axis crossings).
// We instead place nodes at every half-turn where the strands are closest,
// linking them with short "rungs" like a ladder — the classic helix read.
const rungs = [];
for (let i = 0; i <= samples; i++) {
const t = i / samples;
const theta = t * turns * Math.PI * 2;
const xA = cx + amp * Math.sin(theta);
const xB = cx + amp * Math.sin(theta + Math.PI);
const y = t * H;
// A rung is meaningful roughly every half cycle where strands are spread;
// sample every ~4th point to avoid clutter (~10 rungs total).
if (i % 4 === 0) rungs.push({ xA, xB, y, k: i });
}
return (
{/* Wispy left-side topography lines — Plaid uses these to fill negative
space on the copy side of the banner. Very subtle, cyan on navy. */}
{!mobile && (
)}
{/* George portrait — blue engraving on the right, no purple.
The image itself carries the navy fade on its left edge so it
blends directly into the banner background. */}
{!mobile && (
{/* Left-edge fade so George dissolves into the banner instead of hard-cutting. */}
{/* Right-side cyan bloom, matches Plaid's Lincoln edge glow. */}
)}
{/* Left — copy */}
Underwriting that reads your revenue, not only your credit.
A holistic review — live deposits, cash flow, and time in business weighed alongside credit, not a single score deciding your fate.
{/* Mobile fallback — stacked DNA. */}
{mobile && (
)}
);
}
// ============================================================================
// SECTION 6 — V1NetworkStats ("A book that gets smarter")
// Layered "funded" notification cards on the left, headline + count-up stat
// grid on the right. Numbers animate in via the shared V1CountUp helper.
// ============================================================================
// A single funded-event notification card, styled like a real mobile app push:
// colored rounded-square icon, brand name, short message, timestamp on the right.
// This mirrors Plaid's floating Venmo/Robinhood/Carvana notification chips.
function PlxFundedCard({ icon, iconBg, iconFg, name, msg, ago }) {
return (
{icon}
{name}{ago}
{msg}
);
}
// A colored "story pill" — wider, holds a small hero-image thumb + brand tag.
// Used to break up the notification cards along the spine (Plaid does this too).
function PlxStoryPill({ img, tag, tagBg }) {
return (
{tag}
);
}
// The flowing spine that threads the notification cards — Plaid's signature
// wavy-line motif. Rendered as a single SVG cubic path with a gradient stroke;
// a subtler mirrored path adds the "double ribbon" feel.
function PlxNetworkSpine() {
// A wide braid of thin lines, Plaid-style. We render ~14 offset copies of a
// single serpentine path so the spine reads as a soft "waterfall" ribbon
// instead of two lonely lines. Colors cycle indigo → violet → cyan
// (Delt palette — no mint/teal).
const lines = [];
const N = 16;
for (let i = 0; i < N; i++) {
const t = i / (N - 1);
// Interpolate between three brand colors as a smooth ramp.
const stops = [
[125, 211, 252], // cyan
[124, 107, 255], // softIndigo
[139, 92, 246], // violet
];
const seg = t * (stops.length - 1);
const idx = Math.min(Math.floor(seg), stops.length - 2);
const f = seg - idx;
const a = stops[idx], b = stops[idx + 1];
const rgb = [
Math.round(a[0] + (b[0] - a[0]) * f),
Math.round(a[1] + (b[1] - a[1]) * f),
Math.round(a[2] + (b[2] - a[2]) * f),
];
const dx = -30 + i * 4;
lines.push({ dx, rgb, alpha: 0.42 + 0.12 * Math.sin(i * 0.9) });
}
return (
);
}
function V1NetworkStats() {
const mobile = useIsMobile();
const [ref, inView] = useV1InView(0.3);
// A mix of push-notification cards (Plaid uses Venmo/Robinhood/Carvana pills)
// and small "story pill" thumbnails. Each anchors to a point along the spine.
const items = [
{ kind: 'card', top: 10, left: 50,
icon: 'D', iconBg: '#4945FF', iconFg: '#fff',
name: 'Delt Capital', ago: '2m ago', msg: 'Bloom Beauty funded · $65K' },
{ kind: 'pill', top: 130, left: 130,
img: 'app/assets/cases/04_larosa.jpg', tag: 'La Rosa', tagBg: '#0B2C5C' },
{ kind: 'card', top: 250, left: 30,
icon: 'R', iconBg: '#0F7A5A', iconFg: '#fff',
name: 'Rosario Const.', ago: 'now', msg: 'Wired $180,000 · 1.14×' },
{ kind: 'pill', top: 370, left: 170,
img: 'app/assets/cases/03_bloom.jpg', tag: 'Bloom Beauty', tagBg: '#4945FF' },
{ kind: 'card', top: 490, left: 60,
icon: 'W', iconBg: '#7DD3FC', iconFg: '#041E42',
name: 'Ward Market', ago: '1h ago', msg: 'Funded $50,000 · 1.18×' },
];
return (
{/* Left — spine + threaded notification cards + story pills. */}
{mobile ? (
);
}
// Payments: a clean rate-card layout. "You pay less. You get paid faster."
// Two big numbers with a supporting proof point — no jargon.
function PlxTabPayments() {
return (
Your processing rateMonthly savings
Old processor
2.90%
+ $0.30 per swipe
With Delt
1.79%
+ $0.10 per swipe
You save every month
$1,240
Deposits arrive
Next day
Works with your existing terminals. We’ll beat any rate in writing.
{/* Terminal-agnostic caption — no manufacturer names. Delt boards any
major terminal, so lock-in to specific brands would misrepresent the
product. */}
{/* Left-edge fade so George dissolves into the banner instead of hard-cutting. */}
{/* Right-side cyan bloom, matches Plaid's Lincoln edge glow. */}
);
}
function PlxTabPortal_OLD() {
const rows = [
{ m: 'Bloom Beauty', f: '$65,000', r: '1.19×', res: '$1,430' },
{ m: 'La Rosa Restaurant', f: '$110,000', r: '1.16×', res: '$2,640' },
{ m: 'Rosario Construction', f: '$180,000', r: '1.14×', res: '$4,320' },
{ m: 'Ward Market', f: '$50,000', r: '1.18×', res: '$1,100' },
];
return (