{/* Hero offer */}

{/* Ambient ring on the far left */}

{/* LEFT — narrative + CTA */}

Pre-Qualified Offer

Hi {ownerName.split(" ")[0]} — your Flex Line is ready when you are.

Based on your {partnerName} sales, you can take what you need today and pull more later — all on one line.

{[ { ic: "shield-check", t: "Soft credit pull only" }, { ic: "zap", t: "Funds in 24 hours" }, { ic: "circle-dollar-sign", t: "No application fees" }]. map((p, i) =>

{p.t}

)}

{/* RIGHT — the showpiece amount */}

{/* Offset ring ornaments — wreath the composition without crossing the number */}

{/* Darker stage disc — gives the number a clean canvas */}

{/* Subtle teal glow on top of the stage */}

You're pre-qualified up to

{fmtUSD(offerAmount)}

Reusable line · draw what you need

{/* Footer disclosure inside the hero */}

Revenued's service provides for the purchase of future receivables and is not a loan. Final terms and amount confirmed after a soft credit review.

{/* How it works */}

How it works

{[ { n: "01", ic: "sliders-horizontal", t: "Choose your amount", d: "Pick anything up to your max. Pull more later as your line refills." }, { n: "02", ic: "link", t: "Connect your bank", d: "Plaid secure connection. We use it to verify revenue and set up payback." }, { n: "03", ic: "send", t: "Get funded", d: "Most merchants see funds the next business day. No hidden fees." }]. map((s, i) =>

{s.n}

{s.t}

{s.d}

)}

); }; // ===================================================================== // 2) AMOUNT SELECTION (warm) // ===================================================================== const AmountField = ({ value, onChange, min, max }) => { const [text, setText] = React.useState(value.toLocaleString()); React.useEffect(() => { setText(value.toLocaleString()); }, [value]); const handleChange = (e) => { const raw = e.target.value.replace(/[^0-9]/g, ""); if (!raw) { setText(""); return; } const n = Math.min(max, parseInt(raw, 10)); setText(n.toLocaleString()); onChange(n); }; const handleBlur = () => { const n = Math.max(min, Math.min(max, value || min)); onChange(n); setText(n.toLocaleString()); }; return (

); }; const FlexLineDial = ({ drawn, total, partnerName }) => { const pct = Math.max(0, Math.min(1, drawn / total)); const r = 78; const c = 2 * Math.PI * r; const dashed = pct * c; return (

Drawing

{Math.round(pct * 100)}%

of your line

Drawing now

{fmtUSD(drawn)}

Stays on your line

{fmtUSD(total - drawn)}

Flex Line · {partnerName}

{fmtUSD(total)}

); }; const ScreenAmount = ({ tweaks, draw, setDraw, onContinue, onBack }) => { const { offerAmount, partnerName } = tweaks; return (

{/* LEFT — input + slider + chips */}

How much do you want to draw?

Type a number, or drag the slider.

Any amount from $1,000 up to {fmtUSD(offerAmount)}. The rest stays on your line for when you need it.

Quick select

{[10000, 25000, 50000, offerAmount].map((v) => { const active = draw === v; return ( ); })}

{/* RIGHT — Flex Line capacity dial */}

); }; // ===================================================================== // 3) PLAID CONNECTION // ===================================================================== const ScreenPlaid = ({ tweaks, step, total, onContinue, onBack, draw }) => { const [status, setStatus] = React.useState("idle"); // idle → loading → success const [bank, setBank] = React.useState(null); const connect = (b) => { setBank(b); setStatus("loading"); setTimeout(() => setStatus("success"), 1600); }; return (

Step {step} of {total}

Connect your bank

We use Plaid to verify your revenue and set up your weekly payment. It's the same connection your accounting software uses.

{[ { ic: "lock", t: "Bank-level security", d: "256-bit encryption. Plaid never shares your login with us." }, { ic: "eye-off", t: "Read-only access", d: "We can see deposits, never move money out of this account." }, { ic: "rotate-ccw", t: "You can revoke any time", d: "From your settings or your bank's app." }]. map((p, i) =>

{p.t}

{p.d}

)}

