/* global React, ReactDOM */ /* global Logo, ArrowRight, ArrowDown, FooterCTA, FloatCTA */ /* ===================================================================== AGENT DETAIL PAGE — app-agent-detail.jsx One page per agent. The HTML shell sets window.__AGENT_SLUG__ before this script runs (same pattern as the case-study pages). ===================================================================== */ /* ---------------------- NavMulti ---------------------- */ const NavMulti = () => { const [open, setOpen] = React.useState(false); return ( ); }; /* ---------------------- Agent data ---------------------- */ /* Leads and "runs" bullets reuse the exact strings from the roster on agents.html, so their UA pairs in i18n.jsx keep resolving. Tool icons: svgl.app + cdn.simpleicons.org, same sources as the home page tool strip. Klaviyo has no CDN icon, so it reuses the inline data-URI from app-home.jsx. */ const KLAVIYO_ICON = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%2016H84L58%2050L84%2084H24Z'%20fill='%23232426'/%3E%3C/svg%3E"; const TOOL_ICONS = { "Instagram": "https://cdn.simpleicons.org/instagram/E4405F", "Facebook": "https://cdn.simpleicons.org/facebook/0866FF", "LinkedIn": "https://svgl.app/library/linkedin.svg", "X": "https://cdn.simpleicons.org/x", "TikTok": "https://cdn.simpleicons.org/tiktok", "YouTube": "https://cdn.simpleicons.org/youtube/FF0000", "Pinterest": "https://cdn.simpleicons.org/pinterest/BD081C", "Buffer": "https://cdn.simpleicons.org/buffer", "Postiz": "https://cdn.simpleicons.org/postiz", "Canva": "https://svgl.app/library/canva.svg", "Meta Ads": "https://svgl.app/library/meta.svg", "Meta": "https://svgl.app/library/meta.svg", "Google Ads": "https://cdn.simpleicons.org/googleads/4285F4", "GA4": "https://cdn.simpleicons.org/googleanalytics/E8710A", "Tag Manager": "https://cdn.simpleicons.org/googletagmanager/246FDB", "Search Console": "https://cdn.simpleicons.org/googlesearchconsole/458CF5", "Google Docs": "https://cdn.simpleicons.org/googledocs/4285F4", "Google Sheets": "https://cdn.simpleicons.org/googlesheets/34A853", "Google Workspace": "https://svgl.app/library/google.svg", "Klaviyo": KLAVIYO_ICON, "Mailchimp": "https://cdn.simpleicons.org/mailchimp", "Brevo": "https://cdn.simpleicons.org/brevo/0B996E", "HubSpot": "https://cdn.simpleicons.org/hubspot/FF7A59", "Ahrefs": "https://svgl.app/library/ahrefs.svg", "Semrush": "https://cdn.simpleicons.org/semrush/FF642D", "WordPress": "https://cdn.simpleicons.org/wordpress/21759B", "Shopify": "https://svgl.app/library/shopify.svg", "Webflow": "https://cdn.simpleicons.org/webflow/146EF5", "Framer": "https://cdn.simpleicons.org/framer/0055FF", "Figma": "https://cdn.simpleicons.org/figma/F24E1E", "Hotjar": "https://cdn.simpleicons.org/hotjar/FF3C00", "Cloudflare": "https://cdn.simpleicons.org/cloudflare/F38020", "Grammarly": "https://cdn.simpleicons.org/grammarly/15C39A", "Notion": "https://svgl.app/library/notion.svg", "Looker": "https://cdn.simpleicons.org/looker/4285F4", "Mixpanel": "https://cdn.simpleicons.org/mixpanel/7856FF", "Slack": "https://svgl.app/library/slack.svg", "Zapier": "https://cdn.simpleicons.org/zapier/FF4F00", "Make": "https://cdn.simpleicons.org/make/6D00CC", "n8n": "https://cdn.simpleicons.org/n8n/EA4B71", "Airtable": "https://cdn.simpleicons.org/airtable/18BFFF", }; const AGENT_DETAILS = { "social-media-manager": { name: "Social Media Manager", lead: "Runs your social presence end to end.", sub: "Calendar, copy, design, publishing, and iteration on what performs, across every channel you're on.", runs: ["Plans the content calendar", "Writes and designs posts", "Publishes across every channel", "Optimizes on engagement, automatically"], weekly: [ "A full week of posts, written, designed, and scheduled", "Platform-native variants for each channel", "An engagement report with what to boost and why", "Comment and mention triage waiting in Slack", ], expert: "Built and supervised by a senior social media strategist who follows platform and algorithm changes weekly and folds new formats into the agent's playbooks as they prove out.", tools: ["Instagram", "Facebook", "LinkedIn", "X", "TikTok", "YouTube", "Buffer", "Postiz", "Canva"], }, "ads-manager": { name: "Ads Manager", lead: "Runs paid media end to end.", sub: "Campaigns, creative, budgets, and ROAS, watched in real time and rebalanced before waste compounds.", runs: ["Builds campaigns and creative", "Launches across platforms", "Watches ROAS in real time", "Reallocates budget on its own"], weekly: [ "Fresh creative variants before fatigue sets in", "Budget moves proposed with the math attached", "Underperformers flagged and paused with your approval", "A spend and ROAS report you can forward as is", ], expert: "Built and supervised by a senior performance marketer who tracks auction and platform changes closely and updates the agent's bidding and creative playbooks as best practices shift.", tools: ["Meta Ads", "Google Ads", "TikTok", "LinkedIn", "Pinterest", "GA4", "Tag Manager"], }, "email-marketer": { name: "Email Marketer", lead: "Owns email and lifecycle end to end.", sub: "Campaigns, flows, copy, design, and A/B tests, built in your ESP and optimized on revenue.", runs: ["Builds campaigns and flows", "Writes and designs every send", "Schedules and sends", "A/B tests and optimizes on results"], weekly: [ "Campaigns built, segmented, and queued in your ESP", "Flow fixes and win-back sequences shipped", "Subject line and content A/B tests running", "A revenue-per-send report with next moves", ], expert: "Built and supervised by a senior lifecycle and CRM specialist who follows deliverability and ESP changes closely and keeps the agent's flows on current best practices.", tools: ["Klaviyo", "Mailchimp", "Brevo", "HubSpot", "Shopify", "GA4"], }, "seo-manager": { name: "SEO Manager", lead: "Runs SEO end to end.", sub: "Strategy, briefs, on-page work, technical fixes, and rank tracking, including how you show up in AI search.", runs: ["Keyword and content strategy", "Briefs and on-page optimization", "Technical fixes", "Continuous rank tracking"], weekly: [ "Content briefs built around terms you can win", "On-page fixes shipped: titles, meta, internal links", "Technical issues caught and queued with fixes", "A movement report: rankings, clicks, AI-search citations", ], expert: "Built and supervised by a senior SEO specialist who tracks algorithm updates and the shift to AI search closely and reworks the agent's playbooks as the field moves.", tools: ["Ahrefs", "Semrush", "Search Console", "GA4", "WordPress", "Shopify"], }, "growth-hacker": { name: "Growth Hacker", lead: "Runs growth experiments end to end.", sub: "Landing pages, A/B tests, and CRO, shipped weekly, measured honestly, and scaled when they win.", runs: ["Builds landing pages", "Ships A/B and CRO tests", "Tracks conversion", "Scales what wins"], weekly: [ "New experiments proposed with expected impact", "Landing page variants built and live", "Test results read with statistical honesty", "Winners rolled out, losers killed without drama", ], expert: "Built and supervised by a senior CRO and growth specialist who follows experiment design best practices and feeds new tactics into the agent as they prove out.", tools: ["Webflow", "Framer", "Figma", "Hotjar", "GA4", "Tag Manager"], }, "website-manager": { name: "Website Manager", lead: "Runs your site end to end.", sub: "Pages, fixes, speed, and conversion, shipped around the clock without a ticket queue.", runs: ["Builds and updates pages", "Ships fixes around the clock", "Keeps it fast and on-brand", "Tunes for conversion"], weekly: [ "Pages built and updated in your CMS", "Bugs and broken links fixed before you notice", "Speed and Core Web Vitals kept in the green", "Conversion tweaks proposed with the data behind them", ], expert: "Built and supervised by a senior web specialist who follows performance and UX best practices closely and keeps the agent's standards current as the web moves.", tools: ["WordPress", "Shopify", "Webflow", "Framer", "Cloudflare", "Figma", "GA4"], }, "content-manager": { name: "Content Manager", lead: "Owns content end to end.", sub: "Strategy, briefs, writing, editing, and publishing, in your voice, across every format.", runs: ["Content strategy and briefs", "Writing and editing", "Publishing across formats", "Keeps the calendar full"], weekly: [ "Drafts written in your voice, ready for review", "Briefs mapped to your funnel and keywords", "Published pieces formatted per channel", "A content calendar that never runs dry", ], expert: "Built and supervised by a senior content strategist who follows what actually earns attention and keeps the agent's editorial playbooks on current best practices.", tools: ["Notion", "WordPress", "Google Docs", "Canva", "Figma", "Grammarly"], }, "data-analyst": { name: "Data Analyst", lead: "Runs analytics end to end.", sub: "Cross-platform data, attribution, and reporting, with anomalies flagged before they cost you.", runs: ["Pulls cross-platform data", "Builds attribution and reporting", "Flags trends and anomalies", "Surfaces what to act on"], weekly: [ "A cross-channel report in plain language", "Attribution kept honest across platforms", "Anomalies flagged the day they appear", "Three things to act on, not thirty charts", ], expert: "Built and supervised by a senior marketing analyst who follows measurement and attribution best practices closely and keeps the agent's models current as platforms change.", tools: ["GA4", "Search Console", "Looker", "Google Sheets", "Mixpanel", "Meta"], }, "marketing-operations": { name: "Marketing Operations", lead: "Runs the marketing engine end to end.", sub: "Your stack connected, workflows automated, reporting owned, one source of truth kept in sync.", runs: ["Connects your whole stack", "Automates workflows", "Owns reporting", "Keeps the source of truth in sync"], weekly: [ "Integrations monitored and fixed when platforms change", "Repetitive workflows automated one by one", "Reporting delivered on schedule, every time", "Your CRM and docs kept as one source of truth", ], expert: "Built and supervised by a senior marketing operations specialist who follows tooling and automation best practices closely and upgrades the agent's workflows as better approaches ship.", tools: ["Slack", "Notion", "Zapier", "Make", "n8n", "Airtable", "HubSpot", "Google Workspace"], }, }; const AGENT_ORDER = [ "social-media-manager", "ads-manager", "email-marketer", "seo-manager", "growth-hacker", "website-manager", "content-manager", "data-analyst", "marketing-operations", ]; const detectSlug = () => { if (window.__AGENT_SLUG__ && AGENT_DETAILS[window.__AGENT_SLUG__]) return window.__AGENT_SLUG__; const q = new URLSearchParams(location.search).get("a"); if (q && AGENT_DETAILS[q]) return q; return AGENT_ORDER[0]; }; /* ---------------------- Hero ---------------------- */ const AgentHero = ({ agent }) => (
{window.t("The crew")} · {window.t(agent.name)}

