/* Product-UI fragments used inside marketing cards. Cosmetic only. */
const { Tag, Toggle, Icon } = window.DuologueDesignSystem_a613c9;
const shell = {
background: "var(--white)", borderRadius: "var(--radius-md)",
border: "var(--border-hairline)", overflow: "hidden", width: "100%"
};
const rowLine = { display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderBottom: "var(--border-hairline)" };
const mono = { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };
/* ============================================================
Original marketing mocks, used by screen-product / screen-pricing.
============================================================ */
function SequenceMock() {
const steps = [
{ d: "Day 0", t: "Cold email · opener from their launch post", s: "Sent" },
{ d: "Day 2", t: "Call · reference the pricing question", s: "Queued" },
{ d: "Day 5", t: "LinkedIn · one line, no pitch", s: "Draft" }
];
return
Sequence · Series B ops leadsLive
{steps.map((s, i) =>
{s.d}
{s.t}
{s.s}
)}
;
}
function MemoryMock() {
const facts = [
["Asked about SOC 2 twice, send the report first.", "Objection"],
["Budget cycle closes 31 March.", "Timing"],
["Dana owns the tool decision, not Marcus.", "Champion"]
];
return
All (28)
Objections (9)People (12)
{facts.map(([t, tag], i) =>
{t}{tag}
)}
;
}
function CallPrepMock() {
return
Call in 15 min · Northbeam
Open with the migration, not the demo
{["They churned off Outreach in Jan.", "Last reply: “send pricing after the board meeting”.", "Two reps already trialling."].map((t, i) =>
{t}
)}
;
}
function AutomationsMock() {
const rows = [["Draft the nudge when a thread goes quiet", "3 days after last reply"], ["Log the call summary to HubSpot", "On call end"]];
return
{rows.map(([t, w], i) =>
)}
Today · 6 threads need youFocus
{rows.map(([n, s, st, tone], i) =>
{n}
{s}
{st}
)}
Suggested
“You mentioned the board call, did pricing land?”
;
}
/* ============================================================
Duologue product UI, ported from the "Duologue Design System -
Components" library so the marketing visuals match the real app.
Everything below renders inside a `.duo-cmp` token scope (defined
in index.html) which supplies the Components palette + Figtree.
============================================================ */
const CMP_AVATAR_TINTS = [
["var(--violet-100)", "var(--violet-600)"],
["var(--blue-100)", "var(--blue-700)"],
["var(--green-100)", "var(--green-700)"],
["var(--teal-100)", "var(--teal-600)"],
["var(--amber-50)", "var(--amber-700)"]
];
function CAvatar({ name = "", size = 34, badge, style }) {
const initials = name.split(/[\s-]+/).filter(Boolean).slice(0, 2).map(w => w[0]).join("").toUpperCase();
const idx = Math.abs([...name].reduce((a, c) => a + c.charCodeAt(0), 0)) % CMP_AVATAR_TINTS.length;
const [bg, fg] = CMP_AVATAR_TINTS[idx];
return
{initials}
{badge ? {badge} : null}
;
}
const CMP_BADGE_TONES = {
neutral: ["var(--surface-active)", "var(--text-secondary)"],
success: ["var(--green-50)", "var(--green-700)"],
accent: ["var(--blue-50)", "var(--blue-700)"],
warning: ["var(--amber-50)", "var(--amber-700)"],
danger: ["var(--red-50)", "var(--red-700)"]
};
function CBadge({ children, tone = "neutral", caps = true, dot = false, style }) {
const [bg, fg] = CMP_BADGE_TONES[tone] || CMP_BADGE_TONES.neutral;
return
{dot ? : null}{children}
;
}
function CCaps({ children, color = "var(--text-muted)", style }) {
return {children};
}
function CCard({ children, tone = "default", padding = "var(--pad-card)", style }) {
const tones = {
default: { background: "var(--surface-card)", border: "1px solid var(--border-default)" },
sunken: { background: "var(--surface-sunken)", border: "1px solid transparent" },
accent: { background: "var(--accent-tint)", border: "1px solid var(--blue-100)" }
};
return {children}
;
}
function CTabs({ tabs, value }) {
return
{tabs.map(t => {
const active = t.id === value;
return
{t.label}{typeof t.count === "number" ? {t.count} : null}
;
})}
;
}
function CRow({ subject, person, tag, badge, time, unread, selected }) {
return
{subject}
{person}
{tag ? {tag} : null}
{time}
;
}
function CIconBtn({ name }) {
return
;
}
// HERO CENTERPIECE, the account-native inbox: nav rail + conversation list +
// account detail rail. Framed like a real product screenshot.
function WorkspaceMock() {
const rows = [
{ subject: "Renewal question on our seats", person: "Russ Hanneman · Trescomas", tag: "Long-term customer", badge: "$", time: "1h", unread: true },
{ subject: "New VP Sales just started", person: "Dana Okafor · Kestrel", tag: "New champion", time: "2h", unread: true, selected: true },
{ subject: "Can we sync HubSpot fields?", person: "Jian-Yang · Pied Piper", time: "3h", unread: true },
{ subject: "Security review before we renew", person: "Priya Raman · Northbeam", tag: "SOC 2 sent", time: "Yesterday" },
{ subject: "Budget frozen until Q3", person: "Marcus Vance · Ovion", time: "2d" }
];
const changed = [["banknote", "Raised a $40M Series B", "2h"], ["user-plus", "Hired a VP of Revenue", "1d"], ["refresh-cw", "Moved off Outreach", "3d"]];
return
{/* window chrome */}
{["#E5484D", "#E9A33A", "#2CBB6B"].map(c => )}
duologue · Acme Sales workspace
{/* nav rail */}
{/* list column */}
{/* account detail rail */}
Kestrel
Series B · 120 employees
What changed
{changed.map(([ic, t, w], i) =>
{t}
{w}
)}
Objections in play
Not ready to scale tooling
Timing · end of quarter
Suggested reply
Lead with the raise, teams hiring 8 AEs feel the tooling gap by month two.
;
}
// VALUE 1, "Learns what's changing at each account, periodically."
function SignalsCardMock() {
const signals = [["banknote", "Raised a $40M Series B", "Funding", "2h"], ["user-plus", "Hired a VP of Revenue", "People", "1d"], ["refresh-cw", "Moved off Outreach", "Tech", "3d"], ["building-2", "Opened a London office", "Expansion", "1w"]];
return
Northbeam
Refreshed 2h ago
{signals.map(([ic, t, kind, w], i) =>
{t}
{kind}
{w}
)}
Checks every account, hourly
;
}
// VALUE 2, "Turns account data into context automatically."
function ContextCardMock() {
return
Auto-context · KestrelObjection · timing
What changed
{["Series B · $40M", "New VP Sales", "Hiring 8 AEs"].map((s, i) => {s})}
Duologue turns it into the line you send
“Congrats on the raise, teams hiring 8 AEs usually feel the tooling gap by month two. Worth 20 minutes before the new reps ramp?”
Breaks “not ready to scale tooling”
;
}
// VALUE 3, "Keeps the thread coherent across multiple channels."
function ThreadCardMock() {
const items = [["mail", "Email", "Asked for pricing after the board meeting", "Mon"], ["linkedin", "LinkedIn", "Liked the Series B launch post", "Wed"], ["phone", "Call", "Said Dana owns the decision, not Marcus", "Thu"]];
return
{items.map(([ic, ch, t, when], i) => )}
Next touch · EmailDraft ready
“Dana, sending pricing ahead of the 31st, like you asked on our call.”
;
}
Object.assign(window, {
SequenceMock, MemoryMock, CallPrepMock, AutomationsMock, InboxMock,
WorkspaceMock, SignalsCardMock, ContextCardMock, ThreadCardMock
});
