`runs/businessclaw-2026-05-05-2018/mockups/03-recipe-wall.html`

165 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mockup 03 · SMB Recipe Wall — 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;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,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--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%);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:24px 56px;border-bottom:1px solid var(--rule);max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:14px}
.logo-dot{width:28px;height:28px;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:16px}
.brand-name{font-family:var(--serif);font-size:22px;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:28px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);align-items:center}
.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}
.hero{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:64px 56px 24px;text-align:center}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:84px;line-height:1.0;letter-spacing:-.025em;margin:0 auto 22px;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .dek{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink-soft);max-width:54ch;margin:0 auto 6px}
.vert-tabs{display:flex;justify-content:center;gap:6px;margin:36px auto 0;max-width:1100px;flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-mute);cursor:pointer;background:var(--bg-card)}
.tab.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:500}
.tab:hover:not(.active){color:var(--gold);border-color:var(--gold)}
.section-h{position:relative;z-index:1;max-width:1280px;margin:64px auto 24px;padding:0 56px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--rule);padding-bottom:18px}
.section-h h2{font-family:var(--serif);font-weight:500;font-size:36px;margin:0;letter-spacing:-.005em}
.section-h h2 em{font-style:italic;color:var(--gold)}
.section-h .meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.recipe-grid{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.recipe{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);padding:24px;display:flex;flex-direction:column;gap:14px;transition:border .15s,transform .15s;cursor:pointer}
.recipe:hover{border-color:var(--gold);transform:translateY(-2px)}
.recipe .num{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.recipe h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:0;letter-spacing:-.005em}
.recipe h3 em{font-style:italic;color:var(--gold)}
.recipe p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.tool{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);background:var(--bg-elevated);border:1px solid var(--rule);padding:5px 9px;border-radius:2px}
.tool .dot{width:8px;height:8px;border-radius:2px}
.flow .arr{color:var(--gold)}
.use{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-mute);margin-top:4px}
.use em{color:var(--gold);font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:13px;margin-right:8px}
.cta{position:relative;z-index:1;text-align:center;padding:80px 56px;max-width:1280px;margin:80px auto 0;border-top:1px solid var(--rule)}
.cta h3{font-family:var(--serif);font-weight:500;font-size:48px;margin:0 0 16px;line-height:1.1}
.cta h3 em{font-style:italic;color:var(--gold)}
.cta p{color:var(--ink-soft);margin:0 0 24px}
.btn-pri{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 28px;border-radius:2px;background:var(--gold);color:var(--bg);text-decoration:none;font-weight:500;display:inline-block}
footer{padding:48px 56px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);border-top:1px solid var(--rule)}
@media (max-width:980px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.topbar,.banner,.hero,.section-h,.recipe-grid,.cta,footer{padding-left:22px;padding-right:22px}.hero h1{font-size:48px}.recipe-grid{grid-template-columns:1fr}.topnav{display:none}}
</style></head>
<body>
<div class="banner">Mockup 03 · SMB Recipe Wall · 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>Recipes</a><a>Connectors</a><a>Pricing</a><a>Docs</a><a class="signin">Sign in</a></nav>
</div>

<section class="hero">
  <div class="eyebrow">— Pre-built for thirty SMB verticals —</div>
  <h1>Five <em>recipes</em> for your trade.</h1>
  <p class="dek">Pick the kind of business you run. Get a hand-built pack of automation recipes that already work — across the SaaS tools you already pay for. No zaps to build. No webhooks to debug.</p>
  <div class="vert-tabs">
    <span class="tab active">Salons</span>
    <span class="tab">Restaurants</span>
    <span class="tab">Trades</span>
    <span class="tab">Retail</span>
    <span class="tab">Studios</span>
    <span class="tab">Agencies</span>
    <span class="tab">+ 24 more</span>
  </div>
</section>

<div class="section-h">
  <h2>For your <em>salon.</em></h2>
  <div class="meta">5 recipes · all approval-gated · all reversible</div>
