← back to Ventura Claw
/how-it-works page: 3-step API-orchestration explainer + alternatives comparison + JSON-LD HowTo schema; sitemap entry + nginx proxy + teaser footer link
6b0bf817acf285bdd57360c267465da4b82f76e6 · 2026-05-06 19:38:15 -0700 · Steve
Files touched
M server/public/coming-soon.htmlA server/public/how-it-works.htmlM server/server.js
Diff
commit 6b0bf817acf285bdd57360c267465da4b82f76e6
Author: Steve <steve@designerwallcoverings.com>
Date: Wed May 6 19:38:15 2026 -0700
/how-it-works page: 3-step API-orchestration explainer + alternatives comparison + JSON-LD HowTo schema; sitemap entry + nginx proxy + teaser footer link
---
server/public/coming-soon.html | 1 +
server/public/how-it-works.html | 329 ++++++++++++++++++++++++++++++++++++++++
server/server.js | 3 +-
3 files changed, 332 insertions(+), 1 deletion(-)
diff --git a/server/public/coming-soon.html b/server/public/coming-soon.html
index dd4099c..3ab5e60 100644
--- a/server/public/coming-soon.html
+++ b/server/public/coming-soon.html
@@ -362,6 +362,7 @@
<span>© 2026 VenturaClaw · Steve Abrams</span>
<span>
<a href="/services">Services</a> ·
+ <a href="/how-it-works">How it works</a> ·
<a href="/legal-notice">Legal</a> ·
<a href="/privacy">Privacy</a> ·
<a href="/terms">Terms</a> ·
diff --git a/server/public/how-it-works.html b/server/public/how-it-works.html
new file mode 100644
index 0000000..ad3ba44
--- /dev/null
+++ b/server/public/how-it-works.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>How it works — VenturaClaw</title>
+<meta name="description" content="Type one sentence. The AI picks the right partner API. You confirm. We run it. Total time: under a minute. No portals, no paper, no UPL exposure." />
+<meta property="og:type" content="website" />
+<meta property="og:title" content="How VenturaClaw works — one sentence, sixty seconds" />
+<meta property="og:description" content="Three steps from plain English request to running API call. Real partners (Stripe, Cloudflare, Embroker, QuickBooks). No portals." />
+<meta property="og:url" content="https://venturaclaw.com/how-it-works" />
+<meta property="og:site_name" content="VenturaClaw" />
+<link rel="canonical" href="https://venturaclaw.com/how-it-works" />
+<style>
+ :root {
+ --bg: #0e0e10; --bg-2: #15151a; --bg-3: #1c1c22;
+ --rule: #2a2a32; --rule-2: #3a3a45;
+ --ink: #f4f1ea; --ink-soft: #d8d2c5; --ink-mute: #8b857a; --ink-faint: #5d574c;
+ --gold: #d4a04a; --gold-glow: #e6b96a; --gold-soft: rgba(212,160,74,0.12);
+ --good: #6ec081; --bad: #c66c4d;
+ --serif: "Cormorant Garamond", Georgia, serif;
+ --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
+ --sans: -apple-system, "SF Pro Text", system-ui, sans-serif;
+ --max: 1100px;
+ }
+ *, *::before, *::after { box-sizing: border-box; }
+ html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.65; }
+ ::selection { background: var(--gold); color: var(--bg); }
+ a { color: var(--gold); text-decoration: none; }
+ a:hover { color: var(--gold-glow); }
+
+ .topbar {
+ padding: 22px 36px; display: flex; justify-content: space-between; align-items: center;
+ border-bottom: 1px solid var(--rule);
+ background: rgba(14,14,16,0.85); backdrop-filter: blur(8px);
+ position: sticky; top: 0; z-index: 50;
+ }
+ .brand { display: flex; gap: 12px; align-items: baseline; }
+ .brand .logo-dot {
+ width: 12px; height: 12px; border-radius: 50%; align-self: center;
+ background: radial-gradient(circle at 30% 30%, var(--gold-glow), var(--gold) 60%, #7a5a26);
+ box-shadow: 0 0 14px rgba(212, 160, 74, 0.45);
+ }
+ .brand .name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
+ .brand .name em { color: var(--gold); font-style: italic; }
+ .brand .crumb { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
+ .brand .crumb::before { content: "/ "; color: var(--ink-faint); }
+ nav { display: flex; gap: 22px; align-items: center; }
+ nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
+ nav a:hover { color: var(--gold); }
+
+ main { max-width: var(--max); margin: 0 auto; padding: 56px 36px 80px; }
+
+ .eyebrow {
+ font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
+ color: var(--ink-mute); margin-bottom: 18px;
+ display: flex; align-items: center; gap: 10px;
+ }
+ .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
+ h1 {
+ font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.012em;
+ font-size: clamp(40px, 5.5vw, 76px); margin: 0 0 22px;
+ }
+ h1 em { color: var(--gold); font-style: italic; }
+ .lede {
+ font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 740px; margin: 0 0 64px;
+ }
+ .lede em { color: var(--gold); font-style: italic; }
+
+ /* Three big steps, vertical */
+ .step {
+ display: grid; grid-template-columns: 110px 1fr; gap: 28px;
+ background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--gold);
+ padding: 32px 36px; margin-bottom: 22px;
+ align-items: start;
+ }
+ @media (max-width: 720px) {
+ .step { grid-template-columns: 1fr; gap: 12px; padding: 24px 22px; }
+ }
+ .step-num {
+ font-family: var(--serif); font-size: 64px; font-style: italic; font-weight: 500;
+ color: var(--gold); line-height: 1; letter-spacing: -0.02em;
+ }
+ .step-title {
+ font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.005em;
+ margin: 0 0 10px; color: var(--ink);
+ }
+ .step-title em { color: var(--gold); font-style: italic; }
+ .step-body { font-size: 15px; color: var(--ink-soft); margin: 0 0 16px; }
+ .step-body em { color: var(--gold); font-style: italic; }
+ .step-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+ .step-tag {
+ font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
+ background: var(--bg-3); border: 1px solid var(--rule);
+ padding: 4px 10px; border-radius: 999px; color: var(--ink-soft);
+ }
+ .step-tag.gold { color: var(--gold); border-color: var(--gold); }
+ .step-tag.bad { color: var(--bad); border-color: var(--bad); }
+ .step-example {
+ margin-top: 16px; padding: 14px 18px;
+ background: var(--bg-3); border: 1px solid var(--rule);
+ font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 1.55;
+ }
+ .step-example .lbl { color: var(--gold); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; display: block; }
+
+ /* Comparison panel */
+ .compare {
+ margin: 70px 0 40px; padding: 26px 32px;
+ background: linear-gradient(135deg, rgba(212,160,74,0.06) 0%, rgba(212,160,74,0.01) 100%);
+ border: 1px solid var(--rule); border-left: 3px solid var(--gold);
+ }
+ .compare h3 {
+ font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.005em;
+ margin: 0 0 18px; color: var(--ink);
+ }
+ .compare h3 em { color: var(--gold); font-style: italic; }
+ .compare-row {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
+ }
+ @media (max-width: 720px) { .compare-row { grid-template-columns: 1fr; } }
+ .compare-col { padding: 18px 22px; background: var(--bg-2); border: 1px solid var(--rule); }
+ .compare-col h4 {
+ font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
+ color: var(--ink-mute); margin: 0 0 12px;
+ }
+ .compare-col.us h4 { color: var(--gold); }
+ .compare-col ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
+ .compare-col.us ul { color: var(--ink); }
+
+ /* CTA strip */
+ .cta-strip {
+ margin: 50px 0 0; padding: 24px 28px;
+ background: linear-gradient(90deg, var(--gold-soft), transparent);
+ border: 1px solid var(--gold); border-left: 3px solid var(--gold);
+ display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
+ }
+ .cta-strip .text { flex: 1; min-width: 240px; color: var(--ink); font-size: 15px; }
+ .cta-strip .text em { color: var(--gold); font-style: italic; }
+ .cta-strip .btns { display: flex; gap: 12px; flex-wrap: wrap; }
+ .cta-strip a {
+ font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
+ padding: 12px 22px; border: 1px solid var(--gold); border-radius: 3px;
+ color: var(--gold); transition: all 200ms;
+ }
+ .cta-strip a:hover { background: var(--gold); color: var(--bg); }
+ .cta-strip a.go { background: var(--gold); color: var(--bg); }
+ .cta-strip a.go:hover { background: var(--gold-glow); }
+
+ /* Footer */
+ footer {
+ max-width: var(--max); margin: 80px auto 0;
+ padding: 30px 36px 60px; border-top: 1px solid var(--rule);
+ font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
+ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
+ }
+ footer a { color: var(--ink-mute); }
+ footer a:hover { color: var(--gold); }
+
+ /* JSON-LD HowTo for Google */
+</style>
+<script type="application/ld+json">
+{
+ "@context": "https://schema.org",
+ "@type": "HowTo",
+ "name": "How VenturaClaw sets up a small-business stack via API",
+ "description": "Three-step process: ask in plain English, AI picks the right partner API, user confirms and the API runs. Total time: under a minute for most actions.",
+ "totalTime": "PT60S",
+ "step": [
+ { "@type": "HowToStep", "name": "Ask in plain English", "text": "User types what they want — e.g. 'set up payments for my new freelance LLC'. The chat parses the intent." },
+ { "@type": "HowToStep", "name": "AI picks the right partner API", "text": "VenturaClaw routes to Stripe Connect, QuickBooks, Cloudflare, Embroker, Track1099, or another vetted partner — never a government portal." },
+ { "@type": "HowToStep", "name": "Confirm and run", "text": "Approval queue shows the exact API call before it fires. User hits yes; the API runs in 5–60 seconds. Confirmation lands in user's email; everything is audit-logged." }
+ ]
+}
+</script>
+</head>
+<body>
+
+<header class="topbar">
+ <div class="brand">
+ <span class="logo-dot"></span>
+ <span class="name">Ventura<em>Claw</em></span>
+ <span class="crumb">How it works</span>
+ </div>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/services">Services</a>
+ <a href="/legal-notice">Legal</a>
+ <a href="/login">Sign in</a>
+ </nav>
+</header>
+
+<main>
+ <div class="eyebrow"><span class="dot"></span><span>Three steps · Sixty seconds · Real APIs</span></div>
+ <h1>One sentence in.<br>A working business <em>artifact</em> out.</h1>
+ <p class="lede">
+ Most automation tools sell you <em>the canvas</em> — a maze of boxes and arrows you have to assemble before anything happens. VenturaClaw sells <em>the result</em>. Type what you want. The AI picks the API that delivers it. You confirm. The API runs. Here's how, end to end.
+ </p>
+
+ <div class="step">
+ <div class="step-num">01</div>
+ <div>
+ <div class="step-title">You ask <em>in plain English</em>.</div>
+ <p class="step-body">No forms. No checkboxes. No "build a workflow." A chat box, the language you'd use with a smart friend, and a sentence that describes what you want to exist on the other side.</p>
+ <div class="step-example">
+ <span class="lbl">Sample inputs</span>
+ "Set up Stripe payments for my new LLC."<br>
+ "Register acmebiz.com and point info@ at my Gmail."<br>
+ "Quote general liability for a one-person consulting business."<br>
+ "File 1099-NECs for the two contractors I paid this year."
+ </div>
+ <div class="step-tags" style="margin-top:14px">
+ <span class="step-tag gold">No canvas</span>
+ <span class="step-tag gold">No decision trees</span>
+ <span class="step-tag gold">Local model</span>
+ <span class="step-tag bad">Inputs never leave your laptop</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="step">
+ <div class="step-num">02</div>
+ <div>
+ <div class="step-title">We pick the <em>right partner API</em>.</div>
+ <p class="step-body">A heuristic classifier routes your sentence to the API that actually delivers the outcome — and it's a <em>real partner API</em> in every case. No portal-scraping. No state-by-state form automation. No UPL exposure. The regulated bits are owned by the partner; we orchestrate.</p>
+ <div class="step-tags">
+ <span class="step-tag">Stripe Connect</span>
+ <span class="step-tag">QuickBooks</span>
+ <span class="step-tag">Xero</span>
+ <span class="step-tag">Cloudflare</span>
+ <span class="step-tag">Namecheap</span>
+ <span class="step-tag">Porkbun</span>
+ <span class="step-tag">Mercury</span>
+ <span class="step-tag">BREX</span>
+ <span class="step-tag">Embroker</span>
+ <span class="step-tag">Coverwallet</span>
+ <span class="step-tag">Track1099</span>
+ <span class="step-tag">Gusto</span>
+ <span class="step-tag">iPostal1</span>
+ </div>
+ <div class="step-example">
+ <span class="lbl">Routing examples</span>
+ "Stripe payments" → Stripe Connect API<br>
+ "Register a domain" → Porkbun /domain/registerDomain → Cloudflare /zones<br>
+ "Quote liability" → Embroker quote API → broker handoff<br>
+ "Generate operating agreement" → template engine, no external API at all
+ </div>
+ </div>
+ </div>
+
+ <div class="step">
+ <div class="step-num">03</div>
+ <div>
+ <div class="step-title">You confirm. <em>We run it.</em></div>
+ <p class="step-body">An approval queue shows the exact API call about to fire — payload, partner, cost — before anything goes out. You click yes. The API runs in 5 to 60 seconds. The confirmation lands in your inbox. The audit trail is permanent and exportable.</p>
+ <div class="step-tags">
+ <span class="step-tag gold">Approval queue (free tier)</span>
+ <span class="step-tag gold">AES-256-GCM encrypted credentials</span>
+ <span class="step-tag gold">Per-event audit log</span>
+ <span class="step-tag bad">No silent writes</span>
+ </div>
+ <div class="step-example">
+ <span class="lbl">What you receive</span>
+ Email confirmation with API response IDs<br>
+ Audit row in /admin/audit (filterable, exportable)<br>
+ Plain-English daily report ("at 2:14pm you registered acmebiz.com")<br>
+ Direct dashboard handoff to the partner (Stripe / Cloudflare / etc.)
+ </div>
+ </div>
+ </div>
+
+ <section class="compare">
+ <h3>Why <em>not</em> the alternatives.</h3>
+ <div class="compare-row">
+ <div class="compare-col">
+ <h4>The "Document preparer" (LegalZoom / Bizee / ZenBusiness)</h4>
+ <ul>
+ <li>Files government forms <em>on your behalf</em>. UPL/LDA exposure varies by state.</li>
+ <li>$300–649+ for a "starter bundle" with stacked upsells.</li>
+ <li>Days to weeks of turnaround.</li>
+ <li>Can't help with payments, accounting, insurance, or domains.</li>
+ </ul>
+ </div>
+ <div class="compare-col us">
+ <h4>VenturaClaw</h4>
+ <ul>
+ <li>Doesn't file government forms. Points you at free IRS / FinCEN paths.</li>
+ <li>$0–$99 flat orchestration fees, no upsells.</li>
+ <li>5–60 seconds per service.</li>
+ <li>Stripe + accounting + insurance + domain + payroll, in one chat.</li>
+ </ul>
+ </div>
+ </div>
+ <div class="compare-row" style="margin-top:14px">
+ <div class="compare-col">
+ <h4>The "Workflow tool" (Zapier / Make / n8n)</h4>
+ <ul>
+ <li>Sells the canvas. You build the workflow first, then run it.</li>
+ <li>Audit logs paywalled to enterprise tier (Zapier) or $38–€667/mo.</li>
+ <li>Stores your tokens in their cloud.</li>
+ </ul>
+ </div>
+ <div class="compare-col us">
+ <h4>VenturaClaw</h4>
+ <ul>
+ <li>Outcome-first. Type the result, skip the canvas.</li>
+ <li>Audit log + approval queue free for everyone.</li>
+ <li>Bring-your-own-token; we never store credentials we didn't have to.</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <div class="cta-strip">
+ <div class="text">Browse the <em>30-service catalog</em>, try the live "Type a domain → see the plan" demo, or read the bold <em>not-a-law-firm</em> notice.</div>
+ <div class="btns">
+ <a class="go" href="/services">Open services →</a>
+ <a href="/legal-notice">Legal notice</a>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <span>© 2026 VenturaClaw · Steve Abrams · <a href="mailto:info@venturaclaw.com">info@venturaclaw.com</a></span>
+ <span>
+ <a href="/services">Services</a> · <a href="/legal-notice">Legal</a> · <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a>
+ </span>
+</footer>
+</body>
+</html>
diff --git a/server/server.js b/server/server.js
index ae31935..9f181c5 100644
--- a/server/server.js
+++ b/server/server.js
@@ -491,7 +491,7 @@ app.get("/robots.txt", (req, res) => {
);
});
app.get("/sitemap.xml", (req, res) => {
- const staticUrls = ["/", "/login", "/services", "/legal-notice", "/connectors", "/about", "/faq", "/docs", "/pricing", "/changelog", "/privacy", "/terms"];
+ const staticUrls = ["/", "/login", "/services", "/legal-notice", "/how-it-works", "/connectors", "/about", "/faq", "/docs", "/pricing", "/changelog", "/privacy", "/terms"];
const connectorUrls = CONNECTORS.map(c => `/connectors/${c.id}`);
const all = [...staticUrls, ...connectorUrls];
const xml = `<?xml version="1.0" encoding="UTF-8"?>
@@ -511,6 +511,7 @@ app.get("/", (req, res) => {
app.get("/login", (req, res) => res.sendFile(path.join(PUB, "login.html")));
app.get("/services", (req, res) => res.sendFile(path.join(PUB, "services.html")));
app.get("/legal-notice", (req, res) => res.sendFile(path.join(PUB, "legal-notice.html")));
+app.get("/how-it-works", (req, res) => res.sendFile(path.join(PUB, "how-it-works.html")));
app.get("/chat", requireAuthPage, (req, res) => res.sendFile(path.join(PUB, "chat.html")));
app.get("/connections", requireAuthPage, (req, res) => res.sendFile(path.join(PUB, "connections.html")));
app.get("/connections/import", requireAuthPage, (req, res) => res.sendFile(path.join(PUB, "connections-import.html")));
← 5a1709c /services hero: tighter measurable hook — '47-second domain
·
back to Ventura Claw
·
/pricing v2: dual-product split (chat orchestrator free + se f80fef5 →