// OutputShowcase — tabbed left-rail + right-stage showcase.
// Architecture mirrors the template-library layout: clickable rows
// on the left, big preview panel on the right.
const { useState: useSS, useEffect: useSE, useRef: useSR } = React;
const FRAMELESS = "/illustrations-headshots-frameless";
const SHOWCASE_ITEMS = [
{
slug: "newsletters",
name: "Weekly Newsletters",
cat: "WRITTEN", catAccent: "coral",
obj: "assets/objects/newsletters.png",
stageBg: "var(--coral-3)",
specTitle: "Newsletter Editor",
specAvatar: `${FRAMELESS}/hedgehog_newsletter-editor.png`,
specDot: "var(--orange)",
duration: "~6 min",
headline: "Weekly Newsletters",
sub: "In your voice. In your rhythm. Forever.",
preview: "newsletter",
},
{
slug: "text-posts",
name: "Text Posts",
cat: "SOCIAL", catAccent: "pink",
obj: "assets/objects/twitter-threads.png",
stageBg: "var(--pink-3)",
specTitle: "Social Director",
specAvatar: `${FRAMELESS}/parrot_social-director.png`,
specDot: "var(--pink-2-soft)",
duration: "~2 min",
headline: "Text Posts, Everywhere",
sub: "One idea. Rewritten for Twitter, LinkedIn, and Threads.",
preview: "threads",
},
{
slug: "short-form",
name: "Short-form Video",
cat: "SOCIAL", catAccent: "pink",
obj: "assets/objects/instagram-reels.png",
stageBg: "var(--ice-3)",
specTitle: "Video Producer",
specAvatar: `${FRAMELESS}/otter_video-producer.png`,
specDot: "var(--ice-2)",
duration: "~4 min",
headline: "Reels, TikToks, Shorts",
sub: "Hook, script, captions, platform-native, ready to record.",
preview: "shortform",
},
{
slug: "carousels",
name: "Carousels",
cat: "SOCIAL", catAccent: "pink",
obj: "assets/objects/carousel.png",
stageBg: "var(--pink-3)",
specTitle: "Slide Designer",
specAvatar: `${FRAMELESS}/magpie_slide-designer.png`,
specDot: "var(--pink-2)",
duration: "~5 min",
headline: "Carousels",
sub: "Instagram and LinkedIn decks that actually get saved.",
preview: "carousel",
},
{
slug: "long-form-video",
name: "Long-form Scripts",
cat: "VIDEO", catAccent: "ice",
obj: "assets/objects/video.png",
stageBg: "var(--ice-3)",
specTitle: "Video Producer",
specAvatar: `${FRAMELESS}/otter_video-producer.png`,
specDot: "var(--ice-2)",
duration: "~8 min",
headline: "Long-form Video Scripts",
sub: "YouTube, webinars, and keynotes. Beat-for-beat.",
preview: "script",
},
{
slug: "podcast",
name: "Podcast Outlines",
cat: "SPOKEN", catAccent: "gold",
obj: "assets/objects/podcast.png",
stageBg: "var(--gold-3)",
specTitle: "Podcast Producer",
specAvatar: `${FRAMELESS}/bear_podcast-producer.png`,
specDot: "var(--gold-2-soft)",
duration: "~5 min",
headline: "Podcast Outlines & Show Notes",
sub: "Threads of thought. Timestamps. Pull-quotes. Done.",
preview: "podcast",
},
{
slug: "sales",
name: "Sales Pages",
cat: "MARKETING", catAccent: "iris",
obj: "assets/objects/sales-pages.png",
stageBg: "var(--iris-3)",
specTitle: "Sales Page Builder",
specAvatar: `${FRAMELESS}/raccoon_sales-page-builder.png`,
specDot: "var(--iris-2)",
duration: "~12 min",
headline: "Sales Pages",
sub: "Long-form conversion copy that sounds like you, not a funnel.",
preview: "sales",
},
{
slug: "email",
name: "Email Sequences",
cat: "MARKETING", catAccent: "sage",
obj: "assets/objects/sequences.png",
stageBg: "var(--sage-3)",
specTitle: "Email Strategist",
specAvatar: `${FRAMELESS}/owl_email-strategist.png`,
specDot: "var(--sage-2)",
duration: "~7 min",
headline: "Email Sequences",
sub: "Welcome flows, nurtures, and launches in your cadence.",
preview: "email",
},
{
slug: "slides",
name: "Slide Decks",
cat: "VISUAL", catAccent: "pink",
obj: "assets/objects/presentations.png",
stageBg: "var(--pink-3)",
specTitle: "Slide Designer",
specAvatar: `${FRAMELESS}/magpie_slide-designer.png`,
specDot: "var(--pink-2)",
duration: "~6 min",
headline: "Slide Decks",
sub: "Keynotes and talks drafted in your voice, ready to design.",
preview: "slides",
},
{
slug: "brand",
name: "Brand & Design System",
cat: "STRATEGY", catAccent: "gold",
obj: "assets/objects/brand-kit.png",
stageBg: "var(--gold-3)",
specTitle: "Chief Brand Officer",
specAvatar: `${FRAMELESS}/badger_brand-officer.png`,
specDot: "var(--gold-2)",
duration: "~once",
headline: "Your Brand, Codified",
sub: "Voice, tone, guardrails. The foundation every specialist reads from.",
preview: "brand",
},
{
slug: "repurpose",
name: "Content Repurposer",
cat: "REMIX", catAccent: "lime",
obj: "assets/objects/content-repurposer.png",
stageBg: "var(--lime-3)",
specTitle: "Content Repurposer",
specAvatar: `${FRAMELESS}/octopus_content-repurposer.png`,
specDot: "var(--lime-2)",
duration: "~3 min",
headline: "One Asset → Ten Formats",
sub: "Drop in a podcast or post. Out comes the whole content week.",
preview: "repurpose",
},
];
// ── Preview panels ────────────────────────────────────────
function PhoneFrame({ children, tint = "var(--white)" }) {
return (
);
}
function PreviewNewsletter() {
return (
Issue No. 47 · Tuesday
The quiet art of saying less.
I spent six years writing posts that ended with a tidy takeaway. It's the most overrated move in creator content…
{["Voice ✓", "Audience ✓", "Pillar: Craft"].map(t => (
{t}
))}
);
}
function PreviewThreads() {
const platforms = [
{ name: "Twitter / X", color: "var(--ink)", bg: "var(--white)", body: "the best clients don't want more options. they want one option they can trust. here's how i figured that out after 200 projects →" },
{ name: "LinkedIn", color: "var(--ice-1)", bg: "var(--white)", body: "After 200 client projects I've come to believe this: the best clients don't want more options. They want one option they can trust." },
{ name: "Threads", color: "var(--pink-1)", bg: "var(--white)", body: "hot take: 200 client projects in and I'm convinced, the best clients aren't shopping for options. they want one clear bet they can make." },
];
return (
{platforms.map(p => (
))}
{/* Scene background */}
{/* Top: Reels label + IG logo */}
{/* On-screen text */}
You're not behind.
You're outnumbered.
{/* Right action rail — unified line icons */}
{[
{
label: "24.1K",
svg: (
),
},
{
label: "486",
svg: (
),
},
{
label: "",
svg: (
),
},
{
label: "",
svg: (
),
},
].map((a, i) => (
{a.svg}
{a.label &&
{a.label}
}
))}
{/* Spinning audio disc */}
{/* Bottom byline + caption */}
The fifth option solopreneurs haven't heard about yet.
original audio · @yourhandle
{["var(--coral-2)", "var(--pink-2)", "var(--orange)", "var(--gold-2)"].map((c, i) => (
))}
{slides.map((s, i) => (
))}
YouTube · 9-minute essay · Beat sheet
{lines.map((l, i) => (
))}
);
}
function PreviewPodcast() {
return (
EP. 84 · SHOW NOTES
The case for a studio of one.
{["02:14 · Why hiring freelancers fails", "14:32 · The context problem", "26:40 · Ten specialists, one window", "38:15 · What a Tuesday looks like"].map(l => (
{l}
))}
"You're not behind. You're outnumbered. And that's a fixable problem."
);
}
function PreviewSales() {
return (
INTRODUCING
Build a one-person studio that ships like ten.
Ten specialists. One brand-context layer. A studio that runs every day after cohort.
Join the founding cohort →
Problem → Options → Fifth way → Proof → Price → FAQ → CTA
);
}
function PreviewEmail() {
const seq = [
{ t: "Day 00 · Welcome", s: "The thing you came here for." },
{ t: "Day 02 · The reframe", s: "You're not behind." },
{ t: "Day 05 · Story", s: "Why I stopped hiring freelancers." },
{ t: "Day 07 · Case", s: "How Kelly ships in 90 minutes." },
{ t: "Day 09 · Invitation", s: "Here's what the studio unlocks." },
];
return (
WELCOME SEQUENCE · 5 EMAILS
{seq.map((e, i) => (
{String(i+1).padStart(2, "0")}
))}
);
}
function PreviewSlides() {
// Three slides stacked vertically, compact so they fit the square-ish
// preview area instead of stretching into a long rectangle.
const slides = [
{
n: "01",
t: "Your content dies at volume.",
render: () => (
),
},
{
n: "02",
t: "The four failing options.",
render: () => (
{[
{ bg: "var(--coral-3)", tint: "var(--coral-2)" },
{ bg: "var(--iris-3)", tint: "var(--iris-2)" },
{ bg: "var(--gold-3)", tint: "var(--gold-2)" },
{ bg: "var(--sage-3)", tint: "var(--sage-2)" },
].map((c, i) => (
))}
{[
{ x: 0, y: 14 },
{ x: 18, y: 0 },
{ x: 0, y: -14 },
{ x: -18, y: 0 },
].map((p, i) => (
))}
5
{slides.map((s, i) => (
))}
BRAND CONTEXT · LIVE
{fields.map(([k, v]) => (
))}
ALL 10 SPECIALISTS READ FROM THIS
);
}
function PreviewRepurpose() {
return (
↑
Episode 84.mp3
42:18 · PODCAST · DROPPED
becomes
{["Newsletter", "3 Reels", "LinkedIn post", "Tweet thread", "Blog post", "Show notes", "4 Carousels", "Email", "Quote cards"].map(l => (
{l}
))}
);
}
const PREVIEWS = {
newsletter: PreviewNewsletter,
threads: PreviewThreads,
shortform: PreviewShortform,
carousel: PreviewCarousel,
script: PreviewScript,
podcast: PreviewPodcast,
sales: PreviewSales,
email: PreviewEmail,
slides: PreviewSlides,
brand: PreviewBrand,
repurpose: PreviewRepurpose,
};
window.OutputShowcase = function OutputShowcase() {
const [active, setActive] = useSS("text-posts");
const [paused, setPaused] = useSS(false);
const stageRef = useSR(null);
const railRef = useSR(null);
const item = SHOWCASE_ITEMS.find(i => i.slug === active);
const Preview = PREVIEWS[item.preview];
// Keep the active tab visible in the horizontal tab strip (tablet + mobile).
// Scroll the rail's own scrollLeft instead of scrollIntoView so we never
// scroll the page vertically (which was yanking readers back to this section).
useSE(() => {
if (typeof window === "undefined") return;
if (window.innerWidth > 1024) return;
const rail = railRef.current;
if (!rail) return;
const btn = rail.querySelector(`[data-slug="${active}"]`);
if (!btn) return;
const target = btn.offsetLeft - (rail.clientWidth / 2) + (btn.clientWidth / 2);
rail.scrollTo({ left: target, behavior: "smooth" });
}, [active]);
// Auto-advance — 5s per slide, paused on hover.
const DURATION_MS = 5000;
const [progressKey, setProgressKey] = useSS(0);
useSE(() => {
if (paused) return;
const id = setTimeout(() => {
const idx = SHOWCASE_ITEMS.findIndex(i => i.slug === active);
const next = SHOWCASE_ITEMS[(idx + 1) % SHOWCASE_ITEMS.length];
setActive(next.slug);
}, DURATION_MS);
return () => clearTimeout(id);
}, [active, paused]);
// Bump progress key whenever active slide or pause state changes so the
// progress bar animation restarts from 0.
useSE(() => { setProgressKey(k => k + 1); }, [active, paused]);
const pickSlug = (slug) => {
setActive(slug);
if (typeof window !== "undefined" && window.innerWidth <= 900) {
setTimeout(() => {
stageRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
}, 40);
}
};
return (
setPaused(true)}
onMouseLeave={() => setPaused(false)}>
{/* Header — centered, single unified title */}
One studio for everything you create
Your whole content operationIn your voice.
{/* Tabs label */}
Eleven formats · Tailored by platform
{/* Two-column layout: left rail + right stage. Stacks on narrow via .scs-output-layout. */}
{/* Left rail — becomes a horizontal scrolling tab strip on narrow via .scs-output-rail-inner */}
{SHOWCASE_ITEMS.map((it, idx) => {
const isActive = it.slug === active;
return (
pickSlug(it.slug)}
style={{
all: "unset", cursor: "pointer",
display: "flex", alignItems: "center", gap: 14,
padding: "14px 14px 12px", borderRadius: 14,
background: isActive ? it.stageBg : "transparent",
transition: "background 0.2s ease",
border: "1px solid transparent",
borderColor: isActive ? "var(--border)" : "transparent",
position: "relative",
overflow: "hidden",
}}
onMouseEnter={e => !isActive && (e.currentTarget.style.background = "var(--white)")}
onMouseLeave={e => !isActive && (e.currentTarget.style.background = "transparent")}
>
{/* Timer bar — only on the active row */}
{isActive && (
)}
{idx + 1}
{it.name}
);
})}
{/* Right stage */}
{/* decorative jar */}
{/* headline block (no cat/duration) */}
{item.headline}
{item.sub}
{/* preview artifact */}
{/* footer line: who runs this */}
Built by your {item.specTitle}
{/* Bottom context strip */}
Every specialist reads from one brand-context layer.
{["Voice profile", "Audience", "Offers", "Content pillars", "Preferences"].map(l => (
{l}
))}
);
};
{/* headline block (no cat/duration) */}
{/* preview artifact */}
Built by your {item.specTitle}