`runs/businessclaw-2026-05-05-2018/peers.html`

170 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Peer Survey — businessclaw.agentabrams.com</title>
<meta name="robots" content="noindex" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--ink-faint:rgba(244,241,234,.30);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--warn:#d9b577;--bad:#c9856e;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.04),transparent 65%);pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px 32px 96px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
h1 em{font-style:italic;color:var(--gold)}
h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 18px;border-top:1px solid var(--rule);padding-top:32px}
.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 28px}
p,li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
.nav a{color:var(--ink-mute);text-decoration:none}
.nav a:hover,.nav .home{color:var(--gold)}
.peer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin:28px 0}
.peer{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);overflow:hidden;display:flex;flex-direction:column}
.peer .shot{aspect-ratio:16/10;background:linear-gradient(135deg,#1a1a1f,#0e0e10);position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.peer .shot svg{position:absolute;inset:0;width:100%;height:100%}
.peer .body{padding:20px 22px}
.peer h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 4px;color:var(--ink)}
.peer .url{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-mute);margin-bottom:14px;text-transform:lowercase}
.peer .borrow{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:14px 0 6px}
.peer p{font-size:14px;margin:0 0 8px;color:var(--ink-soft);line-height:1.65}
.matrix{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}
.matrix th,.matrix td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left}
.matrix th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.matrix .y{color:var(--good)}.matrix .n{color:var(--bad);opacity:.6}
.callout{border-left:2px solid var(--gold);background:var(--gold-soft);padding:18px 22px;margin:24px 0}
.callout strong{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500}
</style></head>
<body>
<nav class="nav">
  <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
  <a href="report.html">Audit</a>
  <a href="peers.html">Peers</a>
  <a href="competitors.html">Competitors</a>
  <a href="mockups/index.html">Mockups</a>
  <a href="tools.html">Tools</a>
  <a href="hub.html">Info Hub</a>
  <a href="extension.html">Extension</a>
