// Sections.jsx — All page sections for the pre-launch landing. const { useState: useSt, useEffect: useEf, useRef: useRf } = React; // ── NAVBAR (phase-aware) ──────────────────────────────────── // Founding phase (week1 / week2): countdown pill + "Reserve my seat". // Post-cohort: drop the urgency anchor, surface real navigation + // "Start trial" CTA. The post-cohort design leans on: // - Hick's Law: fewer in-nav choices ⇒ faster decisions. // - Clear trial economics: $0 today, card on file, then Standard. // - Status-quo bias: a "Sign in" link reassures returning users // they didn't land on a sales page they can't escape. window.NavBar = function NavBar({ onJoin }) { const phase = window.SCS_PHASE || {}; const isPostCohort = phase.mode === "post-cohort"; const isExpired = phase.mode === "expired"; if (isPostCohort) { return ; } if (isExpired) { return ; } const c = window.useCountdown(); return ( ); }; // ── EXPIRED NAVBAR ────────────────────────────────────────── // Bridge state between the active cohort and the post-cohort 3-tier layout. // Logo on the left, "Joining the cohort has expired" pill on the right with // a frozen 0/0/0/0 countdown. No buy / reserve button — the founding window // is closed. window.ExpiredNavBar = function ExpiredNavBar() { return ( ); }; // ── POST-COHORT NAVBAR ────────────────────────────────────── // Calmer, link-driven. Single primary CTA starts the email-first setup flow. // Pricing link scrolls to #pricing. window.PostCohortNavBar = function PostCohortNavBar() { const signupHref = window.SCS_SIGNUP_HREF || "/signup"; // Sticky-on-scroll state. A rAF-throttled passive scroll listener toggles the // "stuck" treatment. This is the cross-browser path: the CSS scroll-state() // container query (@container scroll-state(stuck: top)) only ships in // Chromium today, so Safari / Firefox would otherwise get no floating pill. const [stuck, setStuck] = useSt(false); useEf(() => { let raf = 0; const apply = () => { raf = 0; setStuck(window.scrollY > 24); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); }; apply(); // initialise (handles a reload partway down the page) window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); // Mobile hamburger menu (phones only). Closed by default; closes on Escape, // outside click, link tap, or once the viewport grows past the breakpoint. const [menuOpen, setMenuOpen] = useSt(false); const navRef = useRf(null); useEf(() => { if (!menuOpen) return; const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); }; const onDown = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setMenuOpen(false); }; const onResize = () => { if (window.innerWidth > 720) setMenuOpen(false); }; document.addEventListener("keydown", onKey); document.addEventListener("mousedown", onDown); window.addEventListener("resize", onResize); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("mousedown", onDown); window.removeEventListener("resize", onResize); }; }, [menuOpen]); const scrollToSection = (id) => (event) => { event.preventDefault(); const el = document.getElementById(id); if (el) { el.scrollIntoView({ behavior: "smooth", block: "start" }); window.history.replaceState(null, "", `#${id}`); } }; // Mobile-panel link: run the normal action, then close the menu. const onMobileNav = (handler) => (event) => { if (handler) handler(event); setMenuOpen(false); }; return (
); }; // ── COUNTDOWN STRIP (subtle, below nav) ───────────────────── window.CountdownStrip = function CountdownStrip() { const c = window.useCountdown(); const Cell = ({ n, l }) => (
{String(n).padStart(2, "0")} {l}
); return (
Save $1,800 · ends in · · ·
); }; // ── ANNOUNCEMENT STRIP (under nav) ────────────────────────── // Pre-order period messaging. Makes the buy / delivery contract explicit. // Hidden in post-cohort phase: founding-window urgency is gone, and // reusing the strip for evergreen value-prop messaging would be banner // fatigue (the hero already carries the value prop). Cleaner page. window.AnnouncementStrip = function AnnouncementStrip() { const phase = window.SCS_PHASE || {}; if (phase.mode === "post-cohort" || phase.mode === "expired") return null; return ( <>
Pre-order open · Lock in founding access. The Studio is delivered{" "} May 11.
); }; // ── SPECIALIST TICKER (hero-adjacent, horizontal scroll) ──── window.SpecialistTicker = function SpecialistTicker() { // Each specialist gets a tinted card with portrait + name/title. // Duplicate the list so the marquee loops seamlessly. const items = window.SPECIALISTS; const loop = [...items, ...items]; return (
{loop.map((s, i) => (
{s.title}
))}
); }; // ── HERO — variant A: one-column editorial + specialist ticker ──── window.HeroA = function HeroA({ onJoin }) { return (

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

