`runs/businessclaw-2026-05-05-2018/mockups/index.html`

83 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mockups — 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);--bg:#0e0e10;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--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)}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:1200px;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)}
.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 32px}
.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)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;margin:24px 0}
.card{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .2s}
.card:hover{border-color:var(--gold)}
.card .pic{aspect-ratio:16/10;border-bottom:1px solid var(--rule);overflow:hidden;position:relative}
.card .pic svg{width:100%;height:100%}
.card .body{padding:22px 24px}
.card .num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold);margin-bottom:6px}
.card h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:0 0 8px;letter-spacing:-.005em}
.card p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px}
.card .meta{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
</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="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">Mockups · Section 04 of 07</div>
  <h1>Three different ways the homepage <em>could</em> exist.</h1>
  <p class="lede">Each of these is a distinct aesthetic direction — not three skins of the same template. They're hand-built to test where the brand can stretch. Variant 01 is the safest pick for shipping next week; variant 03 is the most distinctive; variant 02 is the one that proves the technical surface to a skeptical buyer.</p>

  <div class="cards">
    <a class="card" href="01-editorial.html">
      <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#0e0e10"/><stop offset="1" stop-color="#16161a"/></linearGradient></defs><rect width="320" height="200" fill="url(#g1)"/><rect x="20" y="14" width="280" height="1" fill="#2a2a30"/><circle cx="32" cy="9" r="3" fill="#d4a04a"/><text x="40" y="11" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="6" font-style="italic">Commerce Claw</text><text x="20" y="60" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="22" font-style="italic">An <tspan fill="#d4a04a">editorial</tspan> for</text><text x="20" y="86" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="22" font-style="italic">small business.</text><line x1="20" y1="100" x2="60" y2="100" stroke="#d4a04a" stroke-width=".7"/><text x="20" y="116" fill="#aaa" font-family="Inter" font-size="6">A long-form magazine of automation, written</text><text x="20" y="124" fill="#aaa" font-family="Inter" font-size="6">while Stripe is being refunded in the background.</text><rect x="20" y="138" width="40" height="12" rx="1" fill="#d4a04a"/><text x="40" y="146" fill="#0e0e10" text-anchor="middle" font-family="Inter" font-size="5" font-weight="600">READ</text><rect x="68" y="138" width="40" height="12" rx="1" fill="none" stroke="#d4a04a"/><text x="88" y="146" fill="#d4a04a" text-anchor="middle" font-family="Inter" font-size="5">SIGN IN</text><g opacity=".6"><rect x="180" y="40" width="120" height="120" fill="#1a1a1f" stroke="#2a2a30"/><text x="240" y="100" text-anchor="middle" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="9">"the issue"</text><text x="240" y="115" text-anchor="middle" fill="#888" font-family="JetBrains Mono" font-size="4" letter-spacing="1">VOL. 01 · MAY 2026</text></g></svg></div>
      <div class="body">
        <div class="num">Variant 01</div>
        <h3>Editorial · The Magazine</h3>
        <p>Commerce Claw as a literary quarterly that happens to ship a product. Cormorant headlines, drop caps, pull quotes. The product surface is one panel inside a longer essay-style page about <em>why</em> small business automation matters.</p>
        <div class="meta">SAFEST PICK · 5-7 day build · referenced peer: Workato</div>
      </div>
    </a>

    <a class="card" href="02-dashboard-screenshot.html">
      <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><rect width="320" height="200" fill="#0e0e10"/><rect x="14" y="22" width="290" height="160" rx="4" fill="#16161a" stroke="#2a2a30"/><rect x="14" y="22" width="290" height="20" rx="4" fill="#1c1c22"/><circle cx="22" cy="32" r="2" fill="#c9856e"/><circle cx="30" cy="32" r="2" fill="#d9b577"/><circle cx="38" cy="32" r="2" fill="#8fb89a"/><text x="160" y="35" text-anchor="middle" fill="#aaa" font-family="JetBrains Mono" font-size="5">commerceclaw.app/chat</text><rect x="20" y="50" width="100" height="124" rx="2" fill="#0e0e10" stroke="#2a2a30"/><text x="28" y="62" fill="#888" font-family="JetBrains Mono" font-size="4">CONNECTORS · 56</text><g><rect x="28" y="68" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="73" r="2" fill="#635bff"/><text x="40" y="75" fill="#f4f1ea" font-family="Inter" font-size="4">Stripe</text><circle cx="100" cy="73" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="80" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="85" r="2" fill="#96bf48"/><text x="40" y="87" fill="#f4f1ea" font-family="Inter" font-size="4">Shopify</text><circle cx="100" cy="85" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="92" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="97" r="2" fill="#4a154b"/><text x="40" y="99" fill="#f4f1ea" font-family="Inter" font-size="4">Slack</text><circle cx="100" cy="97" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="104" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="109" r="2" fill="#000"/><text x="40" y="111" fill="#f4f1ea" font-family="Inter" font-size="4">Notion</text><circle cx="100" cy="109" r="1.5" fill="#8fb89a"/></g><rect x="124" y="50" width="170" height="100" rx="2" fill="#0e0e10" stroke="#2a2a30"/><text x="132" y="62" fill="#d4a04a" font-family="JetBrains Mono" font-size="4">CHAT · &gt;</text><rect x="132" y="68" width="154" height="14" rx="1" fill="#1a1a20"/><text x="138" y="77" fill="#f4f1ea" font-family="Inter" font-size="4" font-style="italic">"refund the last 3 stripe charges and post in #sales"</text><rect x="132" y="86" width="154" height="50" rx="1" fill="#0a0a0c" stroke="#1a1a20"/><text x="138" y="95" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ stripe.refund(ch_*)  ✓ 3/3</text><text x="138" y="103" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ slack.post(#sales)   ✓ delivered</text><text x="138" y="111" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ audit.log(8a3f...)   ✓ aes-256-gcm</text><text x="138" y="125" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="6">done · 312ms · approved by you</text><rect x="124" y="156" width="170" height="20" rx="2" fill="#1c1c22"/><text x="132" y="168" fill="#aaa" font-family="JetBrains Mono" font-size="4">type a command...</text><circle cx="288" cy="166" r="4" fill="#d4a04a"/></svg></div>
      <div class="body">
        <div class="num">Variant 02</div>
        <h3>Dashboard Screenshot Story</h3>
        <p>The whole page is the app, captured. Hero is a perfect-pixel shot of the chat surface mid-execution: prompt typed, three connector calls completing, audit-trail line scrolling. No marketing copy until the scroll.</p>
        <div class="meta">PROVES THE SURFACE · 3-day build if you have a screenshot · referenced peer: Pipedream</div>
      </div>
    </a>

    <a class="card" href="03-recipe-wall.html">
      <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><rect width="320" height="200" fill="#0e0e10"/><text x="160" y="22" text-anchor="middle" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="14" font-style="italic">For your <tspan fill="#d4a04a">salon</tspan>.</text><text x="160" y="33" text-anchor="middle" fill="#aaa" font-family="JetBrains Mono" font-size="4" letter-spacing="2">5 RECIPES · 1 CHAT · ZERO ZAPS</text><g><rect x="14" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="20" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 01</text><text x="20" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">No-show charge</text><text x="20" y="80" fill="#aaa" font-family="Inter" font-size="4">Square → Stripe → Twilio</text></g><g><rect x="114" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="120" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 02</text><text x="120" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Review reply</text><text x="120" y="80" fill="#aaa" font-family="Inter" font-size="4">Yelp + Google → drafts</text></g><g><rect x="214" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="220" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 03</text><text x="220" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Birthday SMS</text><text x="220" y="80" fill="#aaa" font-family="Inter" font-size="4">Square → Twilio</text></g><g><rect x="14" y="98" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="20" y="110" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 04</text><text x="20" y="122" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Inventory low</text><text x="20" y="134" fill="#aaa" font-family="Inter" font-size="4">Square → Slack + email</text></g><g><rect x="114" y="98" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="120" y="110" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 05</text><text x="120" y="122" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Weekly close</text><text x="120" y="134" fill="#aaa" font-family="Inter" font-size="4">Stripe + Square → Sheets</text></g><g><rect x="214" y="98" width="92" height="46" rx="2" fill="none" stroke="#d4a04a" stroke-dasharray="2,2"/><text x="260" y="123" text-anchor="middle" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="9">+ your own</text></g><text x="160" y="170" text-anchor="middle" fill="#aaa" font-family="Inter" font-size="5">Browse recipes by trade · <tspan fill="#d4a04a">restaurants</tspan> · <tspan fill="#d4a04a">trades</tspan> · <tspan fill="#d4a04a">studios</tspan> · 27 more</text></svg></div>
      <div class="body">
        <div class="num">Variant 03</div>
        <h3>SMB Recipe Wall</h3>
        <p>The homepage is a visual library of pre-built automation recipes, organized by SMB vertical (salon, restaurant, trades, studios, agencies, retail…). The page <em>is</em> the SEO surface — every card becomes a programmatic landing page.</p>
        <div class="meta">MOST DEFENSIBLE LONG TERM · 10-14 day build · referenced peer: Zapier templates section, but inverted (vertical-first not tool-first)</div>
      </div>
    </a>
  </div>

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