{window.t(agent.name)}

{window.t(agent.lead)}

{window.t(agent.sub)}

{window.t("Works in")} {agent.tools.map((name) => ( {TOOL_ICONS[name] ? {name} : {name}} ))}
); /* ---------------------- What it runs / weekly output ---------------------- */ const AgentScope = ({ agent }) => (

ships') }} />

{window.t("One clear lane, owned end to end, with finished work landing in your tools every week.")}

{window.t("What it runs")}

{window.t("One lane, owned end to end.")}

    {agent.runs.map((b) => (
  • {window.t(b)}
    • ))}
{window.t("What lands every week")}

{window.t("Work shipped, not suggestions.")}

    {agent.weekly.map((b) => (
  • ✓ {window.t(b)}
    • ))}
); /* ---------------------- The specialist behind it ---------------------- */ const AgentExpert = ({ agent }) => (

specialist behind the agent') }} />

{window.t(agent.expert)}

{[ ["Built by a specialist", "The agent's playbooks are written by a highly qualified specialist in this niche, not generated from a generic prompt."], ["Kept current", "Best practices and new approaches are folded into the agent as they prove out, so the work never runs on last year's tactics."], ["Tuned at setup", "During setup the specialist tunes the agent to your business: your voice, your rules, your edge cases. From there, your approvals keep every output in your hands."], ].map(([h, p]) => (
{window.t(h)}

{window.t(p)}

))}
); /* ---------------------- Oversight (shared copy) ---------------------- */ const AgentOversight = () => (

automatic once trusted') }} />

{window.t("Early on, every action lands as a Slack card with Approve, Edit, and Skip. As a workflow proves itself, you promote it to run on its own. Trust expands one workflow at a time, and you can pull any flow back anytime.")}

); /* ---------------------- Pricing strip ---------------------- */ const AgentPricing = ({ agent }) => (

pricing') }} />

{window.t("Fully operational agents, tailored to your needs, no hidden fees.")}

{window.t("Per agent")}
€500/mo
{window.t("Billed monthly. Covers 24/7 monitoring, support, updates, and tuning to your data.")}
{window.t("Setup")}
{window.t("From")} €1,500 {window.t("one-time")}
{window.t("Per agent: process audit, integration with your stack, rules and historical data loaded, approval cycle configured.")}
{window.t("Hire this agent")}

{window.t("Four weeks from discovery to live: audit, build, draft-only mode, then live with your approval on every output until each workflow earns its way to automatic.")}

{window.t("Start with this agent alone, or pair it with the roles it hands work to. You can add or remove agents monthly, no long-term commitments.")}

); /* ---------------------- Rest of the crew ---------------------- */ const RestOfCrew = ({ slug }) => (

crew') }} />

{window.t("On bigger pushes the agents coordinate, one handing work to the next until the campaign ships.")}

{AGENT_ORDER.filter((s) => s !== slug).map((s) => ( {window.t(AGENT_DETAILS[s].name)} ))}
{window.t("See the full crew and pricing")}
); /* ---------------------- App ---------------------- */ function AgentDetailApp() { const slug = detectSlug(); const agent = AGENT_DETAILS[slug]; return (
); } Object.assign(window, { AgentDetailApp, AGENT_DETAILS, AGENT_ORDER }); ReactDOM.createRoot(document.getElementById("root")).render();