Ten years ago, marketing a solo business meant a blog and a newsletter. Today, it's nine formats, four platforms, and a schedule that never stops.

We're building you a way out.

Join the waitlist → No spam · One email when doors open
{/* Specialist ticker */}
); }; // ── HERO — variant B: "Studio, not Team" (split) ──────────── window.HeroB = function HeroB({ onJoin }) { return (
Pre-launch · April 27

Stop being a content team of one.
Become a content studio of one.

Ten content specialists. One tool. Your brand, your voice, running forever.

Founding cohort · Limited
{window.SPECIALISTS.slice(0, 9).map((s, i) => (
{s.num} · {s.title.split(" ")[0]}
))}
); }; // ── PROBLEM ACTS ──────────────────────────────────────────── window.ProblemActs = function ProblemActs() { const options = [ { n: "01", t: "Hire freelancers", d: "You become the project manager. You chase and review instead of creating.", c: "$2–8k/mo" }, { n: "02", t: "Agency on retainer", d: "They move at their pace. It still doesn't sound like you.", c: "$5–15k/mo" }, { n: "03", t: "Use GPT/Claude", d: "Generic voice. Repeat your brand memory. Re-paste context indefinitely.", c: "Unreliable output" }, { n: "04", t: "Do it all yourself", d: "Content always loses to \"urgent\" client work. Three months pass. Burnout cycle continues.", c: "Too much time and stress" }, ]; // Each "act" gets its own containerized card — stacked like three slides. const actCard = { borderRadius: 28, padding: "72px 56px", position: "relative", overflow: "hidden", marginBottom: 24, }; return (
{/* ── Lifted product hero (text + animated browser, no card, no CTA) ── */}
{/* ── ACT 1 — The problem (cream card, paper grain) ──────── */}
{/* Soft coral bloom */}
Act 01 · The problem

You're one person with a ten-person workload.

The job is too big for one human.
The market tells solopreneurs this is a discipline problem. It isn't.
It's a volume problem.

{/* ── ACT 2 — The bad options (tinted card) ──────────────── */}
{/* subtle dot pattern */}
Act 02 · The bad options

What's a solopreneur to do?

{options.map((o) => (
Option {o.n}

{o.t}

{o.d}

{o.c}
))}
{/* ── ACT 3 — the way out (dark card) ────────────────────── */}
Act 03 · The way out

The better way has arrived.

Don't outsource your content to a team and pay the price.
Build your studio. One that knows your brand, your audience, and your voice.