{status === "success" && }

); }; // ===================================================================== // 4) BUSINESS INFORMATION // ===================================================================== const ScreenBusiness = ({ tweaks, step, total, isPrefilled, onContinue, onBack }) => { const [data, setData] = React.useState({ legalName: isPrefilled ? "Acme Coffee Roasters LLC" : "", dba: isPrefilled ? "Acme Coffee" : "", ein: isPrefilled ? "82-4501931" : "", industry: isPrefilled ? "Food service · Specialty coffee" : "", inception: isPrefilled ? "March 2022" : "", street: isPrefilled ? "412 Larkin St" : "", city: isPrefilled ? "San Francisco" : "", state: isPrefilled ? "CA" : "", zip: isPrefilled ? "94109" : "", monthlyRevenue: isPrefilled ? "85000" : "", employees: isPrefilled ? "8" : "" }); const set = (k) => (e) => setData({ ...data, [k]: e.target.value }); return (

Step {step} of {total}

{isPrefilled ? "Confirm your business details" : "Tell us about your business"}

{isPrefilled ? `We already have what ${tweaks.partnerName} shared. Check it over and edit anything that's changed.` : "We'll use this to verify your business and set up your Flex Line."}

{isPrefilled &&

Pre-filled from your {tweaks.partnerName} account.

}

); }; // ===================================================================== // 5) OWNER INFORMATION // ===================================================================== const ScreenOwner = ({ tweaks, step, total, isPrefilled, onContinue, onBack }) => { const [data, setData] = React.useState({ firstName: isPrefilled ? "Sarah" : "", lastName: isPrefilled ? "Chen" : "", title: isPrefilled ? "Owner / President" : "", ownershipPct: isPrefilled ? "100" : "", email: isPrefilled ? "sarah@acmecoffee.co" : "", phone: isPrefilled ? "(415) 555-0142" : "", dob: isPrefilled ? "08/14/1987" : "", ssn: "•••-••-4391", street: isPrefilled ? "189 Oak Grove Ave" : "", city: isPrefilled ? "San Francisco" : "", state: isPrefilled ? "CA" : "", zip: isPrefilled ? "94110" : "" }); const set = (k) => (e) => setData({ ...data, [k]: e.target.value }); return (

Step {step} of {total}

About the owner

We need to verify the principal of the business — a federal requirement, not a credit decision.

); }; // ===================================================================== // 6) REVIEW & CONSENT // ===================================================================== const ScreenReview = ({ tweaks, step, total, draw, hasOffer, onSubmit, onBack }) => { const { partnerName, factorRate } = tweaks; const [agree1, setAgree1] = React.useState(false); const [agree2, setAgree2] = React.useState(false); const canSubmit = agree1 && agree2; const terms = draw ? computeTerms(draw, factorRate) : null; const Row = ({ k, v }) =>

{k} {v}

; return (

Step {step} of {total}

Review and submit

Last look. After this we'll run a soft check and confirm your final terms.

{hasOffer && terms &&

Your offer Pre-approved

}

Business

Owner

Consent

setAgree1(e.target.checked)}> I agree to Revenued's Terms of Service and Privacy Policy. setAgree2(e.target.checked)}> I authorize Revenued to perform a background and credit review, and to verify the information I've provided.

Revenued's service provides for the purchase of future receivables and is not a loan. Approval, advance amount, and pricing are determined by Revenued at its discretion based on the seller's revenue and business profile.

); }; // ===================================================================== // 7a) REVIEWING STATE — value-add waiting screen // ===================================================================== const ReviewingState = ({ tweaks, onView }) => { const { partnerName } = tweaks; const steps = [ { label: "Verifying business identity", done: "Acme Coffee Roasters LLC", duration: 1400 }, { label: `Analyzing ${partnerName} deposits`, done: "$85K/mo avg revenue", duration: 1700 }, { label: "Pulling SBFE business credit", done: "Score 728 · Good", duration: 1700 }, { label: "Calculating your final terms", done: "Approved up to $75,000", duration: 1600 }]; const totalMs = steps.reduce((a, s) => a + s.duration, 0); const [elapsed, setElapsed] = React.useState(0); const [done, setDone] = React.useState(false); const startRef = React.useRef(null); React.useEffect(() => { startRef.current = performance.now(); let raf; const tick = (now) => { const e = now - startRef.current; setElapsed(Math.min(e, totalMs)); if (e >= totalMs) { setDone(true); return; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const progress = elapsed / totalMs * 100; // Step cursor still drives the per-step checked/active state and value reveals. let stepCursor = steps.length; { let acc = 0; for (let i = 0; i < steps.length; i++) { const end = acc + steps[i].duration; if (elapsed < end) { stepCursor = i; break; } acc = end; } } const elapsedSec = Math.floor(elapsed / 1000); // SBFE score reveal — animates in as the credit-check step completes const creditStepStart = steps[0].duration + steps[1].duration; const creditStepEnd = creditStepStart + steps[2].duration; const sbfeReveal = Math.max(0, Math.min(1, (elapsed - creditStepStart) / (creditStepEnd - creditStepStart))); const sbfeTarget = 728; const sbfeDisplay = Math.round(300 + (sbfeTarget - 300) * sbfeReveal); return (

