Two-column layout with live preview pane

Featurekamo-internal
Shipped
May 30, 2026 at 1:25 AM UTC
Author
kamo
Commit
f273999

The new-offer page was a tall narrow column on wide screens — wasted half the viewport. Now uses CSS Grid with the form on the left (5fr) and a live "Offer Preview" pane on the right (7fr) that updates as the operator types. Single-column on small screens (< lg). Form side: - Section blocks with icons (Product · Borrower · Amount · Custom Terms) - Borrower fields stack vertically (member id + state) in a more compact presentation now that horizontal space is reserved for the preview Preview side (only when a product is chosen): - Hero card with gradient background, kind chip, product name, and a human-readable headline ("$5,000 · 12-month installment · 14.99% APR" / "$25,000 line of credit · 9.99% rate") - 4-tile stats grid: principal, rate, monthly payment, term (installment) or principal, rate, draw period, repayment period (LOC) - Fee breakdown (origination/late/NSF/annual) with "custom" chip when an override is applied - Cost summary panel: net disbursed, total interest, total cost - Amortization schedule peek: first 3 + last 3 rows with a "{N} more payments…" gap row for terms > 6 months - TILA reminder note explaining the backend computes the true APR + builds the real schedule + renders disclosures on send All math is client-side straight-line amortization (P × r × (1+r)^n / ((1+r)^n - 1)) — a faithful preview, not the final disclosed APR. Backend still owns truth.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing