// Hero.jsx — the pre-launch page hero: headline + CTA on the left, // CSS-animated product window on the right cycling through four format outputs. window.HeroProductShot = function HeroProductShot() { const specialists = window.SPECIALISTS || []; // Frameless portraits live at /illustrations-headshots-frameless/ (site root). const frameless = (s) => { if (!s) return ""; const filename = s.portrait.split("/").pop(); return `/illustrations-headshots-frameless/${filename}`; }; return (
{/* LEFT — text */}

Build a one-person content studio
that produces like a
ten-person team.

Ten specialists, trained on your voice, drafting content across every format you publish. Ready when you sit down to share.

{/* RIGHT — animated browser window */}
); }; // ── The animated product window ───────────────────────────── window.HeroStudioWindow = function HeroStudioWindow({ specialists, frameless }) { // Four drafts across visually distinct formats. Same topic, different outputs. const TOPIC = "studios of one"; const drafts = [ { specialistIdx: 0, formatKey: "newsletter", formatLabel: "Newsletter draft", btn: "newsletter" }, { specialistIdx: 2, formatKey: "social", formatLabel: "LinkedIn post", btn: "post" }, { specialistIdx: 8, formatKey: "video", formatLabel: "Short-form video", btn: "video" }, { specialistIdx: 3, formatKey: "podcast", formatLabel: "Podcast outline", btn: "podcast" }, ]; // selectedIdx drives sidebar highlight + generate-button label + eyebrow. // displayedIdx drives the artifact in the canvas (only updates after generate). const [selectedIdx, setSelectedIdx] = React.useState(0); const [displayedIdx, setDisplayedIdx] = React.useState(-1); const [isGenerating, setIsGenerating] = React.useState(false); const [hasGeneratedOnce, setHasGeneratedOnce] = React.useState(false); const [topicTyped, setTopicTyped] = React.useState(false); // Animated demo cursor const windowRef = React.useRef(null); const topicRef = React.useRef(null); const buttonRef = React.useRef(null); const sidebarRefs = React.useRef([]); const overflowRef = React.useRef(null); const [cursorTarget, setCursorTarget] = React.useState("none"); // "topic" | "specialist" | "generate" | "none" const [cursorSpecialistIdx, setCursorSpecialistIdx] = React.useState(0); const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0, visible: false }); const [pulseKey, setPulseKey] = React.useState(0); // Master sequencer — runs once on mount. Drives the whole demo loop. React.useEffect(() => { let cancelled = false; const timers = []; const after = (ms, fn) => { const t = setTimeout(() => { if (!cancelled) fn(); }, ms); timers.push(t); }; let current = 0; // current selected idx (0-3) // ── Intro: cursor → topic, type, → generate, click, reveal newsletter ── after(450, () => setCursorTarget("topic")); after(1300, () => { setTopicTyped(true); setPulseKey(k => k + 1); }); after(2500, () => setCursorTarget("generate")); after(3500, () => setPulseKey(k => k + 1)); after(3800, () => { setIsGenerating(true); setCursorTarget("none"); }); after(4500, () => { setDisplayedIdx(0); setHasGeneratedOnce(true); setIsGenerating(false); }); // ── Looping cycle: select-next-specialist → generate → reveal ── const cycle = () => { if (cancelled) return; const nextIdx = (current + 1) % drafts.length; after(2400, () => { setCursorSpecialistIdx(nextIdx); setCursorTarget("specialist"); }); after(3300, () => { setPulseKey(k => k + 1); setSelectedIdx(nextIdx); current = nextIdx; }); after(3700, () => setCursorTarget("generate")); after(4700, () => setPulseKey(k => k + 1)); after(5050, () => { setIsGenerating(true); setCursorTarget("none"); }); after(5800, () => { setDisplayedIdx(nextIdx); setIsGenerating(false); }); after(5900, cycle); }; after(4500, cycle); return () => { cancelled = true; timers.forEach(clearTimeout); }; }, []); // The "selected" draft (for sidebar/button/eyebrow) and "displayed" draft (for artifact) const selectedDraft = drafts[selectedIdx]; const displayedDraft = displayedIdx >= 0 ? drafts[displayedIdx] : null; const specialist = specialists[selectedDraft.specialistIdx] || specialists[0]; const sidebarSpecialists = specialists.slice(0, 6); // Cursor positioner — recompute when target or pointed-at specialist changes React.useEffect(() => { const recompute = () => { if (!windowRef.current) return; const wr = windowRef.current.getBoundingClientRect(); let target = null; if (cursorTarget === "topic") target = topicRef.current; else if (cursorTarget === "specialist") { const sIdx = drafts[cursorSpecialistIdx].specialistIdx; target = sIdx <= 5 ? sidebarRefs.current[sIdx] : overflowRef.current; } else if (cursorTarget === "generate") target = buttonRef.current; if (target && cursorTarget !== "none") { const tr = target.getBoundingClientRect(); setCursorPos({ x: tr.left - wr.left + tr.width / 2, y: tr.top - wr.top + tr.height / 2, visible: true, }); } else { setCursorPos(p => ({ ...p, visible: false })); } }; recompute(); window.addEventListener("resize", recompute); return () => window.removeEventListener("resize", recompute); }, [cursorTarget, cursorSpecialistIdx]); return (
{/* Browser chrome */}
{["#ff5f57", "#febc2e", "#28c840"].map(c => ( ))}
solocontent.studio/app
{/* Sidebar + main */}
{/* Sidebar — matches the real Studio's dark ink sidebar */}
{sidebarSpecialists.map((s, i) => { const isActive = i === selectedDraft.specialistIdx; return (
(sidebarRefs.current[i] = el)} className={isActive ? "scs-hero-specialist-active" : ""} style={{ width: 36, height: 36, borderRadius: "50%", background: isActive ? `var(--${s.accent}-3)` : "hsl(348 40% 18%)", border: isActive ? "2px solid var(--orange)" : "2px solid transparent", overflow: "hidden", position: "relative", transition: "all 0.4s ease", display: "flex", alignItems: "center", justifyContent: "center", }} > {s.title}
); })}
+4
{/* Main content */}
{/* Specialist eyebrow */}
{specialist.title} · {selectedDraft.formatLabel}
{/* Topic input + generate button row (persistent across cycles) */}
TOPIC {TOPIC}
{/* The artifact — keyed on displayedIdx so it re-fades when generation reveals */}
{displayedDraft && displayedDraft.formatKey === "newsletter" && } {displayedDraft && displayedDraft.formatKey === "social" && } {displayedDraft && displayedDraft.formatKey === "video" && } {displayedDraft && displayedDraft.formatKey === "podcast" && }
{/* Shared status chip — appears once the first draft is revealed */} {hasGeneratedOnce && (
✓ Solid first draft Ready for your human touch
)}
{/* Animated demo cursor — visits topic → active specialist → generate */}
{/* click pulse — re-keyed each arrival to retrigger animation */}
{/* Personalization badges below the window — appear on first generation so they feel like they were applied during the generating moment. */}
); }; // ── Personalization badges (below the window) ─────────────── window.HeroFloatingBadges = function HeroFloatingBadges({ visible }) { // Staggered horizontally with slight vertical offsets so they don't // sit on a rigid baseline. Each gently floats once visible. const badges = [ { label: "Your voice applied", accent: "coral", offsetY: 0, delayMs: 120, floatDelay: 0 }, { label: "Content pillars referenced", accent: "iris", offsetY: 14, delayMs: 320, floatDelay: 1.2 }, { label: "Audience tone matched", accent: "sage", offsetY: 4, delayMs: 520, floatDelay: 2.4 }, ]; return ( <>
{badges.map((b) => (
✓ {b.label}
))}
); }; // ── NEWSLETTER artifact ───────────────────────────────────── window.ArtifactNewsletter = function ArtifactNewsletter() { return (
{/* From / Subject strip */}
From: caroline@solocontent.studio
Subject: Studios of one
{/* Banner */}
{/* Body */}