{/* Progress strip */}

{done ? "Decision ready" : "Reviewing your application"}

{done ? "Your offer is ready to review." : "Hang tight — we'll be done in a few seconds."}

{done ? "Complete" : `~${Math.max(0, Math.ceil((totalMs - elapsed) / 1000))}s remaining`}

{steps.map((s, i) => { const isDone = i < stepCursor; const isActive = i === stepCursor; return (

{isDone ? : isActive ?

: null}

{s.label}

{s.done}

); })}

{/* Two-column content while waiting */}

{/* LEFT — Flex Line product video + value props */}

While you wait

Meet your Flex Line.

One reusable line of working capital. Draw what you need today, pull more later — payback adjusts to your revenue, not the calendar.

{[ { ic: "refresh-ccw", t: "Reusable", d: "Pay down, pull more" }, { ic: "activity", t: "Revenue-paced", d: "Weekly, from deposits" }, { ic: "zap", t: "Same-day", d: "Funds in 24 hours" }]. map((p, i) =>

{p.t}

{p.d}

)}

{/* RIGHT — SBFE Business Credit Score */}

); }; const FlexLineVideo = () => { return (

{/* Ambient rings */}

{/* Floating money tile mockup */}

Available

$75,000

{/* Play button */}

{/* Footer label */}

1:24

How the Flex Line works

); }; const SBFECard = ({ score, target, reveal }) => { // SBFE scale: 300–850. Bands: Poor / Fair / Good / Excellent. const min = 300, max = 850; const pct = (score - min) / (max - min) * 100; const bands = [ { label: "Poor", from: 300, to: 579, color: "#e07a5f" }, { label: "Fair", from: 580, to: 669, color: "#e0a85f" }, { label: "Good", from: 670, to: 739, color: "#04C49E" }, { label: "Excellent", from: 740, to: 850, color: "#0040BA" }]; const tier = bands.find((b) => score >= b.from && score <= b.to) || bands[0]; const revealed = reveal > 0.05; return (

Business credit

SBFE Score · pulled today

{revealed ? <> Verified : <>Pulling…}

{score}

out of {max}

{revealed ? tier.label.toUpperCase() : "ANALYZING"}

{/* Band rail */}

{bands.map((b, i) => { const w = (b.to - b.from) / (max - min) * 100; return

; })}

{/* Marker — sits above the band */}

you

{bands.map((b, i) => {b.from})} {max}

{/* Contributing factors */}

{[ { label: "Payment history", value: "Excellent", delta: "+12 mo" }, { label: "Revenue stability", value: "Strong", delta: "12-mo trend ↑" }, { label: "Time in business", value: "3.1 yrs", delta: "" }]. map((f, i) =>

{f.label} {f.value} {f.delta && {f.delta}}

)}

); }; // ===================================================================== // 7) HARD OFFER / DECISION — 3 offer options // ===================================================================== const buildOffer = ({ tag, limit, factor, days }) => { const payback = limit * factor; const daily = Math.round(payback / days); // Simple-interest APR approximation for an evenly-amortizing advance: // APR ≈ 2 · (factor − 1) · 365 / term_days. const apr = 2 * (factor - 1) * 365 / days * 100; return { tag, limit, factor, days, daily, apr, payback }; }; const OfferCard = ({ offer, selected, recommended, onSelect }) => { const dark = recommended; const factorFmt = offer.factor.toFixed(2); const rows = [ { l: "Factor rate", v: factorFmt }, { l: "Payback period", v: offer.days + " days" }, { l: "Estimated daily payment", v: fmtUSD(offer.daily) }]; // Color tokens shift between the dark (recommended) and light cards. const c = dark ? { bg: "var(--trust-tech)", border: selected ? "var(--funding-pool)" : "var(--trust-tech)", fg: "#fff", fgMuted: "rgba(255,255,255,0.62)", statLabel: "rgba(255,255,255,0.55)", statValue: "#fff", divider: "rgba(255,255,255,0.10)", accent: "var(--funding-pool)" } : { bg: "#fff", border: selected ? "var(--growth-galaxy)" : "var(--border-1)", fg: "var(--trust-tech)", fgMuted: "var(--tt-60)", statLabel: "var(--tt-60)", statValue: "var(--trust-tech)", divider: "var(--border-1)", accent: "var(--growth-galaxy)" }; return ( ); }; const ScreenDecision = ({ tweaks, draw, setDraw, hasOffer, onContinue, onBack, onSelectOffer }) => { // Warm flow: confirmation of the offer they already selected. // Cold flow: pick from three approved options. const { partnerName } = tweaks; const [reviewing, setReviewing] = React.useState(true); const [selected, setSelected] = React.useState(1); // default to "Most popular" const approvedMax = hasOffer ? tweaks.offerAmount : 50000; // 3 offers: compact / standard / max — bigger limit pairs with higher factor + longer term. // Round limits to clean $500 increments. const round500 = (n) => Math.round(n / 500) * 500; const offers = [ buildOffer({ tag: "Fastest payback", limit: round500(approvedMax * 0.5), factor: 1.22, days: 200 }), buildOffer({ tag: "Most popular", limit: round500(approvedMax * 0.75), factor: tweaks.factorRate, days: 260 }), buildOffer({ tag: "Largest line", limit: approvedMax, factor: 1.38, days: 320 })]; const recommendedIdx = 1; const sel = offers[selected]; // Initial draw amount — defaults to incoming `draw` (set on the Amount screen) // clamped to the selected offer's limit. Falls back to the full limit when no // prior draw was chosen (cold flow path). const clampDraw = (v, lim) => Math.min(lim, Math.max(1000, v || lim)); const [initialDraw, setInitialDraw] = React.useState(() => clampDraw(draw, sel.limit)); // When the user picks a different offer, clamp the initial draw to the new // limit (or reset to the new full limit if it was at the old max). React.useEffect(() => { setInitialDraw((prev) => clampDraw(prev, sel.limit)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [sel.limit]); if (reviewing) { return setReviewing(false)} />; } return (

