// ============================================================
// crm-onboarding.jsx — Cadence CRM · auth + onboarding
// ------------------------------------------------------------
// Full-screen flows that precede the app. Same minimal/light
// aesthetic as the Sidebar app shell. Built on vibn-ai-templates
// components (Button, Field, Input, Card, Badge, Avatar, Icon…).
// ============================================================
// Cadence brand mark — concentric "pulse" rings (a CRM cadence)
const CadenceMark = ({ size = 22 }) => (
);
const onbFont = "'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif";
// ── Shared scaffold: brand top bar + footer, centered slot ───
const OnbScaffold = ({ children, right, maxWidth = 460 }) => (
{children}
);
const SocialButtons = ({ stacked }) => (
);
// ── 1 · SIGN UP ──────────────────────────────────────────────
const CRMSignUp = () => (
Have an account? Sign in}>
Create your Cadence account
Free for your whole team for 14 days. No card required.
}/>
);
// ── 2 · SIGN IN ──────────────────────────────────────────────
const CRMSignIn = () => (
New here? Create an account}>
Welcome back
Sign in to the Northwind workspace.
Your company uses SSO?
Use SSO →
);
// ── Stepper used across onboarding steps ─────────────────────
const Stepper = ({ step }) => {
const steps = ["Workspace", "About you", "Import", "Invite"];
return (
{steps.map((s, i) => {
const state = i < step ? "done" : i === step ? "active" : "todo";
return (
{state === "done" ? : i + 1}
{s}
{i < steps.length - 1 && }
);
})}
{title}
{sub}
{selected &&
}
);
// ── 3 · ONBOARDING · step 1 — create workspace ───────────────
const CRMOnbWorkspace = () => (
Name your workspace
This is where your team's contacts, companies and deals will live.
You can invite teammates in a moment.
);
// ── 4 · ONBOARDING · step 2 — about you ──────────────────────
const CRMOnbAbout = () => (
Tell us about your team
We'll tailor your pipeline stages and views to match.
What will you use Cadence for?
How big is your team?
);
// ── 5 · ONBOARDING · step 3 — import contacts ────────────────
const CRMOnbImport = () => {
const Source = ({ icon, title, sub, badge }) => (
{title}{badge && {badge}}
{sub}
);
return (
Bring your contacts in
Cadence dedupes and enriches automatically. Nothing is shared.
);
};
// ── 6 · ONBOARDING · step 4 — invite team ────────────────────
const CRMOnbInvite = () => {
const Row = ({ email, role, color }) => (
);
return (
Invite your team
Cadence is better with the people you sell with.
To be invited · 3
|
|
|
cadence.app/join/northwind-7f4a…
);
};
Object.assign(window, {
CadenceMark, CRMSignUp, CRMSignIn,
CRMOnbWorkspace, CRMOnbAbout, CRMOnbImport, CRMOnbInvite,
});