Why solopreneurs are rebranding as studios of one

The word "team" implies a payroll and a Slack workspace. A studio implies intention, craft, and a point of view.
This week's letter is about the quiet shift from "solo business" to "studio of one."
); }; // ── SOCIAL POST artifact ──────────────────────────────────── window.ArtifactSocial = function ArtifactSocial() { return (
{/* Avatar + name */}
Caroline Zook
Founder · The Solo Content Studio · 2h
⋯
{/* Post body */}
The hardest part of making content solo isn't writing.
It's remembering who you are, every time, in every format.
I built a studio that does the remembering for me.
{/* Action bar */}
{["♡ Like", "💬 Comment", "↻ Repost", "⇪ Send"].map((label, i) => ( {label} ))}
); }; // ── SHORT-FORM VIDEO artifact ─────────────────────────────── window.ArtifactVideo = function ArtifactVideo() { const beats = [ { label: "HOOK", text: "Here's the content math nobody did for you." }, { label: "BEAT", text: "Nine formats. Four platforms. One of you." }, { label: "PAYOFF", text: "A studio does the math instead." }, ]; return (
{/* 9:16 phone frame */}
● REC
"A studio does the math instead."
▶
{/* Script beats on the right */}
{beats.map((b, i) => (
{b.label}
{b.text}
))}
); }; // ── PODCAST artifact ──────────────────────────────────────── // Square cover art on the left, episode outline with timestamped chapters on the right. window.ArtifactPodcast = function ArtifactPodcast() { const chapters = [ { t: "0:00", title: "Cold open · The word studio" }, { t: "2:45", title: "Why the language change matters" }, { t: "9:10", title: "Three shifts in how you work" }, { t: "17:30", title: "Try this one thing this week" }, ]; return (
{/* Cover art */}
EP · 24
Studios of one
{/* Chapters */}
Episode outline
{chapters.map((c, i) => (
{c.t} {c.title}
))}
); };