);
}
/* ---------- 01 Q&A — conversational answer styled like hero SMS ----------
Mirrors the hero phone bubble system:
- User outgoing bubble = warm grain paper, right-aligned, ink border,
bottom-right tail (3px corner).
- Krew incoming reply = brand orange, left-aligned, ink border,
bottom-left tail (3px corner), white text.
The answer streams in via a clip-path width animation. */
function IllusQA() {
// Bubble paths — match hero geometry (10px radius w/ 3px tail corner).
// User bubble (right-aligned): bottom-right tail at 3px, others at 10px.
// Bounds: x ∈ [42, 190], y ∈ [6, 39]. Drawn clockwise from top-left start.
const userTailPath =
"M52,6 H180 A10,10 0 0 1 190,16 V36 A3,3 0 0 1 187,39 H52 A10,10 0 0 1 42,29 V16 A10,10 0 0 1 52,6 Z";
// Krew bubble (left-aligned): bottom-left tail at 3px, others at 10px.
// Bounds: x ∈ [10, 172], y ∈ [54, 112].
const krewTailPath =
"M20,54 H162 A10,10 0 0 1 172,64 V102 A10,10 0 0 1 162,112 H13 A3,3 0 0 1 10,109 V64 A10,10 0 0 1 20,54 Z";
return (
);
}
/* ---------- 02 Change tracking ---------- */
/* Sequence:
1. ONE centered page visible (WHITE — the prior version).
2. It shifts LEFT; a second page (BLUE — the new revision)
fades + slides in on the RIGHT. Version labels animate on.
3. A diff arrow appears between them (fully clear of both page
edges); on the BLUE (right) page, one of the grey rows gets
progressively highlighted in orange by a left-to-right sweep
— like a highlighter pass. */
function IllusDiff() {
return (
);
}
/* ---------- 03 QA grid ---------- */
/* Original layout preserved (two fixed "fail" cells). Elegant looping
motion added: a thin scan line traces down the grid, and the flagged
cells pulse from grey to orange on loop — quick in, long hold, gentle
out. */
function IllusGrid() {
return (
);
}
/* ---------- 04 Flight watchtower ---------- */
/*
A live "control tower" that loops through alerts on multiple
crew members at once. Each row is a person + their flight; the
chip on the right cycles through DELAYED / WEATHER / GATE
changes on a stagger, with a soft scanning sweep across the
panel and a radar pulse in the corner. Designed to read as
"constantly watching everyone, all the time."
*/
function IllusConflict() {
// Six crew rows. Each row's chip cycles through 4 states with
// a per-row offset so something is always animating somewhere.
const crew = [
{ name: "SHAWN", route: "JFK → LAX", code: "DL 2147" },
{ name: "MAYA", route: "ATL → LAX", code: "AA 1820" },
{ name: "RIO", route: "LHR → LAX", code: "BA 113" },
{ name: "PRIYA", route: "ORD → LAX", code: "UA 401" },
{ name: "NOAH", route: "SFO → LAX", code: "DL 1208" },
{ name: "ELI", route: "MIA → LAX", code: "AA 2266" }];
const W = 220,H = 108;
const rowH = 13;
const rowsTop = 26;
return (
);
}
/*
One status chip in the cycle. Four chips share the same slot
but only one is visible at a time — `--state` on the parent
row decides which. The chip animates in from the right with
a quick scale-snap, then drifts off as the next one slides in.
*/
function ChipState({ label, tone, index }) {
const fill = tone === "ok" ? "var(--krew-ok, #2f6f3e)" :
tone === "warn" ? "var(--krew-blue, #2f55a8)" :
"var(--accent)";
return (
{label}
);
}
/* ---------- 05 Chart ---------- */
function IllusChart() {
// Bar heights, precomputed so animation uses stable values
const bars = [0, 1, 2, 3, 4, 5, 6].map((i) => 20 + i * 7 % 5 * 12 + (i === 4 ? 20 : 0));
return (
);
}
/* ---------- 06 Daily Brief — personalized morning brief ---------- */
/*
A single brief card on top, with two stacked card edges peeking out
behind it (different role tags) — reads as "every role gets their
own version every morning." The role tag, timestamp, and bullets
all subtly cycle through three personas (RONNIE, AD, UPM) so the
card feels alive without being noisy. Pure CSS animation via
keyframes on the .brief-* classes (defined in landing.css).
*/
function IllusBrief() {
return (
);
}
function IllusChat() {
return (
);
}
window.Pillars = Pillars;