{/* Approved banner — compact, makes room for the offer cards */}

Approved · 3 offers ready

Three ways to take your Flex Line.

Pick the option that fits your business. You can adjust later from your dashboard.

{/* 3 offer cards */}

{offers.map((o, i) => setSelected(i)} />)}

{/* Initial draw amount */}

Step 2 · Initial draw

How much do you want to take right now?

You can pull more later — the rest stays on your Flex Line, ready when you need it.

Selected line

{fmtUSD(sel.limit)}

$1,000 minimum · {fmtUSD(sel.limit)} maximum

Quick select {[ { v: Math.max(1000, round500(sel.limit * 0.25)), l: "25%" }, { v: Math.max(1000, round500(sel.limit * 0.5)), l: "50%" }, { v: Math.max(1000, round500(sel.limit * 0.75)), l: "75%" }, { v: sel.limit, l: "Max" }]. map((p, i) => { const active = initialDraw === p.v; return ( ); })}

{fmtUSD(sel.limit - initialDraw)} stays on your line for later. Today: {fmtUSD(initialDraw)} · Available: {fmtUSD(sel.limit - initialDraw)}

{/* Footnote */}

Revenued's service provides for the purchase of future receivables and is not a loan. The factor rate is fixed at the time of agreement; total payback equals your draw multiplied by the factor rate. Final agreement on the next screen.

{/* Action row */}

Taking {fmtUSD(initialDraw)} of {fmtUSD(sel.limit)} · {sel.factor.toFixed(2)} factor · ~{sel.days} days

); }; // ===================================================================== // 8) FLEX LINE AGREEMENT // ===================================================================== const ScreenAgreement = ({ tweaks, draw, selectedOffer, onSign, onBack }) => { const { factorRate } = tweaks; const terms = computeTerms(draw, factorRate); const spendingLimit = selectedOffer ? selectedOffer.limit : tweaks.offerAmount; const [signed, setSigned] = React.useState(false); const [confirmed, setConfirmed] = React.useState(false); return (

Final step

Sign your Flex Line agreement

Look it over, check the boxes, and we'll move funds today.

{/* Agreement preview */}

Revenue Purchase & Sale Agreement

v2.14 · {new Date().toLocaleDateString("en-US", { month: "long", year: "numeric" })}

1. Sale of Future Receivables

Acme Coffee Roasters LLC ("Seller") hereby sells, assigns, and transfers to Revenued LLC ("Purchaser") all rights, title, and interest in {fmtUSD(terms.payback)} of Seller's future receivables ("Purchased Amount") in exchange for an upfront purchase price of {fmtUSD(draw)} ("Purchase Price"). This Agreement is a sale of future receivables and is not a loan or extension of credit. There is no interest rate or finance charge.

2. Weekly Payment