{[ { num: "→ 01", t: <>A studio of
ten specialists, d: "Purpose-built craftspeople for every format you create. One for newsletters, one for sales pages, one for reels. Each pre-loaded with the best practices for their craft.", icon: "/illustrations-icons/ten-specialists.png", }, { num: "→ 02", t: <>Trained once on
your business, d: "Business, brand, voice, audience, captured once in the context layers and used by every specialist. Never re-explain yourself again. Update in one place as your business evolves.", icon: "/illustrations-icons/knows-you.png", }, { num: "→ 03", t: <>Running
itself, d: "Set your content cadence and The Studio fills the draft queue based on your topics. Content drafts arrive on schedule, ready for your human touch. You share on all your platforms.", icon: "/illustrations-icons/runs-for-you.png", }, ].map((p, i, arr) => (
{p.num}

{p.t}

{p.d}

{i < arr.length - 1 && (
); }; // ── OUTPUT SHOWCASE — "One place. Everything you ship." ───── window.OutputShowcase = function OutputShowcase() { // Mapped to specialists; each format shows the specialist's accent color + animal dot. const formats = [ { cat: "Written", items: [ { title: "Newsletters", sub: "Weekly or evergreen", accent: "coral", spec: "Hedgehog · Newsletter Editor" }, { title: "Blog posts", sub: "SEO-aware long-form", accent: "ice", spec: "Deer · Blog Writer" }, { title: "Sales pages", sub: "Long-form conversion", accent: "iris", spec: "Raccoon · Sales Page Builder" }, { title: "Email sequences", sub: "Welcome & nurture", accent: "sage", spec: "Owl · Email Strategist" }, ]}, { cat: "Social", items: [ { title: "Text posts", sub: "Twitter · LinkedIn · Threads", accent: "pink", spec: "Parrot · Social Director" }, { title: "Carousels", sub: "Instagram · LinkedIn", accent: "pink", spec: "Magpie · Slide Designer" }, { title: "Short-form video", sub: "Reels · TikTok · Shorts", accent: "ice", spec: "Otter · Video Producer" }, { title: "Long-form scripts",sub: "YouTube · webinars", accent: "ice", spec: "Otter · Video Producer" }, ]}, { cat: "Spoken", items: [ { title: "Podcast outlines", sub: "Solo or interview", accent: "gold", spec: "Bear · Podcast Producer" }, { title: "Show notes", sub: "Timestamps & pull-quotes", accent: "gold", spec: "Bear · Podcast Producer" }, ]}, { cat: "Visual", items: [ { title: "Slide decks", sub: "Talks & keynotes", accent: "pink", spec: "Magpie · Slide Designer" }, { title: "Brand & design system", sub: "Voice, tone, guardrails", accent: "gold", spec: "Badger · Chief Brand Officer" }, ]}, { cat: "Remix", items: [ { title: "Content repurposer", sub: "One asset → ten formats", accent: "lime", spec: "Octopus · Content Repurposer" }, ]}, ]; return (
One place · Everything you ship

Your whole content operation.
One window. One voice.

Newsletters. Text posts. Short-form video. Carousels. Sales pages. Podcasts. Long-form scripts. Email sequences. Slide decks. Every format solopreneurs ship in 2026, in your voice, to your audience, from one place.

{/* "Platforms served" mono ribbon */}
{["Newsletter", "Twitter / X", "LinkedIn", "Threads", "Instagram", "TikTok", "YouTube", "YouTube Shorts", "Podcast", "Blog", "Email", "Sales", "Slides"].map(p => ( {p} ))}
{/* Format grid grouped by category */}
{formats.map(group => (
{group.cat}.
{group.items.map(it => (

{it.title}

{it.sub}
· {it.spec}
))}
))}
{/* Footer line — voice & preferences */}
The connective tissue
A single brand-context layer. Every specialist reads from it.
{["Voice profile", "Audience", "Offers", "Content pillars", "Preferences"].map(l => ( {l} ))}
); }; // ── THE TEN (roster with real character portraits) ────────── window.TheTen = function TheTen() { return (
Meet the studio · Currently in training

Ten specialists.
On staff. Forever.

Each one knows a format cold. Each one knows your brand. None of them will quit on a Tuesday.

{window.SPECIALISTS.map((s) => (
{s.animal}
No. {s.num}
{s.title}
{s.animal}
))}
); }; // ── THE TEN — Meet the studio ─────────────────────────────── // Each tile shows the static isometric PNG by default. On hover (desktop) // or long-press (mobile), the matching .mp4 plays in place, masked by the // static PNG's alpha so the black video bg never bleeds against the card's // pastel tint. On release/leave, the video pauses and rewinds so the next // trigger starts clean. const LONG_PRESS_MS = 350; const SpecialistTile = function SpecialistTile({ s, i, team }) { const [hov, setHov] = useSt(false); const videoRef = useRf(null); const pressTimerRef = useRf(null); const startPlay = () => { setHov(true); const v = videoRef.current; if (!v) return; if (v.preload !== "auto") v.preload = "auto"; if (v.readyState < 2) { try { v.load(); } catch (e) {} } const p = v.play(); if (p && typeof p.catch === "function") p.catch(() => {}); }; const stopPlay = () => { setHov(false); const v = videoRef.current; if (!v) return; v.pause(); try { v.currentTime = 0; } catch (e) {} }; const clearPressTimer = () => { if (pressTimerRef.current) { clearTimeout(pressTimerRef.current); pressTimerRef.current = null; } }; // Mouse: hover plays immediately, leave stops. const handleMouseEnter = () => startPlay(); const handleMouseLeave = () => { clearPressTimer(); stopPlay(); }; // Touch / pen: long-press to play. A short tap shouldn't trigger, // so wait LONG_PRESS_MS before starting. Cancel on release, drag-off, // or pointercancel (which fires when the user starts scrolling). const handlePointerDown = (e) => { if (e.pointerType === "mouse") return; // mouse handled above clearPressTimer(); pressTimerRef.current = setTimeout(() => { pressTimerRef.current = null; startPlay(); }, LONG_PRESS_MS); }; const handlePointerEnd = (e) => { if (e && e.pointerType === "mouse") return; clearPressTimer(); stopPlay(); }; const maskUrl = `url("assets/team/${team.img}")`; return (
{ if (hov || pressTimerRef.current) e.preventDefault(); }} style={{ background: team.bg || `var(--${s.accent}-3)`, border: "1px solid var(--border)", borderRadius: 20, padding: "20px 18px 22px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", boxShadow: "var(--shadow-sm)", WebkitTouchCallout: "none", WebkitUserSelect: "none", userSelect: "none", "--scs-delay": `${i * 55}ms`, }}> {/* Stage holds static + video stacked. */}
{s.title} {team.video && (
{/* № */}
№ {s.num}
{/* Role */}
{s.title}
{/* Content-type pills */}
{(team.pills || []).map(fmt => ( {fmt} ))}
); }; window.TheTen = function TheTen() { // Role → { image filename, video filename, content-type pills, optional bg override to de-dupe accents } const TEAM = { "Newsletter Editor": { img: "newsletter-editor.png", video: "newsletter-editor.mp4", pills: ["Newsletters"] }, "Chief Brand Officer": { img: "brand-keeper.png", video: "brand-keeper.mp4", pills: ["Voice guide", "Style rules", "Brand guardrails"] }, "Social Director": { img: "social-director.png", video: "social-director.mp4", pills: ["Text posts", "Carousels", "Short-form video"] }, // Podcast is also gold — shift warmer (toward apricot) so it doesn't read as brand-officer. "Podcast Producer": { img: "podcast-producer.png", video: "podcast-producer.mp4", pills: ["Episode outlines", "Show notes", "Pull-quotes"], bg: "hsl(34, 70%, 92%)" }, "Sales Page Builder": { img: "sales-page-copywriter.png", video: "sales-page-copywriter.mp4", pills: ["Sales pages", "Landing pages"] }, "Email Strategist": { img: "sequence-strategist.png", video: "sequence-strategist.mp4", pills: ["Email sequences"] }, "Blog Writer": { img: "blog-writer.png", video: "blog-writer.mp4", pills: ["Long-form articles"] }, // Slide is also pink — shift slightly cooler (toward mauve). "Slide Designer": { img: "slide-designer.png", video: "slide-designer.mp4", pills: ["Slide decks"], bg: "hsl(320, 45%, 93%)" }, // Video is also ice — shift toward a dustier sky tone. "Video Producer": { img: "video-producer.png", video: "video-producer.mp4", pills: ["YouTube scripts"], bg: "hsl(215, 45%, 93%)" }, "Content Repurposer": { img: "content-repurposer.png", video: "content-repurposer.mp4", pills: ["Cross-platform remix"] }, }; return (
The specialists in your studio · currently in training

Ten specialists. Highly trained.
Creating content for you.

{window.SPECIALISTS.map((s, i) => { const team = TEAM[s.title] || {}; return ; })}
); }; // ── PEEK SECTION ──────────────────────────────────────────── window.PeekSection = function PeekSection() { return (
A look inside