</nav>
<main>
  <div class="eyebrow">Peer Survey · Section 02 of 07</div>
  <h1>Eight automation tools that <em>have</em> homepages.</h1>
  <p class="lede">A survey of how the established peers in workflow-automation present themselves at the door — what each one does well, and the single UX move from each that Commerce Claw should consider borrowing. Mockups in the next section pull from this menu.</p>

  <div class="peer-grid">

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0c0c0e"/><rect x="0" y="0" width="160" height="14" fill="#16161a"/><circle cx="8" cy="7" r="2" fill="#ff6d3b"/><rect x="14" y="22" width="60" height="6" rx="1" fill="#ffe8d7"/><rect x="14" y="32" width="100" height="3" rx="1" fill="#888"/><rect x="14" y="38" width="80" height="3" rx="1" fill="#666"/><rect x="14" y="50" width="32" height="10" rx="2" fill="#ff6d3b"/><rect x="50" y="50" width="32" height="10" rx="2" fill="none" stroke="#ff6d3b"/><g><rect x="14" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="38" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="62" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="86" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="110" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="134" y="68" width="22" height="22" rx="3" fill="#1f1f24"/></g></svg></div>
      <div class="body">
        <h3>Zapier</h3>
        <div class="url">zapier.com</div>
        <p>The market-defining homepage for workflow automation: hero claim ("Automate without limits"), then immediately a typeable "Connect <em>X</em> with <em>Y</em>" search field that returns suggested workflows.</p>
        <div class="borrow">Borrow this</div>
        <p>The <strong>Connect-X-with-Y typeable hero</strong>. Stripe + Slack autofills "When a Stripe payment succeeds, post to Slack." That single UI element does positioning, demo, and SEO routing in one.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0a0c10"/><rect x="0" y="0" width="160" height="14" fill="#10141a"/><circle cx="8" cy="7" r="2" fill="#ea4b71"/><rect x="14" y="20" width="56" height="5" rx="1" fill="#ea4b71"/><rect x="14" y="30" width="120" height="4" rx="1" fill="#cfe"/><rect x="14" y="38" width="100" height="4" rx="1" fill="#9ad"/><g stroke="#ea4b71" stroke-width=".5" fill="none"><rect x="20" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><rect x="68" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><rect x="116" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><line x1="42" y1="65" x2="68" y2="65"/><line x1="90" y1="65" x2="116" y2="65"/></g><circle cx="31" cy="65" r="2" fill="#ea4b71"/><circle cx="79" cy="65" r="2" fill="#ea4b71"/><circle cx="127" cy="65" r="2" fill="#ea4b71"/><rect x="14" y="84" width="40" height="8" rx="2" fill="#ea4b71"/></svg></div>
      <div class="body">
        <h3>n8n</h3>
        <div class="url">n8n.io</div>
        <p>Open-source, self-hostable, fair-code license. Homepage hero is a live, animated workflow canvas — three nodes, drawn arrows, looping execution dots. You watch automation happen.</p>
        <div class="borrow">Borrow this</div>
        <p>The <strong>animated workflow canvas above the fold.</strong> No video file, no autoplay-blocked-by-Safari issue — it's CSS+SVG looping forever. Costs nothing to host, communicates everything.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0e1014"/><rect x="0" y="0" width="160" height="14" fill="#13161c"/><rect x="14" y="22" width="80" height="6" rx="1" fill="#3eb489"/><rect x="14" y="34" width="120" height="3" rx="1" fill="#aaa"/><rect x="14" y="40" width="90" height="3" rx="1" fill="#888"/><g font-family="monospace" font-size="3" fill="#3eb489"><text x="14" y="56">$ pd run --trigger=stripe.charge.succeeded</text><text x="14" y="62">  → slack.notify(#sales)</text><text x="14" y="68">  → notion.create(page)</text><text x="14" y="74">✓ executed in 312ms</text></g><rect x="14" y="84" width="34" height="8" rx="2" fill="#3eb489"/></svg></div>
      <div class="body">
        <h3>Pipedream</h3>
        <div class="url">pipedream.com</div>
        <p>Developer-first, code-anywhere-in-the-flow. Homepage shows a <em>terminal-style execution log</em> — real input event, real transforms, real output, real timing.</p>
        <div class="borrow">Borrow this</div>
        <p>The <strong>terminal log of a real run</strong>. For an audience that has been burned by no-code black boxes, "here is the literal trace of an event flowing through" is the most credible artifact you can show. Mockup variant 06 is built on this.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#1a1a2e"/><rect x="0" y="0" width="160" height="14" fill="#1f1f3a"/><rect x="14" y="22" width="70" height="6" rx="1" fill="#7659e0"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#ddd"/><circle cx="40" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><circle cx="80" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><circle cx="120" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><line x1="54" y1="60" x2="66" y2="60" stroke="#7659e0" stroke-width=".7"/><line x1="94" y1="60" x2="106" y2="60" stroke="#7659e0" stroke-width=".7"/><rect x="14" y="84" width="40" height="8" rx="2" fill="#7659e0"/></svg></div>
      <div class="body">
        <h3>Make (Integromat)</h3>
        <div class="url">make.com</div>
        <p>Visual canvas + colorful node-circles. Hero focuses on "no-code" and the visual canvas. Pricing prominently above the fold — operations-based, not seats-based.</p>
        <div class="borrow">Borrow this</div>
        <p><strong>Pricing above the fold</strong>. SaaS buyers will scroll for it; putting it visible signals you're not embarrassed by the number. Commerce Claw's number is currently $0 — say it.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0d0d12"/><rect x="0" y="0" width="160" height="14" fill="#15151c"/><rect x="14" y="22" width="80" height="6" rx="1" fill="#52e3a4"/><rect x="14" y="32" width="120" height="3" rx="1" fill="#aaa"/><g><rect x="14" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="38" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="62" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="86" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="110" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="14" y="70" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="38" y="70" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="62" y="70" width="20" height="20" rx="3" fill="#1c1c24"/></g></svg></div>
      <div class="body">
        <h3>Tray.io</h3>
        <div class="url">tray.io</div>
        <p>Enterprise-flavored. Hero leads with logos of buyers (IBM, Cisco, Adobe). Section called "Connectors" shows a 8×4 grid with hover-glow.</p>
        <div class="borrow">Borrow this</div>
        <p><strong>The 8×4 logo grid</strong> as the second-fold section. Commerce Claw has 56 connectors — that's a 7×8 grid. Use simpleicons.org (already CSP-allowed) so each logo is a 1.2KB SVG, not an asset request hellscape.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#1c1c1c"/><rect x="0" y="0" width="160" height="14" fill="#262626"/><rect x="14" y="22" width="60" height="6" rx="1" fill="#33ccff"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#bbb"/><g><rect x="14" y="44" width="80" height="36" rx="2" fill="#262626"/><circle cx="24" cy="54" r="3" fill="#33ccff"/><rect x="32" y="52" width="50" height="3" fill="#888"/><circle cx="24" cy="64" r="3" fill="#33ccff"/><rect x="32" y="62" width="44" height="3" fill="#888"/><circle cx="24" cy="74" r="3" fill="#33ccff"/><rect x="32" y="72" width="36" height="3" fill="#888"/></g><rect x="100" y="44" width="46" height="36" rx="2" fill="#262626"/><circle cx="123" cy="62" r="9" fill="#33ccff"/></svg></div>
      <div class="body">
        <h3>IFTTT</h3>
        <div class="url">ifttt.com</div>
        <p>The OG. Headline is still "Every thing works better together" — never moved off it. Hero is a giant "If <em>this</em> then <em>that</em>" plain-English builder.</p>
        <div class="borrow">Borrow this</div>
        <p><strong>The plain-English sentence-builder</strong>. "When [Stripe charge succeeds] then [post to Slack]" reads at the 8th-grade level a Yelp-comparison SMB owner expects. Don't make them learn the word "webhook."</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#fdfcf9"/><rect x="0" y="0" width="160" height="14" fill="#fff"/><rect x="14" y="22" width="86" height="6" rx="1" fill="#1a1a1a"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#888"/><g><rect x="14" y="46" width="58" height="40" rx="2" fill="#f6f3ec"/><rect x="22" y="56" width="42" height="3" fill="#444"/><rect x="22" y="64" width="36" height="2" fill="#888"/><rect x="22" y="74" width="28" height="6" rx="1" fill="#1a1a1a"/></g><g><rect x="80" y="46" width="58" height="40" rx="2" fill="#f6f3ec"/><rect x="88" y="56" width="42" height="3" fill="#444"/><rect x="88" y="64" width="40" height="2" fill="#888"/><rect x="88" y="74" width="28" height="6" rx="1" fill="#1a1a1a"/></g></svg></div>
      <div class="body">
        <h3>Workato</h3>
        <div class="url">workato.com</div>
        <p>Light-mode, enterprise. Editorial typography (close to Cormorant in spirit). Highly testimonial-driven — quotes from CIOs, not engineers.</p>
        <div class="borrow">Borrow this</div>
        <p><strong>One large pull-quote at the third fold</strong>. Cormorant italic 28px, named SMB customer once you have one. For now, ship the quote slot empty-but-sized so the design doesn't reflow when you fill it.</p>
      </div>
    </div>

    <div class="peer">
      <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0f0f1a"/><rect x="0" y="0" width="160" height="14" fill="#171723"/><rect x="14" y="22" width="74" height="6" rx="1" fill="#ffd166"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#cdd"/><g><rect x="14" y="46" width="132" height="40" rx="3" fill="#1a1a28"/><rect x="22" y="54" width="3" height="24" fill="#ffd166"/><rect x="30" y="54" width="80" height="3" fill="#ddd"/><rect x="30" y="62" width="100" height="2" fill="#888"/><rect x="30" y="68" width="60" height="2" fill="#888"/><rect x="30" y="74" width="36" height="6" rx="1" fill="#ffd166"/></g></svg></div>
      <div class="body">
        <h3>Bardeen</h3>
        <div class="url">bardeen.ai</div>
        <p>Closest peer to Commerce Claw's "AI command line" framing. Browser extension + chat sidebar. Hero is a screencast of the sidebar running an action across tabs.</p>
        <div class="borrow">Borrow this</div>
        <p><strong>The "show the chat sidebar mid-action" screencast</strong>. Commerce Claw's chat is the killer interaction — show it executing a real prompt against a real connector, with the audit-trail line scrolling underneath. Mockup variant 09 is built on this.</p>
      </div>
    </div>

  </div>

  <h2>Side-by-side feature matrix</h2>
  <table class="matrix">
    <thead><tr><th>Tool</th><th>Free tier</th><th>Self-host</th><th>AI chat UI</th><th>Connector count (public)</th><th>Open source</th><th>Editorial brand</th></tr></thead>
    <tbody>
      <tr><td>Zapier</td><td class="y">yes (5 zaps)</td><td class="n">no</td><td class="y">"Copilot" 2024</td><td>~7,000+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td>n8n</td><td class="y">self-host free</td><td class="y">yes</td><td class="y">AI nodes</td><td>~400+</td><td class="y">fair-code</td><td class="n">no</td></tr>
      <tr><td>Pipedream</td><td class="y">yes (10k credits)</td><td class="n">no</td><td class="y">code-with-AI</td><td>~2,500+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td>Make</td><td class="y">yes (1k ops)</td><td class="n">no</td><td class="y">AI helper</td><td>~1,800+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td>Tray.io</td><td class="n">no</td><td class="n">no</td><td class="y">"Merlin" agent</td><td>~700+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td>IFTTT</td><td class="y">yes (2 applets)</td><td class="n">no</td><td class="n">no</td><td>~1,000+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td>Workato</td><td class="n">no</td><td class="n">no</td><td class="y">"Workbot"</td><td>~1,200+</td><td class="n">no</td><td class="y">close</td></tr>
      <tr><td>Bardeen</td><td class="y">yes (limited)</td><td class="n">no</td><td class="y">central UX</td><td>~100+</td><td class="n">no</td><td class="n">no</td></tr>
      <tr><td><strong>Commerce Claw</strong></td><td class="y"><strong>yes (alpha)</strong></td><td class="n">tbd</td><td class="y"><strong>central UX</strong></td><td><strong>56</strong></td><td class="n">tbd</td><td class="y"><strong>yes</strong></td></tr>
    </tbody>
  </table>
  <p style="font-size:13px;color:var(--ink-mute);margin-top:6px"><em>Connector counts as published on each peer's homepage / public docs as of audit date. Commerce Claw counts are based on what the audit prompt described.</em></p>

  <div class="callout"><strong>The single move worth stealing.</strong> Of the eight peers, only Workato has serif-driven editorial restraint, and they bury it under enterprise-sales chrome. Commerce Claw is the only player that could plausibly be <em>"the magazine of business automation"</em> — Cormorant + gold + sharp corners — while every competitor looks like a 2018 SaaS template. The brand identity is already there. The pages aren't.</p>

  <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Peer Survey · 2 of 7. Next → <a href="competitors.html" style="color:var(--gold)">Competitor Matrix</a></p>
</main>
</body></html>