Seller authorizes Purchaser to debit approximately {fmtUSD(terms.weekly)} from Seller's designated business deposit account once per week via ACH ("Weekly Payment"). Weekly Payment shall continue until the full Purchased Amount has been delivered. Weekly Payment may be reconciled based on actual receivables volume.

3. Subsequent Draws

Seller may, from time to time, request additional advances ("Cash Draws") against unused capacity in Seller's Flex Line, up to a maximum aggregate Purchased Amount of {fmtUSD(spendingLimit * factorRate)} at any time. Each Cash Draw shall be subject to the same Factor Rate of {factorRate.toFixed(2)} and shall be governed by the terms of this Agreement.

4. Early Payment Discount ("PayNow")

If Seller delivers the full Purchased Amount within 60 days of the date hereof, Purchaser shall apply a discount to the Purchased Amount in accordance with the schedule set forth in Schedule A. The applicable discount on the date of this Agreement is fifteen percent (15%).

5. No Personal Guarantee of Repayment

Seller's obligation under this Agreement is limited to the delivery of the Purchased Amount from future receivables. There is no personal guarantee of repayment in the event that Seller's business ceases to generate receivables due to ordinary-course business conditions. Seller does provide a personal guarantee of performance, attached as Exhibit B.

6. Representations and Warranties

Seller represents that all information provided in the application is true and accurate, and that Seller has the authority to enter into this Agreement on behalf of the business.

4 pages · scroll to read in full · or download a copy

{/* Terms snapshot + signature */}

Terms snapshot

{[ ["Spending Limit", fmtUSD(spendingLimit)], ["Initial Draw Amount", fmtUSD(draw)], ["Purchase Price (you get)", fmtUSD(draw)], ["Purchased Amount (you deliver)", fmtUSD(terms.payback)], ["Factor rate", factorRate.toFixed(2)], ["Weekly payment", "~" + fmtUSD(terms.weekly)], ["Est. delivery period", "~" + terms.months + " months"]]. map(([k, v]) =>

{k} {v}

)}

Sign & accept

setSigned(e.target.checked)}> I, Sarah Chen, acting as Owner of Acme Coffee Roasters LLC, have read and agree to the Revenue Purchase & Sale Agreement. setConfirmed(e.target.checked)}> I authorize ACH debits from the connected business deposit account ····4391 in the amount of approximately {fmtUSD(terms.weekly)} each week.

Electronic signature is legally binding under the E-SIGN Act.

); }; // ===================================================================== // 9) FUNDED / WELCOME // ===================================================================== const ScreenFunded = ({ tweaks, draw, selectedOffer, onContinue }) => { // Count-up animation for the hero amount + staggered entrance for chrome. const [countUp, setCountUp] = React.useState(0); React.useEffect(() => { const duration = 1200; const start = performance.now(); let raf; const tick = (now) => { const t = Math.min(1, (now - start) / duration); // ease-out cubic const eased = 1 - Math.pow(1 - t, 3); setCountUp(Math.round(draw * eased)); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [draw]); return (

{/* Decorative rings (static backdrop) */}

{/* Ripple rings emanating from check badge */} {/* Confetti dots — a few subtle accents around the hero */}

{[ { x: -180, y: 10, d: 0, c: "var(--funding-pool)" }, { x: 150, y: -30, d: 80, c: "var(--bright-opportunity)" }, { x: -110, y: 130, d: 140, c: "var(--growth-galaxy)" }, { x: 220, y: 100, d: 200, c: "var(--funding-pool)" }, { x: -60, y: -40, d: 260, c: "var(--bright-opportunity)" }, { x: 100, y: 180, d: 320, c: "var(--funding-pool)" }]. map((p, i) => )}

Your Flex Line is active

{fmtUSD(countUp)} is on the way.

Funds typically arrive in your Chase ····4391 account within 24 hours. We'll text Sarah when it lands.

{[ { ic: "send", t: "Funds in transit", d: "ACH initiated · arrives next biz day" }, { ic: "calendar-clock", t: "Weekly payment starts", d: "First debit: " + new Date(Date.now() + 86400000 * 10).toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) }, { ic: "trending-up", t: fmtUSD(Math.max(0, (selectedOffer ? selectedOffer.limit : tweaks.offerAmount) - draw)) + " still on your line", d: "Draw it anytime you need it" }]. map((p, i) =>

{p.t}

{p.d}

)}

); }; Object.assign(window, { ScreenOffer, ScreenAmount, ScreenPlaid, ScreenBusiness, ScreenOwner, ScreenReview, ScreenDecision, ScreenAgreement, ScreenFunded, fmtUSD, computeTerms });