Free Trial
{sub && (
1-min set-up, get your brand voice & first 10 high-quality articles.
)}
);
}
/* ---- Section header ---- */
function SectionHead({ part, label, title, intro, center, dark }) {
return (
{part && {part}}
{label}
{intro && }
);
}
/* ---- Scroll reveal hook ---- */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
});
}
/* ============================================================
DATA
============================================================ */
/* The 6 architecture components Ryan Law built */
const ARCHITECTURE = [
{ k: "orchestration", icon: "terminal", title: "Claude Code", desc: "The orchestration engine. Runs from the terminal and coordinates every step of the pipeline." },
{ k: "prompts", icon: "fileCode", title: "23 custom skill files", desc: "Structured prompts for each stage: research, outline, draft, fact-check, edit, voice-check." },
{ k: "data", icon: "database", title: "Ahrefs MCP", desc: "The data layer. Gives the model access to live keyword, SERP and competitor data." },
{ k: "tenancy", icon: "gitBranch", title: "Per-writer forks", desc: "Each writer maintains their own forked version of the pipeline, tuned to their voice and beat." },
{ k: "artifacts", icon: "save", title: "Step-by-step artifacts", desc: "Every stage saves its output to disk. Nothing happens in one shot, every step is inspectable." },
{ k: "gates", icon: "shieldCheck", title: "Quality gates", desc: "The pipeline halts between stages for human review. Slop never propagates downstream." }
];
/* The animated pipeline, stages + gates */
const STAGES = [
{ id: 1, name: "Research", icon: "search", artifact: "brief.json",
status: ["Querying Ahrefs MCP for keyword + SERP data…", "Analyzing competitor coverage…", "Saving artifact → brief.json"],
principle: "Research first, write last. The pipeline starts by pulling SERP data, analyzing competitor coverage and identifying angle gaps, before a single sentence is drafted.",
builder: "Every run begins with a research stage powered by live data: Ahrefs MCP, SERP scrape and internal data matrices. Drafting without research is not an option." },
{ id: 2, name: "Outline", icon: "listTree", artifact: "outline.md",
status: ["Structuring sections from the brief…", "Mapping intent to headings…", "Saving artifact → outline.md"],
principle: "A structured brief becomes a structured outline. Each heading maps to a specific search intent surfaced in research, no filler sections.",
builder: "The outline is generated from the research artifact, not from a blank prompt. You can edit it before drafting ever starts." },
{ id: 3, name: "Draft", icon: "penLine", artifact: "draft-v1.md",
status: ["Drafting against the approved outline…", "Pulling supporting data points…", "Saving artifact → draft-v1.md"],
principle: "Drafting only happens against an approved outline and a researched brief, never as the first move. The model writes into structure, not into a void.",
builder: "Drafting reads the outline + brief artifacts as context. Because earlier steps are saved, the draft stage stays focused instead of losing the plot by step four." },
{ id: 4, name: "Fact-check", icon: "scanSearch", artifact: "claims.json",
status: ["Extracting every factual claim…", "Verifying against source material…", "Saving artifact → claims.json"],
principle: "Each claim in the draft is checked against source material as its own discrete step, not assumed correct because the prose reads well.",
builder: "A built-in factuality gate verifies claims against the research sources and flags anything unsupported before it can reach the edit stage." },
{ id: 5, name: "Edit", icon: "sparkles", artifact: "draft-v2.md",
status: ["Tightening structure and flow…", "Removing redundancy…", "Saving artifact → draft-v2.md"],
principle: "Editing is a separate stage with its own prompt and its own saved artifact, so you can compare draft-v1 to draft-v2 and roll back if the edit overreached.",
builder: "Readability and NLP topical-coverage checks run here. Every edit produces a new versioned artifact you can diff against the previous one." },
{ id: 6, name: "Voice-check", icon: "mic", artifact: "final.md",
status: ["Matching against the voice corpus…", "Adjusting sentence rhythm…", "Saving artifact → final.md"],
principle: "Voice is never compressed into a bullet list of rules. The piece is pattern-matched against dozens of real examples, the source material itself.",
builder: "Voice is captured as a corpus, not a rulebook. Upload existing pieces and the platform applies tone, sentence rhythm and structural fingerprints automatically." },
{ id: 7, name: "Publish", icon: "send", artifact: "published",
status: ["Generating schema + internal links…", "Pushing to CMS…", "Published ✓, page is live."],
principle: "Publishing is the final gated step. Ryan's setup pushes to one CMS with schema and internal linking handled separately.",
builder: "Multi-CMS publishing with schema, sitemaps, internal links and image generation built into the publish step, across as many brands as you run." }
];
/* The 5 principles */
const PRINCIPLES = [
{ n: "01", title: "Research first, write last.",
problem: "Most failing AI content systems start by asking the model to write. Ryan's starts by asking it to research, pull SERP data, analyze competitor coverage, identify angle gaps, and build a structured brief before a single sentence is drafted.",
solution: "Every PSEO Builder run starts with a research stage powered by live data (Ahrefs, SERP scrape, internal data matrices) before any drafting prompt is reached. Drafting without research is not an option." },
{ n: "02", title: "Every step saves its output.",
problem: "The single most important point in the podcast, and the one most teams skip. 'AI slop' almost always comes from chained prompts in a single context window: the model loses focus and quality collapses by step four. Saving every step as an artifact lets you inspect, audit, fork and improve any stage.",
solution: "Every stage produces a discrete, inspectable artifact stored to the project. You can roll back, branch, replay or edit any stage independently. The pipeline is a directed graph of artifacts, not a single mega-prompt." },
{ n: "03", title: "Never compress voice into a list of rules.",
problem: "Ryan calls this the single biggest mistake content teams make. 'Write in our voice, short sentences, be punchy, avoid jargon' is a list. Real voice is captured by showing the model dozens of real examples and letting it pattern-match against the source directly.",
solution: "Voice is captured as a corpus, not a rulebook. Upload existing pieces; the platform extracts and applies tone, sentence rhythm, and structural fingerprints. No 'voice guidelines' required." },
{ n: "04", title: "One forked workflow per writer or brand.",
problem: "Ryan's team doesn't share a pipeline, every writer maintains their own forked version, tuned to their beat. The shared-pipeline approach fails because no two writers' research, drafting and editing needs are identical.",
solution: "Native multi-tenant architecture. One admin sets the template; each writer, brand or client gets a forked workflow they tune without affecting anyone else's. Agencies run dozens of brands in parallel." },
{ n: "05", title: "Quality gates between every stage.",
problem: "The pipeline never runs end-to-end without checkpoints. A human (or automated check) approves the brief before drafting, the draft before editing, the final piece before publishing. This discipline is what makes the 8-minute claim believable, most of that time is human review, not generation.",
solution: "Configurable quality gates between every stage: plagiarism, readability, NLP scoring, brand-voice match, factuality. Auto-pass or require human approval per gate, per workflow." }
];
/* Part 3, what you actually need in-house */
const REQUIREMENTS = [
"Someone who can install, configure and debug Claude Code from the terminal, and keep it working through every model update.",
"An engineering team capable of building or integrating an MCP server for your data layer (keyword data, internal product data, competitor intelligence).",
"Time to write, version-control and maintain ~20+ skill files, and then fork them per writer.",
"A workflow for non-technical writers to safely interact with a code-first pipeline without breaking it.",
"Internal tooling to publish to your CMS, handling schema, internal linking, sitemap updates and image generation.",
"Quality-assurance layers (plagiarism, readability, factuality) bolted on top, Claude Code doesn't ship with them.",
"Six to twelve months of iteration to get the pipeline producing publish-ready output reliably."
];
/* Part 4, comparison rows */
const COMPARE = [
{ crit: "Who can operate it", inhouse: "Technical writers comfortable with terminal & code.", builder: "Anyone with a browser. Non-technical writers run the full pipeline." },
{ crit: "Time to first publish-ready output", inhouse: "3–12 months of pipeline iteration.", builder: "Day one. Pre-built workflows ship with the platform." },
{ crit: "Data layer", inhouse: "Ahrefs MCP only. Custom MCPs require engineering.", builder: "Ahrefs MCP + structured data matrix + scraping + news automation, built in." },
{ crit: "Scale", inhouse: "One article at a time, manually triggered.", builder: "Hundreds to thousands of pages, batched and scheduled." },
{ crit: "Multi-brand support", inhouse: "One forked pipeline per writer. Multi-brand needs custom infra.", builder: "Multi-tenant by default. Unlimited brands or clients in parallel." },
{ crit: "Publishing", inhouse: "Manual, single CMS. Schema & internal linking handled separately.", builder: "Multi-CMS publishing. Schema, sitemaps, internal links & images included." },
{ crit: "Quality controls", inhouse: "Built manually per pipeline.", builder: "Plagiarism, readability, NLP scoring, voice & factuality checks built in." },
{ crit: "Per-writer customisation", inhouse: "Yes, each writer maintains their own fork.", builder: "Yes, admin sets the template, writers fork and tune their own." },
{ crit: "Programmatic SEO at scale", inhouse: "Not the design goal. Built for one blog post at a time.", builder: "First-class feature. Thousands of intent-matched pages from a data matrix." },
{ crit: "Total cost of ownership (year 1)", inhouse: "1 senior content engineer + eng support + iteration time.", builder: "A fraction of a single hire. Predictable monthly cost." }
];
/* Part 5, beyond replication */
const BEYOND = [
{ icon: "layers", tag: "AT SCALE", title: "Programmatic SEO at real scale",
desc: "Most companies have thousands of high-intent queries one layer below their content, trade × city, product × use-case, comparison × competitor. Builder generates those pages by the hundred or thousand from a structured data matrix, each tuned to its intent. This is not what Claude Code is for." },
{ icon: "users", tag: "MULTI-TENANT", title: "Multi-tenant for agencies & multi-brand operators",
desc: "Run content for more than one brand and a single-instance pipeline becomes a maintenance burden fast. Builder treats each brand as a tenant with its own voice corpus, data matrix and publishing target, all governed by one admin layer." },
{ icon: "globe", tag: "PUBLISHING", title: "Native publishing across CMSes",
desc: "Most teams publish to several destinations, marketing site, help centre, regional sub-brand, partner portal. Builder ships native integrations for the major CMSes, plus schema, internal linking, image generation and sitemap handling in the publish step." },
{ icon: "rotate", tag: "REFRESH", title: "News automation & content refresh",
desc: "Ryan's team also updated ~30 existing articles with the pipeline, an underrated use-case. Builder includes scheduled refresh workflows that re-run research, detect SERP drift and refresh on-page content automatically, keeping evergreen pages competitive." },
{ icon: "shieldCheck", tag: "QUALITY", title: "Quality checks that ship with the platform",
desc: "Plagiarism scanning, readability scoring, NLP topical coverage, brand-voice match, factuality verification against source, all built in, all configurable per workflow. You don't bolt them on after; they're part of the default gate set." }
];
/* Part 6, three paths */
const PATHS = [
{ no: "Path 01", title: "Build it yourself", featured: false,
good: "You have a senior content lead who can ship code, engineering support for an MCP server, and 6–12 months to iterate. You want maximum control and the IP to stay in-house.",
bad: "You don't have all three of those things. The pipeline is the visible part, the year of iteration around it is the invisible part, and it's where most attempts quietly die." },
{ no: "Path 02", title: "Hire an AI content agency", featured: false,
good: "You want to outsource the whole problem and you're willing to pay the agency margin in exchange for not learning the pipeline yourself.",
bad: "You want the workflow, voice corpus, data matrix and quality gates to live in your own systems and be tunable by your team. With an agency, the engine stays with them." },
{ no: "Path 03", title: "Use PSEO Builder", featured: true,
good: "You want the same principles Ryan describes, productised. Pipeline, quality gates, multi-tenant architecture and native publishing, running in your browser with your team in control. Ship on day one, not month nine.",
bad: "You only need one article a week and a single CMS. Honestly, ChatGPT and a careful editor will do. Builder makes sense when scale, multiple brands, or programmatic SEO are in the picture." }
];
/* Three ways to start (next steps) */
const WAYS = [
{ n: "1", title: "15-minute live walkthrough", desc: "We run PSEO Builder against your actual site on a screenshare. You see the data matrix, a live page produced end-to-end, and the comparison vs. building it in-house. No slides." },
{ n: "2", title: "Async quick-scan (5-min Loom)", desc: "Send us your URL. We send back a recorded Loom showing what the pipeline would produce for your site and the specific PSEO opportunity we see, no call required." },
{ n: "3", title: "Self-serve trial", desc: "Skip the conversation and just try it. One-minute set-up gets your brand voice and your first 10 high-quality articles. Bring your own URL and data matrix." }
];
Object.assign(window, {
Icon, FreeTrial, SectionHead, useReveal, FREE_TRIAL_URL,
ARCHITECTURE, STAGES, PRINCIPLES, REQUIREMENTS, COMPARE, BEYOND, PATHS, WAYS,
React, useState, useEffect, useRef, useCallback
});