`runs/businessclaw-2026-05-05-2018/mockups/01-editorial.html`

148 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mockup 01 · Editorial — Commerce Claw</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;0,700;1,400;1,500;1,600&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);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.12);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--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,.08),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.05),transparent 65%);pointer-events:none;z-index:0}
.banner{position:sticky;top:0;background:rgba(14,14,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);z-index:99}
.banner a{color:var(--gold);text-decoration:none}
.topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:30px 56px;border-bottom:1px solid var(--rule);max-width:1400px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.logo-dot{width:30px;height:30px;border-radius:50%;background:var(--gold);position:relative}
.logo-dot::after{content:"C";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bg);font-size:17px}
.brand-name{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.005em;line-height:1}
.brand-name em{font-style:italic;color:var(--gold)}
.brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:5px}
.topnav{display:flex;gap:32px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.topnav a{color:var(--ink-mute);text-decoration:none}.topnav a:hover{color:var(--gold)}
.topnav .signin{color:var(--gold);border:1px solid var(--gold);padding:8px 16px;border-radius:2px}
main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:24px 56px 96px}
.issue-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding:14px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:54px}
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;margin-bottom:96px;align-items:start}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.eyebrow::before{content:"";display:inline-block;width:24px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px;margin-bottom:3px}
h1{font-family:var(--serif);font-weight:500;font-size:88px;line-height:.98;letter-spacing:-.025em;margin:0 0 28px}
h1 em{font-style:italic;color:var(--gold)}
.dek{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.45;color:var(--ink-soft);max-width:46ch}
.byline{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:28px}
.byline em{color:var(--gold);font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0}
.hero-sidebar{position:sticky;top:96px;border-left:1px solid var(--rule);padding-left:32px}
.toc{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.contents{display:flex;flex-direction:column;gap:14px}
.contents a{color:var(--ink-soft);text-decoration:none;font-family:var(--serif);font-size:18px;line-height:1.3;border-bottom:1px solid transparent;padding-bottom:4px}
.contents a:hover{color:var(--gold);border-color:var(--rule)}
.contents .num{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.18em;display:block;margin-bottom:2px}
.feature{margin:96px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
.feature .num{grid-column:1/3;font-family:var(--serif);font-style:italic;font-size:48px;color:var(--gold);line-height:1}
.feature h2{grid-column:3/9;font-family:var(--serif);font-weight:500;font-size:42px;line-height:1.1;letter-spacing:-.01em;margin:0}
.feature h2 em{font-style:italic;color:var(--gold)}
.feature .body{grid-column:3/9;font-size:16px;line-height:1.75;color:var(--ink-soft)}
.feature .body p{margin:14px 0}
.feature .body p::first-letter{font-family:var(--serif);font-size:48px;font-style:italic;float:left;line-height:.85;margin:6px 8px 0 0;color:var(--gold)}
.feature .aside{grid-column:9/13;border-left:1px solid var(--rule);padding:8px 0 8px 24px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink-soft)}
.feature .aside .label{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-style:normal;display:block;margin-bottom:8px}
.connector-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin:42px 0;padding:32px;border:1px solid var(--rule);background:var(--bg-card);border-radius:2px}
.connector-grid .conn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:2px;background:rgba(244,241,234,.02);font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-mute);text-align:center;padding:6px;transition:border .15s,color .15s}
.connector-grid .conn:hover{border-color:var(--gold);color:var(--gold)}
.pull{font-family:var(--serif);font-style:italic;font-size:42px;line-height:1.25;color:var(--ink);max-width:24ch;margin:96px auto;text-align:center;padding:0 32px;position:relative}
.pull::before,.pull::after{content:'"';font-size:120px;color:var(--gold);font-family:var(--serif);line-height:0;vertical-align:middle;opacity:.4}
.pull::before{margin-right:12px}.pull::after{margin-left:12px}
.cta-strip{margin:96px 0 0;padding:64px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.cta-strip h3{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.1;margin:0 0 16px}
.cta-strip h3 em{font-style:italic;color:var(--gold)}
.cta-strip p{color:var(--ink-soft);margin:0 0 32px}
.cta-form{display:flex;justify-content:center;gap:8px;max-width:520px;margin:0 auto}
.cta-form input{flex:1;background:var(--bg-elevated);border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:13px;padding:14px 16px;border-radius:2px;outline:none}
.cta-form input:focus{border-color:var(--gold)}
.cta-form button{background:var(--gold);color:var(--bg);border:none;padding:14px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:2px;font-weight:500}
footer{padding:56px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:780px){
  .topbar,.banner{padding:14px 22px}main{padding:20px 22px 64px}h1{font-size:54px}.hero,.feature{grid-template-columns:1fr}.hero-sidebar{position:static;border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}.feature .num,.feature h2,.feature .body,.feature .aside{grid-column:1/-1}.feature .aside{border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}.connector-grid{grid-template-columns:repeat(4,1fr)}.pull{font-size:28px}
}
</style></head>
<body>
<div class="banner">Mockup 01 · Editorial · concept variant for businessclaw.agentabrams.com — <a href="index.html">back to mockups</a></div>
<div class="topbar">
  <div class="brand">
    <div class="logo-dot"></div>
    <div><div class="brand-name">Commerce <em>Claw</em></div><div class="brand-sub">Connected Commerce</div></div>
  </div>
  <nav class="topnav"><a>Why</a><a>Connectors</a><a>Pricing</a><a>Docs</a><a class="signin">Sign in</a></nav>
</div>
<main>
  <div class="issue-bar"><span>Vol. 01 · No. 01</span><span>May 2026</span><span>For the small business of one</span></div>

  <section class="hero">
    <div>
      <div class="eyebrow">The Issue · Volume 01</div>
      <h1>The <em>quiet</em> revolution in small business automation.</h1>
      <p class="dek">An AI command line for fifty-six tools you already pay for. Built for owner-operators who'd rather not learn the word <em>"webhook."</em></p>
      <p class="byline">A reading by <em>Commerce Claw</em> · 7 min · approval-gated · audit-trail every action</p>
    </div>
    <aside class="hero-sidebar">
      <div class="toc">In this issue</div>
      <div class="contents">
        <a href="#essay"><span class="num">01 · Essay</span>Why automation tools failed small business — and what to fix</a>
        <a href="#connectors"><span class="num">02 · Reference</span>The fifty-six tools, in alphabetical order</a>
        <a href="#story"><span class="num">03 · Field note</span>One Saturday at a salon in Highland Park</a>
        <a href="#trust"><span class="num">04 · Footnote</span>What "AES-256-GCM at rest" actually means</a>
        <a href="#cta"><span class="num">05 · Subscribe</span>Get the next issue</a>
      </div>
    </aside>
  </section>

  <section class="feature" id="essay">
    <div class="num">I.</div>
    <h2>Zapier is for engineers. We are for the <em>person who owns the salon.</em></h2>
    <div class="body">
      <p>Workflow automation as a category was built by developers, for developers, and then awkwardly retrofitted for everyone else. The vocabulary is the giveaway: <em>zaps</em>, <em>webhooks</em>, <em>polling intervals</em>, <em>JSON path expressions</em>. None of these words are nouns the proprietor of a fourteen-chair barbershop has ever needed to say out loud.</p>
      <p>Commerce Claw begins from the other end of the room. The interface is a sentence. <em>Refund the last three Stripe charges and post the names in Slack.</em> Underneath, a router that reads fifty-six connector schemas decides which APIs to call, in what order, and with what arguments — and pauses for your approval before any action that moves money or touches a customer. The result is something that finally answers the question Zapier never quite did: what does automation look like when the person operating it does not, and should not have to, write code?</p>
    </div>
    <div class="aside"><span class="label">In the margin</span>Half the small businesses we've spoken with have a Zapier account. Two of them have ever finished building a Zap.</div>
  </section>

  <section id="connectors">
    <div class="eyebrow" style="text-align:center;margin:0 auto 12px;display:block">II · The Reference</div>
    <h3 style="font-family:var(--serif);font-weight:500;font-size:42px;text-align:center;margin:0 0 8px">Fifty-six connectors. <em style="color:var(--gold);font-style:italic">All pre-wired.</em></h3>
    <p style="text-align:center;color:var(--ink-mute);margin-bottom:18px">Curated, not exhaustive. The fifty-six tools small businesses actually use — not the seven-thousand they don't.</p>
    <div class="connector-grid">
      <div class="conn">Stripe</div><div class="conn">Shopify</div><div class="conn">Slack</div><div class="conn">Notion</div><div class="conn">HubSpot</div><div class="conn">Discord</div><div class="conn">Cloudflare</div><div class="conn">Google&nbsp;Sheets</div>
      <div class="conn">Gmail</div><div class="conn">Calendar</div><div class="conn">Drive</div><div class="conn">Twilio</div><div class="conn">SendGrid</div><div class="conn">Mailchimp</div><div class="conn">Square</div><div class="conn">PayPal</div>
      <div class="conn">QuickBooks</div><div class="conn">Xero</div><div class="conn">Airtable</div><div class="conn">Trello</div><div class="conn">Asana</div><div class="conn">Linear</div><div class="conn">GitHub</div><div class="conn">GitLab</div>
      <div class="conn">Zendesk</div><div class="conn">Intercom</div><div class="conn">Front</div><div class="conn">Help&nbsp;Scout</div><div class="conn">Freshdesk</div><div class="conn">Salesforce</div><div class="conn">Pipedrive</div><div class="conn">Close</div>
      <div class="conn">Calendly</div><div class="conn">Acuity</div><div class="conn">Cal.com</div><div class="conn">Zoom</div><div class="conn">Loom</div><div class="conn">Figma</div><div class="conn">Canva</div><div class="conn">Dropbox</div>
      <div class="conn">Box</div><div class="conn">OneDrive</div><div class="conn">DocuSign</div><div class="conn">PandaDoc</div><div class="conn">Webflow</div><div class="conn">WordPress</div><div class="conn">Squarespace</div><div class="conn">Ghost</div>
      <div class="conn">Yelp</div><div class="conn">Google&nbsp;Biz</div><div class="conn">Instagram</div><div class="conn">Facebook</div><div class="conn">LinkedIn</div><div class="conn">Twitter/X</div><div class="conn">TikTok</div><div class="conn">+&nbsp;1</div>
    </div>
  </section>

  <p class="pull">There is a small business in Highland Park that closed for forty-seven minutes one Saturday because Yelp said yes and the calendar said no. We've been thinking about that all year.</p>

  <section class="feature" id="trust">
    <div class="num">IV.</div>
    <h2>Every credential, every command, <em>encrypted at rest.</em></h2>
    <div class="body">
      <p>This sentence used to live on page sixteen of the security PDF. We're putting it on page one because it is the only thing that matters when an AI agent is allowed near your Stripe key. AES-256-GCM symmetric encryption on every connector credential, atomic write-and-fsync so a half-finished save never corrupts the store, and an immutable audit trail for every action the agent ever takes — sensitive ones gated behind your approval before execution. CSP, HSTS-preload, type-coerced session IDs. None of this is glamorous. All of it is required.</p>
    </div>
    <div class="aside"><span class="label">Footnote</span>If you cannot tell us what your automation tool does with your Stripe secret key, that's not a feature. That's a bug.</div>
  </section>

  <section class="cta-strip" id="cta">
    <h3>Read the next <em>issue.</em></h3>
    <p>Vol. 01 / No. 02 ships in two weeks. We'll let you know.</p>
    <form class="cta-form" onsubmit="event.preventDefault();this.querySelector('button').textContent='Thank you'">
      <input type="email" placeholder="email address" required>
      <button type="submit">Subscribe</button>
    </form>
  </section>
</main>
<footer>Commerce Claw · A reading on connected commerce · businessclaw.agentabrams.com</footer>
</body></html>