// previews.jsx — Noah Aurora-compliant marketing previews
// ── Noah logo — interlocking aurora rings + indigo focal dot ─────────────
//
// Two render modes:
// as="symbol" (DEFAULT for the marketing site) — bare mark, no plate,
// no backplate, no shadow. The symbol blends into the
// page surface (cream marketing or dark in-app) instead
// of reading as an "iOS app icon stamped on the page."
// as="icon" — full rounded-square plate with faint aurora wash
// and indigo drop-glow. Reserved for the dock-style
// contexts where the mark sits ON its own surface
// (e.g. installer screen, dock preview). The favicon.svg
// is a separate file because the browser tab needs the
// plate to read at 16px.
//
// `on="auto" | "light" | "dark"` controls the symbol's "behind-the-rings"
// halo color for "icon" mode and is otherwise inert.
// Renders the canonical Noah brand mark. The geometry lives in
// noah/brand/build.py and ships to /noah-icon.svg via brand/sync.sh —
// do NOT reintroduce CSS-built arcs here, or surfaces will drift.
//
// Props (radius/glow/on/as) are kept for back-compat with existing call
// sites but are no-ops; the SVG itself carries glow + transparency.
function NoahLogo({ size = 40, radius, glow, on, as }) {
return (
);
}
// ── Lucide-style icons (1.75 stroke) matching src/shared.jsx ─────────────
function I({ d, size = 18 }) {
return ;
}
const Icon = {
Gauge: (p) => } />,
Wifi: (p) => } />,
Alert: (p) => } />,
Cable: (p) => } />,
Battery: (p) => } />,
Refresh: (p) => } />,
Settings: (p) => } />,
Msg: (p) => } />,
HardDrive:(p) => } />,
Mic: (p) => } />,
Cloud: (p) => } />,
Sparkle: (p) => ,
Arrow: (p) => } />,
Check: (p) => ,
};
// Tiles tuned for the ICP: knowledge worker whose {device} is their primary
// income tool. Each tile is a moment that breaks the workday — fast to
// self-identify, actually fixable by Noah's tool set.
// {device} in title is substituted to "Mac" / "PC" by WhatIFix in site.jsx.
const ISSUES = [
{ key: "slow", Icon: Icon.Gauge, title: "My {device} feels slow", sub: "Freezes, fan spins, apps lag" },
{ key: "wifi", Icon: Icon.Wifi, title: "Wi-Fi or internet issues", sub: "Slow, dropping, fails on Zoom" },
{ key: "crash", Icon: Icon.Alert, title: "An app keeps crashing", sub: "Quits, freezes, won't open" },
{ key: "storage", Icon: Icon.HardDrive, title: "Storage almost full", sub: "Can't save, downloads piling up" },
{ key: "battery", Icon: Icon.Battery, title: "Battery drains fast", sub: "Dies mid-meeting, runs hot" },
{ key: "av", Icon: Icon.Mic, title: "Mic, camera, or audio", sub: "Won't work in Zoom or Teams" },
{ key: "sync", Icon: Icon.Cloud, title: "Files won't sync", sub: "iCloud, Dropbox, OneDrive stuck" },
{ key: "other", Icon: Icon.Msg, title: "Something else", sub: "Tell me in your words" },
];
// ── macOS window chrome — matches the in-app MacChrome ───────────────────
function MacChrome({ children, title = "Noah", style = {} }) {
return (
{title}
{children}
);
}
// ── Windows 11 window chrome ─────────────────────────────────────────────
// Mirrors Windows 11 conventions: title + icon on the left, system
// buttons (minimize / maximize / close) as small SVG glyphs on the
// right. Less radius than macOS (Win11 uses ~8 px on app windows).
// Close button hovers red — kept that detail because Win users notice
// when it doesn't.
function WindowsChrome({ children, title = "Noah", style = {} }) {
const btn = {
width: 36, height: 32,
display: "flex", alignItems: "center", justifyContent: "center",
color: "var(--text-muted)",
};
return (
{/* Small app icon, left of title */}
{title}
{/* Min / Max / Close buttons */}
{/* minimize — single horizontal line */}
{/* maximize — square outline */}
{/* close — X */}
{children}
);
}
// ── OsChrome — picks the right chrome from window.NOAH_PLATFORM ──────────
// Used by preview components so the /windows landing renders Windows
// chrome and the / landing renders Mac chrome without each preview
// component having to know about the platform.
function OsChrome(props) {
const isWin = typeof window !== "undefined" && window.NOAH_PLATFORM === "windows";
return isWin ? : ;
}
// ── Aurora blob — ambient lighting inside frames ─────────────────────────
function AuroraBlob({ size = 480, x = "50%", y = "20%", opacity = 0.35 }) {
return (
);
}
// ── Issue picker — Aurora canonical (matches Variation A) ────────────────
function IssuePicker({ activeKey = "slow", compact = false, device = "Mac" }) {
return (
Step 1 of 3
What's going on with your computer?
Pick the closest match — you can tell me more in a moment.
{ISSUES.map((tile) => {
const Ic = tile.Icon;
const active = tile.key === activeKey;
const title = tile.title.replace("{device}", device);
return (
{title}
{tile.sub}
);
})}
);
}
// ── Conversation — Aurora canonical ──────────────────────────────────────
function NoahBubble({ children }) {
return (
{children}
);
}
function UserBubble({ children }) {
return (
{children}
);
}
function DiagnosticCard() {
// Tool names shown in the preview are illustrative of what Noah's
// hand-built tools look like; the marketing transparency argument
// ("auditable, not arbitrary shell") doesn't depend on the exact
// platform prefix. Generic names read the same on Mac and Windows
// landings and avoid a Mac-flavored bias on /windows.
const lines = [
{ label: "Listed running processes", tool: "list_processes", done: true },
{ label: "Checked CPU & memory", tool: "system_info", done: true },
{ label: "Scanning disk activity…", tool: "disk_usage", done: false },
];
return (
My laptop has been crawling all morning. Slack is laggy too \u2014 started yesterday.
Let me check before I suggest anything.
Found it. Slack Helper has leaked 11 GB of memory after running for 4 days.
{/* Composer */}
Reply to Noah…
);
}
// ── Mini conversation — for hero chat variant ────────────────────────────
function MiniConversation() {
return (
My laptop has been crawling all morning. Slack is laggy too.
Found it. Slack Helper has leaked 11 GB of memory after running for 4 days.
);
}
// ── Lucide-style icons (1.75 stroke) matching src/shared.jsx ─────────────
function I({ d, size = 18 }) {
return ;
}
const Icon = {
Gauge: (p) =>