Your studio is waiting for you.
Available soon.

We're not ready to show the full thing. But here's a glimpse of what's coming.

); }; // ── REACTIONS (real screenshots — "genius" word keeps coming back) ─ window.Reactions = function Reactions() { // Real screenshots from DMs / messages (avatars pre-masked in source PNGs). const shots = [ { src: "assets/reactions/reaction-2-story-reply-v2_final.png", platform: "Instagram DM", pull: "ANOTHER GENIUS IDEA", tilt: -1.6, ratio: "1206 / 805", }, { src: "assets/reactions/reaction-1-story-reply-v2_final.png", platform: "Instagram · Story reply", pull: "This is genius.", tilt: 1.2, ratio: "655 / 732", }, { src: "assets/reactions/reaction-3-whatsapp.png", platform: "WhatsApp", pull: "Where do I pay?", tilt: -0.8, ratio: "866 / 344", }, ]; return (
{/* warm bloom behind the headline */}
Early reactions · From people we've quietly shown

They keep using
the same word: genius.

{/* Screenshot grid */}
{shots.map((s, i) => (
{/* The actual screenshot — contained inside a subtle frame */}
{`Reaction
{/* Pull-quote under the screenshot — highlighter accent */}
"{s.pull}"
))}
{/* Wall of love — text-quote screenshots from beta users */}
From the people testing it

And in their words.

{(() => { // 60/40 alternating layout on a 5-col grid. Each row is a pair: // even pair → wide-left (span 3) + narrow-right (span 2); // odd pair → narrow-left + wide-right. With an odd count, the last // card becomes a full-width centerpiece (span 5). // Highlight colors rotate across the soft -3 palette. const quotes = [ { src: "assets/reactions/quote-02-reel-planner-perfect.png", pull: "absolutely ON THE MONEY", tilt: 0.6, highlight: "var(--orange-light)" }, { src: "assets/reactions/quote-07-better-than-my-claude.png", pull: "yours is better!", tilt: -0.8, highlight: "var(--pink-3)" }, { src: "assets/reactions/quote-01-shocked-at-results.png", pull: "shocked at how good the results are", tilt: 0.4, highlight: "var(--gold-3)" }, { src: "assets/reactions/quote-06-tool-is-amazing.png", pull: "This tool is amazing!", tilt: 0.7, highlight: "var(--coral-3)" }, { src: "assets/reactions/quote-05-soooo-good.png", pull: "This is SOOOO good!", tilt: -0.5, highlight: "var(--iris-3)" }, { src: "assets/reactions/quote-04-newsletter-editor-relationship-opener.png", pull: "I absolutely love the newsletter editor", tilt: -0.4, highlight: "var(--sage-3)" }, { src: "assets/reactions/quote-08-setup-smooth.png", pull: "shifted me out of my brain blanking", tilt: 0.5, highlight: "var(--ice-3)" }, { src: "assets/reactions/quote-03-newsletter-sections.png", pull: "So much easier to keep track of", tilt: -0.6, highlight: "var(--gold-3)" }, { src: "assets/reactions/quote-09-really-love-it.png", pull: "I really love it", tilt: 0.3, highlight: "var(--pink-3)" }, ]; const COLS = 5; return (
{quotes.map((q, i) => { const pairIdx = Math.floor(i / 2); const slot = i % 2; const isWide = pairIdx % 2 === 0 ? slot === 0 : slot === 1; const isOrphan = i === quotes.length - 1 && quotes.length % 2 === 1; // Orphan caps at 60% (3 of 5 cols) and centers in the row so // it never blows out to full width on responsive screens. const gridColumn = isOrphan ? "2 / span 3" : `span ${isWide ? 3 : 2}`; const fontSize = isOrphan ? 28 : (isWide ? 26 : 22); return (
{`User
"{q.pull}"
); })}
); })()}
); }; // ── FINAL CTA ─────────────────────────────────────────────── window.FinalCTA = function FinalCTA({ formRef }) { const c = window.useCountdown(); const phase = window.SCS_PHASE || {}; if (phase.mode === "post-cohort" || phase.mode === "expired") return null; return (
{/* Countdown — urgency cue above the headline */}
Founding Cohort Ends In {[["D", c.days], ["H", c.hours], ["M", c.mins], ["S", c.secs]].map(([l, n]) => (
{String(n).padStart(2, "0")} {l}
))}

Save $1,800
by joining today!

Join the first cohort.
Snag the best monthly founding rate.
Cancel your access anytime.

Reserve my seat →
); }; // ── FOOTER (phase-aware) ──────────────────────────────────── // Founding phase keeps the slim single-row footer (the page itself // is heavy with conversion content; footer doesn't need to repeat). // Post-cohort uses a richer multi-column footer with a final CTA // block. Levers in play: // - Clear trial economics: closing CTA restates "$0 today, card // required" so the commitment is explicit. // - Multiple paths to pricing: a user who scrolled past #pricing // gets it back as a footer link AND as a CTA block, so finding // the conversion surface is never a hunt. // - Authority + Liking: founders' names on a real page get a // dedicated column, not a one-liner. Solo creator audiences // respond to the "built by people like me" cue. window.SCSFooter = function SCSFooter() { const phase = window.SCS_PHASE || {}; if (phase.mode === "post-cohort") { return ; } return (
Solo Content Studio
solocontent.studio · Built by Caroline & Jason Zook · © 2026
); }; window.PostCohortFooter = function PostCohortFooter() { const signupHref = window.SCS_SIGNUP_HREF || "/signup"; return ( ); };