// ============================================================
// DEARLY — case study support components.
// Copy source of truth: dearly-brief.md — wording is verbatim.
// Depends on globals from bubbles.jsx (useState) and
// rio-tinto-screens.jsx (ScreenPlaceholder) / imprint-screens.jsx (Mockup).
// Names are prefixed DL/Dearly to avoid clobbering imprint-case-parts.jsx's
// globals (e.g. Personas) — these are plain scripts sharing one window scope,
// not modules, so identical top-level names collide.
// ============================================================
const { useState: useStateDL } = React;
// ---- persona doodles (jade / cool blue, echoing the project's own palette) ----
function EllieDoodle() {
return (
);
}
function SamDoodle() {
return (
);
}
// ---- persona data (verbatim from brief) ----
const DL_PERSONAS = {
ellie: {
name: 'Ellie',
short: 'The outcome-first shopper',
bio: "She doesn't enjoy researching or comparing options, and finds traditional shopping overwhelming when faced with too many choices. If she needs a gift for her gardening-loving mum, she won't browse categories, she'll describe what she wants and expect the system to return ready-to-use options.",
},
sam: {
name: 'Sam',
short: 'The thoughtful but time-poor giver',
bio: 'Sam doesn’t always know what he’s looking for at the start. He knows the person and the occasion, but not how to translate that into a product, the "blank page" problem. He doesn’t want endless browsing either, he wants help shaping vague intent into something concrete.',
},
};
// ---- interactive persona switcher ----
function DearlyPersonas() {
const [who, setWho] = useStateDL('ellie');
const d = DL_PERSONAS[who];
return (
{['ellie', 'sam'].map(k => (
))}
{who === 'ellie' ? : }
{d.name}
{d.short}
{d.bio}
);
}
// ---- "at a glance" stat strip (hero) ----
function DLAtAGlance() {
const stats = [
{ v: '1 week', l: 'From first observation to a testable prototype' },
{ v: '2', l: 'Questions tested at once, product and process' },
{ v: '3', l: 'Directions explored' },
{ v: '2', l: 'High-fidelity prototypes, from one structured prompt' },
{ v: '2', l: 'Personas defined and designed against' },
];
return (
{stats.map((s, i) => (
{s.v}
{s.l}
))}
);
}
// ---- real prototype screenshot frame (screens already include their own
// phone bezel/notch, so this is a plain image card, not the desktop-style
// Mockup browser chrome used elsewhere) ----
function DLShot({ src, alt, caption, hero = false }) {
return (
{caption &&
{caption}
}
);
}
// ---- live, clickable embed of the actual React prototype (built from the
// Creative Text Review source, dropped in as a static site at
// dearly-prototype/) — a real iframe, not a screenshot, so it can be
// clicked through end to end. The prototype's own page lays itself out as
// phone-mock + a "now showing" sidebar side by side, which needs ~900px to
// look right — an iframe can't reflow that on its own, so on narrow
// screens it just clipped. Scaled the whole thing down to fit instead,
// the same measure-and-transform-scale trick the desktop Mockup uses. ----
const NATIVE_W = 900;
const NATIVE_H = 860;
function DLPrototypeEmbed() {
const frameRef = React.useRef(null);
const [scale, setScale] = React.useState(1);
React.useEffect(() => {
const el = frameRef.current; if (!el) return;
const measure = () => { const w = el.clientWidth; if (w) setScale(Math.min(1, w / NATIVE_W)); };
measure();
const ro = new ResizeObserver(measure); ro.observe(el);
return () => ro.disconnect();
}, []);
return (
Live prototype, click through the real thing, start to finish.