Skip to content

Marketing landing

The marketing landing renders at /. It is the public-facing pitch, the surface every visitor lands on before they touch the demo. Sections are laid out in a fixed vertical sequence and route into the demo at the foot of the page.

Live: lending-agent-oversight.vercel.app.

  1. Hero with embedded interactive preview.
  2. How it works in three steps.
  3. Features grid of six tiles.
  4. Compared to other oversight tools comparison band.
  5. Audience cards, two side by side.
  6. FAQ, seven items.
  7. FCA-style footer with family cross-links.

Copy left, animated preview right. Background: paper-warm gradient with two soft amber orbs.

  • Eyebrow: Demo · part of the Lending Agent family
  • H1 (Fraunces, gradient italic on the second line): Your AR network, supervised properly.
  • Subhead: An operating system for principal firms. Register every AR. See risk early. Evidence supervision the way the FCA expects.
  • Primary CTA: See it in action (routes to /demo/principal)
  • Secondary CTA: Read the docs (routes to the docs site)
  • Bullet line: No sign-up · Three principal-firm skins · Engineering-spec docs

The hero preview component shows two stacked devices.

  • Tablet (full width on desktop, hidden on mobile): a stripped-down Heritage compliance home. Top chrome, two-pane grid-cols-[140px_1fr] gap-3 p-3, four KPI stubs on the left (32 critical, 3 awaiting notify, 7 overdue, 12 due this month), six-row mini AR table on the right. Every 2400ms the active row index advances. Active row gets ring-1 ring-amber bg-amber-soft/40 and its sparkline redraws over 600ms.
  • Phone (overhanging the tablet, hidden below sm): a Pemberton Mortgages AR view with a Q1 MI return form. Every 4800ms a green check overlay slides up, the Submit button rotates to “Submitted” for 1200ms, then resets.

Two rows in the tablet preview tick band on subsequent cycles: row 3 elevated to high, row 5 high to critical. Reduced motion freezes the cycle on row 1 and renders the phone statically.

Three illustration accents from public/illustrations/, each two-tone (currentColor + amber), each consuming var(--brand-primary) via wrapper style.

StepTitleBodyIllustration
01Register every AR.One row per AR. FRN, permissions, controllers, last review. The register the FCA expects you to keep, in a shape that doesn't go stale.step-register.svg (five circular nodes in a bowtie)
02Detect risk early.Composite risk scores from complaints, breaches, file reviews, MI returns, and the time since you last looked. The amber and red bands surface before the harm does.step-shield.svg (heraldic shield, three rule-stripes)
03Evidence supervision.Breach reports, file reviews, MI returns, annual fitness packets. Every step timestamped, every sign-off attributed, every record exportable.step-evidence.svg (stack of three sheets, amber check)

Section eyebrow How it works. Title Three steps. One supervision loop. Built for PS22/11.

Two-column grid (single column on mobile). Each tile is a Card with an icon, title, and one-paragraph body.

  1. Composite risk scoring. One score per AR, derived from the things you already track. Five bands. Drill into any score to see exactly how it was built.
  2. Breach workflow with FCA timing. SUP 15 notification clocks built in. The countdown is the centrepiece, because the deadline is the only thing that matters.
  3. File review with regulatory rubric. MCOB, ICOBS, CONC checklists ship with the product. Score every case against the rule that actually applies.
  4. AR self-service MI returns. Quarterly returns submitted by the AR, visible to the principal the moment they land. No more spreadsheet email-tag.
  5. Annual fitness review packets. Risk trajectory, breaches, reviews, MI, conduct events. One scrolling document. Sign-off built in.
  6. Multi-vertical skinning. Mortgage, GI, credit broking. Each principal firm gets its own brand and its own rubric. The platform doesn’t care.

A two-column band, no competitor names anywhere.

  • How others do it. Spreadsheets passed by email. Paper checklists nobody updates. Compliance SaaS that everyone hates and nobody opens unless an audit is coming. Risk scores in a manager’s head, not on the page.
  • How Lending Agent Oversight does it. Live register. Structured workflows for breach, file review, and MI. Regulatory rubrics that swap by vertical. Evidence chain by default, exportable on demand.

Two LinkCards, side by side.

  • For principal firms. If you hold the FCA permission and supervise an AR network across mortgage broking, GI, investment, or credit broking. Routes to /introduction/who-its-for/#for-principal-firms.
  • For ARs. If you carry on regulated activity under a principal’s permission and need to file MI returns and breaches. Routes to /introduction/who-its-for/#for-ars.

Seven items, accordion-style.

  1. Does this cover PS22/11 enhanced principal oversight?
  2. Will it fit a vertical that isn’t mortgage, GI, or credit broking?
  3. How do you get ARs to actually use it?
  4. What’s the retention story?
  5. Does it integrate with our existing CRM or compliance system?
  6. How is it priced?
  7. How does this relate to Lending Agent and Lending Agent Presenter?

FCA-style: small print, compliance signposts, family cross-links to lending-agent.vercel.app, lending-agent-presenter.vercel.app, and the GitHub repo.

  • Loading. The page is server-rendered. The hero preview hydrates client-side; the tablet renders static on first paint, then begins cycling once the JS bundle loads. No skeleton needed.
  • Reduced motion. Cycling intervals disabled. Active row fixed to row 1. Phone static. Section reveals collapse to instant.
  • Error. Static HTML; nothing to break. If the demo Vercel deployment is unreachable, the primary CTA still navigates and surfaces the demo’s own error UI.
  • Mobile (< 640px). Hero preview phone hidden, tablet hidden. The hero collapses to copy-only. Features grid stacks to one column. FAQ stays accordion. Footer condenses cross-links to a single column.
  • Tablet (640-1024px). Tablet preview visible at reduced scale, phone overhang appears. Features grid in two columns.
  • Desktop (> 1024px). Full hero preview, both devices, max-width 1280px container.
  • components/marketing/hero.tsx (top-level layout)
  • components/marketing/hero-preview.tsx (tablet plus phone, motion-driven)
  • components/marketing/how-it-works.tsx
  • components/marketing/features-grid.tsx
  • components/marketing/competitor-comparison.tsx
  • components/marketing/audience-cards.tsx
  • components/marketing/faq.tsx
  • components/marketing/site-footer.tsx
  • components/marketing/marketing-nav.tsx

The hero CTA enters the principal-side surface at /demo/principal. The audience card “For ARs” routes into the AR-side surface at /demo/ar. The FAQ “How does this relate to Lending Agent and Lending Agent Presenter?” cross-links to the sibling demos.

For the surface the hero CTA lands on, see Principal home.