</div>

<section class="recipe-grid">
  <div class="recipe">
    <div class="num">Recipe 01</div>
    <h3>The <em>no-show</em> charge.</h3>
    <p>Client doesn't show within 15 minutes of their slot. Card-on-file is charged a fee, the client gets an apology-toned SMS, and your books are updated.</p>
    <div class="flow">
      <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#635bff"></span>Stripe</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#f22f46"></span>Twilio</span>
    </div>
    <div class="use"><em>Saves</em>~3 hours/week of front-desk follow-up</div>
  </div>

  <div class="recipe">
    <div class="num">Recipe 02</div>
    <h3>The <em>review reply</em> draft.</h3>
    <p>New review on Yelp or Google. Drafts a tone-matched reply for your approval, posts when you say go, and notes any patterns across reviews this month.</p>
    <div class="flow">
      <span class="tool"><span class="dot" style="background:#d32323"></span>Yelp</span>
      <span class="tool"><span class="dot" style="background:#4285f4"></span>Google&nbsp;Biz</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#000"></span>Notion</span>
    </div>
    <div class="use"><em>Replaces</em>$300/mo Birdeye / Podium subscription</div>
  </div>

  <div class="recipe">
    <div class="num">Recipe 03</div>
    <h3>The <em>birthday</em> SMS.</h3>
    <p>Anyone with a Square profile birthday this week gets a short, warm SMS with a $15 service credit. Approve the list once; the agent sends across the week.</p>
    <div class="flow">
      <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#f22f46"></span>Twilio</span>
    </div>
    <div class="use"><em>Lifts</em>repeat-visit rate ~6% (early users)</div>
  </div>

  <div class="recipe">
    <div class="num">Recipe 04</div>
    <h3>The <em>inventory</em> watch.</h3>
    <p>When any retail SKU drops below your threshold, the agent emails the supplier with a draft PO, posts in Slack, and waits for your approval before sending.</p>
    <div class="flow">
      <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#4a154b"></span>Slack</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#ea4335"></span>Gmail</span>
    </div>
    <div class="use"><em>Catches</em>stockouts before clients notice</div>
  </div>

  <div class="recipe">
    <div class="num">Recipe 05</div>
    <h3>The <em>weekly close.</em></h3>
    <p>Every Sunday night, the agent compiles bookings, deposits, no-shows, retail sales, and tips by stylist into one Google Sheet for your bookkeeper.</p>
    <div class="flow">
      <span class="tool"><span class="dot" style="background:#000"></span>Square</span>
      <span class="tool"><span class="dot" style="background:#635bff"></span>Stripe</span><span class="arr">→</span>
      <span class="tool"><span class="dot" style="background:#0f9d58"></span>Sheets</span>
    </div>
    <div class="use"><em>Cuts</em>2 hours of Sunday-night close work</div>
  </div>

  <div class="recipe" style="border-style:dashed;border-color:var(--gold)">
    <div class="num" style="color:var(--gold)">+ Custom</div>
    <h3>Build your <em>own.</em></h3>
    <p>Type a sentence in the chat. The agent maps your tools, drafts the recipe, and asks for your approval before running it for the first time.</p>
    <div class="flow"><span class="tool" style="border-color:var(--gold);color:var(--gold)">your tools</span><span class="arr">→</span><span class="tool" style="border-color:var(--gold);color:var(--gold)">your sentence</span></div>
    <div class="use"><em>Time to first run</em>~ 90 seconds</div>
  </div>
</section>

<section class="cta">
  <h3>Pick a trade. <em>Get five recipes.</em> Try the demo in ninety seconds.</h3>
  <p>Free during alpha. Fifty-six connectors. Every action approval-gated. AES-256-GCM at rest.</p>
  <a class="btn-pri">Try the live demo</a>
</section>

<footer>Commerce Claw — businessclaw.agentabrams.com · 30 verticals · 5 recipes each · 56 connectors</footer>
</body></html>