David/Stackless-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update brand assets and enhance pricing page content. Replaced logo with SVG, added new product offerings, and improved navigation links. Updated favicon and touch icons for better branding consistency.

Browse source
This commit is contained in:
SJCoetz 2026-07-05 23:47:49 +02:00
parent 116a184e2b
commit 911428130e
15 changed files with 2955 additions and 530 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apple-touch-icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
brand-mark-full.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 103 KiB

BIN
brand-mark-square.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 83 KiB

12
brand-mark.svg
View file

@ -1,9 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#FFFFFF"/>
<defs>
<linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1DB897"/>
<stop offset="45%" stop-color="#AEDED3"/>
<stop offset="75%" stop-color="#F76857"/>
<stop offset="100%" stop-color="#172E58"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#ringGrad)" stroke-width="4"/>
<g transform="rotate(-22 50 50)">
<rect x="22" y="34" width="44" height="10" rx="5" fill="#AEDED3"/>
<rect x="28" y="46" width="44" height="10" rx="5" fill="#1DB897"/>
<rect x="34" y="58" width="44" height="10" rx="5" fill="#172E58"/>
</g>
<circle cx="76" cy="22" r="5.5" fill="#F17B61"/>
<circle cx="76" cy="22" r="5.5" fill="#F76857"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 765 B

17
chat-widget.js
View file

@ -65,6 +65,7 @@
+ '.cw-typing span:nth-child(3){animation-delay:.3s;}'
+ '@keyframes cw-typing{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}'
+ '.cw-quick{padding:0 16px 12px;background:' + BRAND.paper + ';display:flex;flex-wrap:wrap;gap:6px;}'
+ '.cw-quick.is-dismissed{display:none;}'
+ '.cw-quick button{background:' + BRAND.surface + ';border:1px solid ' + BRAND.border + ';border-radius:999px;padding:7px 12px;font:500 12.5px/1 Inter,system-ui,sans-serif;color:' + BRAND.ink + ';cursor:pointer;transition:background .15s,border-color .15s,color .15s;}'
+ '.cw-quick button:hover{background:' + BRAND.ink + ';color:#fff;border-color:' + BRAND.ink + ';}'
+ '.cw-form{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid ' + BRAND.border + ';background:' + BRAND.surface + ';}'
@ -176,6 +177,9 @@
b.textContent = q;
b.addEventListener('click', function () {
if (inFlight) return;
// Dismiss the recommendation row the moment the user picks one
// — otherwise it sits over the chat for the rest of the session.
quick.classList.add('is-dismissed');
input.value = q;
autoSize();
form.requestSubmit();
@ -184,6 +188,15 @@
});
}
// Hide the "what I can build" recommendation row once the user has
// actually started a conversation. It returns on reset.
function dismissQuick() {
quick.classList.add('is-dismissed');
}
function restoreQuick() {
quick.classList.remove('is-dismissed');
}
function escape(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
@ -300,6 +313,7 @@
localStorage.removeItem(STORE_KEY);
if (s) localStorage.setItem(STORE_KEY, 'sess-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 8));
} catch (_) {}
restoreQuick();
renderHistory();
}
@ -347,6 +361,9 @@
if (!text || inFlight) return;
inFlight = true;
sendBtn.disabled = true;
// First real send — the suggestion row has done its job, remove it so
// it doesn't sit over the conversation for the rest of the session.
dismissQuick();
addMessage('user', text);
var typing = showTyping();
callWebhook(text)

1
contact.html
View file

@ -328,6 +328,7 @@
<a href="index.html#how">How it works</a>
<a href="pricing.html">Pricing</a>
<a href="index.html#why">Why us</a>
<a href="sandbox.html">Try sandbox</a>
<a href="contact.html" class="nav__cta">Start a project</a>
</nav>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">

BIN
favicon-32.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2 KiB

12
favicon.svg
View file

@ -1,9 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#FFFFFF"/>
<defs>
<linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#1DB897"/>
<stop offset="45%" stop-color="#AEDED3"/>
<stop offset="75%" stop-color="#F76857"/>
<stop offset="100%" stop-color="#172E58"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#ringGrad)" stroke-width="4"/>
<g transform="rotate(-22 50 50)">
<rect x="22" y="34" width="44" height="10" rx="5" fill="#AEDED3"/>
<rect x="28" y="46" width="44" height="10" rx="5" fill="#1DB897"/>
<rect x="34" y="58" width="44" height="10" rx="5" fill="#172E58"/>
</g>
<circle cx="76" cy="22" r="5.5" fill="#F17B61"/>
<circle cx="76" cy="22" r="5.5" fill="#F76857"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 765 B

BIN
icon-192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
icon-512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 153 KiB

84
index.html
View file

@ -640,15 +640,7 @@
<header class="header">
<div class="wrap header__row">
<a href="/" class="brand">
<span class="brand__mark">
<!-- Stackless 's' mark — teal layered ribbon with coral dots -->
<svg viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="13" cy="4" r="2.6" fill="#F76857"/>
<circle cx="13" cy="22" r="2.6" fill="#F76857"/>
<path d="M5 9c0-2.8 2.2-5 5-5h1c2.8 0 5 2.2 5 5v0c0 1.4-1.1 2.5-2.5 2.5H7.5C6.1 11.5 5 12.6 5 14v0c0 2.8 2.2 5 5 5h1" stroke="#1DB897" stroke-width="2.6" stroke-linecap="round"/>
<path d="M11 11.5h6c1.4 0 2.5 1.1 2.5 2.5v0c0 1.4-1.1 2.5-2.5 2.5H11" stroke="#1DB897" stroke-width="2.6" stroke-linecap="round" opacity="0.55"/>
</svg>
</span>
<span class="brand__mark"><img src="brand-mark.svg" alt="" width="26" height="26" /></span>
stackless
</a>
<nav class="nav" id="nav">
@ -656,6 +648,7 @@
<a href="#how">How it works</a>
<a href="pricing.html">Pricing</a>
<a href="#why">Why us</a>
<a href="sandbox.html">Try sandbox</a>
<a href="contact.html" class="nav__cta">Start a project</a>
</nav>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">
@ -949,49 +942,47 @@
<div class="wrap">
<div class="section__head">
<span class="section__kicker">Pricing</span>
<h2>Honest tiers. No surprise invoices.</h2>
<p class="section__sub">Project pricing for one-off builds, monthly retainers for ongoing work. All prices in South African Rand, excl. VAT.</p>
<h2>Six products. One clear entry price each.</h2>
<p class="section__sub">Each one is a small, scoped thing you can buy today — and a named retainer that's the natural next step once it's working for you. All prices in South African Rand, excl. VAT.</p>
</div>
<div class="pricing">
<article class="tier">
<span class="tier__name">Project</span>
<div class="tier__price">R18k<small>starting</small></div>
<p class="tier__desc">One-off website build or single integration.</p>
<span class="tier__name">AI Worker</span>
<div class="tier__price">R1 400<small>/ month</small></div>
<p class="tier__desc">Your own automated worker — chat to it, give it tasks, it gets them done.</p>
<ul class="tier__feat">
<li>Fixed quote, fixed deadline</li>
<li>Weekly demos</li>
<li>30 days of post-launch support</li>
<li>You own everything</li>
<li>1 task type, capped volume</li>
<li>Self-serve, no setup fee</li>
<li>Pro tier at R4.5k–R7.5k</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Get a quote</a>
<a class="btn btn--ghost btn--sm" href="pricing.html#products">See AI Worker</a>
</article>
<article class="tier is-featured">
<span class="tier__name">Rent-an-AI-Agent</span>
<div class="tier__price">R9.8k<small>/ month</small></div>
<p class="tier__desc">A dedicated AI agent, refined weekly, cancel anytime.</p>
<span class="tier__name">Workflow Automation</span>
<div class="tier__price">R3 500<small>once-off</small></div>
<p class="tier__desc">One workflow, end-to-end. Care plan at R900/month once you have 2+ live.</p>
<ul class="tier__feat">
<li>Trained on your docs &amp; tone</li>
<li>Inbox, CRM &amp; WhatsApp</li>
<li>Weekly refinement call</li>
<li>Human escalation paths</li>
<li>Lead → CRM, email → quote, etc.</li>
<li>Tested &amp; monitored</li>
<li>Scales to 2+ workflows</li>
</ul>
<a class="btn btn--primary btn--sm" href="pricing.html">See full pricing</a>
<a class="btn btn--primary btn--sm" href="pricing.html#products">See workflows</a>
</article>
<article class="tier">
<span class="tier__name">Studio</span>
<div class="tier__price">R48k<small>/ month</small></div>
<p class="tier__desc">Ongoing builds, agents, and integrations in one retainer.</p>
<span class="tier__name">Websites</span>
<div class="tier__price">R1 500<small>starting</small></div>
<p class="tier__desc">A 1-page template site in a week. Custom builds from R12k, quoted per scope.</p>
<ul class="tier__feat">
<li>Up to 3 active workstreams</li>
<li>Dedicated lead + agent</li>
<li>Priority response, same day</li>
<li>Quarterly roadmap reviews</li>
<li>Copy, design &amp; deploy</li>
<li>Care plan from R650/month</li>
<li>You own the code &amp; domain</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Book a discovery call</a>
<a class="btn btn--ghost btn--sm" href="pricing.html#products">See websites</a>
</article>
</div>
<p style="text-align: center; margin-top: 28px;"><a class="btn btn--accent btn--sm" href="pricing.html#products">See all 6 products &rarr;</a></p>
</div>
</section>
@ -1006,6 +997,7 @@
</div>
<div class="cta__actions">
<a class="btn btn--primary" href="contact.html">Start a project <span class="arrow">→</span></a>
<a class="btn btn--ghost" href="sandbox.html">Try the sandbox</a>
<span class="cta__small">or email hello@stackless.app</span>
</div>
</div>
@ -1019,26 +1011,20 @@
<div class="foot">
<div class="foot__brand">
<a href="/" class="brand">
<span class="brand__mark">
<svg viewBox="0 0 26 26" fill="none" aria-hidden="true">
<circle cx="13" cy="4" r="2.6" fill="#F76857"/>
<circle cx="13" cy="22" r="2.6" fill="#F76857"/>
<path d="M5 9c0-2.8 2.2-5 5-5h1c2.8 0 5 2.2 5 5v0c0 1.4-1.1 2.5-2.5 2.5H7.5C6.1 11.5 5 12.6 5 14v0c0 2.8 2.2 5 5 5h1" stroke="#1DB897" stroke-width="2.6" stroke-linecap="round"/>
<path d="M11 11.5h6c1.4 0 2.5 1.1 2.5 2.5v0c0 1.4-1.1 2.5-2.5 2.5H11" stroke="#1DB897" stroke-width="2.6" stroke-linecap="round" opacity="0.55"/>
</svg>
</span>
<span class="brand__mark"><img src="brand-mark.svg" alt="" width="26" height="26" /></span>
stackless
</a>
<p>The on-call studio for small and medium businesses. Build, automate, integrate — without hiring an in-house team.</p>
</div>
<div>
<h5>Services</h5>
<h5>Products</h5>
<ul>
<li><a href="#services">Websites</a></li>
<li><a href="#services">AI agents</a></li>
<li><a href="pricing.html">Rent-an-AI-Agent</a></li>
<li><a href="#services">Integrations</a></li>
<li><a href="#services">Apps &amp; dashboards</a></li>
<li><a href="pricing.html#products">AI Worker</a></li>
<li><a href="pricing.html#products">Workflow automation</a></li>
<li><a href="pricing.html#products">Social auto-post</a></li>
<li><a href="pricing.html#products">Websites</a></li>
<li><a href="pricing.html#products">Apps</a></li>
<li><a href="pricing.html#products">Dashboards</a></li>
</ul>
</div>
<div>

BIN
mqz0tfl5-ChatGPT-Image-Jun-19_-2026-at-07_27_58-PM.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 998 KiB

824
pricing.html
View file

@ -1,288 +1,186 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Pricing — Stackless</title>
<meta name="description" content="Three transparent plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier. South African pricing in ZAR." />
<meta name="theme-color" content="#1DB897" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Pricing — Stackless</title>
<meta name="description" content="Six products, six clear entry prices. AI workers, workflow automation, social auto-posting, websites, apps and dashboards. South African Rand, excl. VAT." />
<meta name="theme-color" content="#1DB897" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="manifest" href="manifest.json" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="manifest" href="manifest.json" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Stackless" />
<meta property="og:title" content="Pricing — Stackless" />
<meta property="og:description" content="Three plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier." />
<meta property="og:url" content="https://stackless.co.za/pricing.html" />
<meta property="og:image" content="https://stackless.co.za/og-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Stackless — build · automate · integrate" />
<meta property="og:locale" content="en_ZA" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Stackless" />
<meta property="og:title" content="Pricing — Stackless" />
<meta property="og:description" content="Six products, six clear entry prices. AI workers, workflow automation, social auto-posting, websites, apps and dashboards." />
<meta property="og:url" content="https://stackless.co.za/pricing.html" />
<meta property="og:image" content="https://stackless.co.za/og-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Stackless — build · automate · integrate" />
<meta property="og:locale" content="en_ZA" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Pricing — Stackless" />
<meta name="twitter:description" content="Three plans: Build (project), Run (monthly retainer), Scale (custom). Rent-an-AI-Agent add-ons available on every tier." />
<meta name="twitter:image" content="https://stackless.co.za/og-card.png" />
<meta name="twitter:image:alt" content="Stackless — build · automate · integrate" />
<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=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="shared.css" />
<style>
/* ---------- page-specific styles ---------- */
.lede { padding: 80px 0 24px; }
.lede h1 { max-width: 22ch; }
.lede p { margin-top: 18px; font-size: 18px; max-width: 60ch; color: var(--muted); }
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Pricing — Stackless" />
<meta name="twitter:description" content="Six products, six clear entry prices. AI workers, workflow automation, social auto-posting, websites, apps and dashboards." />
<meta name="twitter:image" content="https://stackless.co.za/og-card.png" />
<meta name="twitter:image:alt" content="Stackless — build · automate · integrate" />
<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=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="shared.css" />
<style>
/* ---------- page-specific styles ---------- */
.lede { padding: 80px 0 24px; }
.lede h1 { max-width: 22ch; }
.lede p { margin-top: 18px; font-size: 18px; max-width: 62ch; color: var(--muted); }
.lede__pattern {
margin-top: 22px;
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font: 500 13.5px/1.4 var(--font-body);
color: var(--ink);
}
.lede__pattern strong { color: var(--ink-2); font-weight: 600; }
.switcher {
display: inline-flex;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px;
margin: 36px 0 0;
}
.switcher button {
background: transparent; border: 0;
padding: 9px 16px;
border-radius: 999px;
font: 500 13.5px/1 var(--font-body);
color: var(--muted);
transition: background 0.15s, color 0.15s;
}
.switcher button.is-on {
background: var(--ink-2); color: #fff;
}
/* ---------- product grid (2 columns × 3 rows on desktop) ---------- */
.products {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 56px;
}
.product {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px 30px;
display: flex; flex-direction: column;
position: relative;
transition: border-color 0.15s, transform 0.15s;
}
.product:hover { border-color: rgba(33, 42, 64, 0.22); }
.product__num {
position: absolute; top: 28px; right: 28px;
font: 500 11.5px/1 var(--font-mono);
letter-spacing: 0.1em;
color: var(--muted);
}
.product__kicker {
font: 500 12px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.product__name {
font: 600 24px/1.2 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
margin-bottom: 10px;
max-width: 22ch;
}
.product__tag {
font-size: 14.5px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 22px;
}
.product__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 18px 0;
border-top: 1px solid var(--border);
}
.price {
display: flex; flex-direction: column;
min-width: 0;
}
.price__label {
font: 500 11.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.price__amt {
font: 600 28px/1 var(--font-display);
letter-spacing: -0.03em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.price__amt small {
font: 500 13px/1 var(--font-body);
color: var(--muted);
margin-left: 4px;
letter-spacing: 0;
}
.price__scope {
margin-top: 6px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
}
.product__cta { margin-top: 22px; display: flex; gap: 10px; }
.product__cta .btn { flex: 1; justify-content: center; }
/* ---------- tier card variants (heavier than the index teaser) ---------- */
.tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 16px;
}
.tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px 30px;
display: flex; flex-direction: column;
position: relative;
}
.tier.is-featured {
border-color: var(--ink-2);
background: var(--ink-2);
color: #F4F2EC;
}
.tier__tag {
position: absolute; top: 16px; right: 16px;
font: 500 11px/1 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 9px;
border-radius: 4px;
background: rgba(29, 184, 151, 0.12);
}
.tier.is-featured .tier__tag {
background: rgba(29, 184, 151, 0.18);
color: var(--accent);
}
.tier__name {
font: 500 13px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.tier.is-featured .tier__name { color: var(--accent); }
.tier__price {
margin: 18px 0 6px;
font: 600 46px/1 var(--font-display);
letter-spacing: -0.035em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.tier.is-featured .tier__price { color: #fff; }
.tier__price small {
font: 500 14px/1 var(--font-body);
color: var(--muted);
margin-left: 4px;
letter-spacing: 0;
}
.tier.is-featured .tier__price small { color: rgba(244, 242, 236, 0.6); }
.tier__billed {
font: 500 12px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.tier.is-featured .tier__billed { color: rgba(244, 242, 236, 0.55); }
.tier__desc {
font-size: 14.5px; color: var(--muted);
min-height: 48px;
line-height: 1.5;
}
.tier.is-featured .tier__desc { color: rgba(244, 242, 236, 0.7); }
.tier__feat {
list-style: none;
margin: 22px 0 26px;
border-top: 1px solid var(--border);
padding-top: 18px;
}
.tier.is-featured .tier__feat { border-top-color: rgba(244, 242, 236, 0.15); }
.tier__feat li {
font-size: 14px;
padding: 8px 0;
display: flex; gap: 10px;
color: var(--ink);
}
.tier.is-featured .tier__feat li { color: rgba(244, 242, 236, 0.92); }
.tier__feat li svg {
flex-shrink: 0;
width: 16px; height: 16px;
color: var(--accent);
margin-top: 3px;
}
.tier__feat li.muted { color: var(--muted); }
.tier__feat li.muted svg { color: rgba(110, 115, 135, 0.5); }
.tier.is-featured .tier__feat li.muted { color: rgba(244, 242, 236, 0.4); }
.tier.is-featured .tier__feat li.muted svg { color: rgba(244, 242, 236, 0.3); }
.tier .btn { justify-content: center; margin-top: auto; }
/* ---------- pattern block ---------- */
.pattern {
margin-top: 110px;
padding: 48px 56px;
background: var(--ink-2);
color: #F4F2EC;
border-radius: var(--r-lg);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: center;
}
.pattern__title {
font: 600 28px/1.2 var(--font-display);
letter-spacing: -0.02em;
}
.pattern__body p {
font-size: 15.5px;
line-height: 1.6;
color: rgba(244, 242, 236, 0.78);
}
.pattern__body p + p { margin-top: 14px; }
/* ---------- add-ons ---------- */
.addons {
margin-top: 110px;
padding: 56px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.addons__head { margin-bottom: 36px; }
.addons__head h2 {
font: 600 30px/1.15 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
}
.addons__head p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.addons__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.addon {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 22px;
}
.addon h4 {
font: 600 16px/1.3 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink-2);
margin-bottom: 6px;
}
.addon__price {
font: 500 13px/1 var(--font-mono);
color: var(--accent);
letter-spacing: 0.02em;
margin-bottom: 10px;
}
.addon p { font-size: 14px; color: var(--muted); line-height: 1.5; }
/* ---------- FAQ ---------- */
.faq { margin-top: 110px; }
.faq__list { margin-top: 36px; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq__q {
width: 100%;
display: flex; justify-content: space-between; align-items: center;
background: transparent; border: 0;
text-align: left;
font: 500 17px/1.4 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink-2);
padding: 0;
}
.faq__q .ic { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; transition: transform 0.2s; }
.faq__item.is-open .faq__q .ic { transform: rotate(45deg); }
.faq__a { display: none; margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.faq__item.is-open .faq__a { display: block; }
/* ---------- FAQ ---------- */
.faq { margin-top: 110px; }
.faq__list {
margin-top: 36px;
border-top: 1px solid var(--border);
}
.faq__item {
border-bottom: 1px solid var(--border);
padding: 22px 0;
}
.faq__q {
width: 100%;
display: flex; justify-content: space-between; align-items: center;
background: transparent; border: 0;
text-align: left;
font: 500 17px/1.4 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink-2);
padding: 0;
}
.faq__q .ic {
width: 22px; height: 22px;
color: var(--accent);
flex-shrink: 0;
transition: transform 0.2s;
}
.faq__item.is-open .faq__q .ic { transform: rotate(45deg); }
.faq__a {
display: none;
margin-top: 14px;
font-size: 15px;
line-height: 1.6;
color: var(--muted);
max-width: 70ch;
}
.faq__item.is-open .faq__a { display: block; }
/* ---------- compare table ---------- */
.compare { margin-top: 110px; }
.compare__wrap {
margin-top: 32px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--surface);
overflow-x: auto;
}
table.compare__tbl {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
min-width: 720px;
}
.compare__tbl th, .compare__tbl td {
padding: 16px 22px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.compare__tbl thead th {
background: var(--bg);
font: 500 12.5px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.compare__tbl thead th.is-col {
color: var(--ink-2);
font: 600 14.5px/1 var(--font-display);
letter-spacing: -0.01em;
text-transform: none;
}
.compare__tbl tbody tr:last-child td { border-bottom: 0; }
.compare__tbl td:first-child { color: var(--ink); font-weight: 500; }
.compare__tbl td svg {
display: inline-block; vertical-align: middle;
width: 18px; height: 18px;
color: var(--accent);
}
.compare__tbl td.no svg { color: rgba(110, 115, 135, 0.4); }
.compare__tbl td.no { color: var(--muted); }
@media (max-width: 960px) {
.tiers, .addons__grid { grid-template-columns: 1fr; }
.addons { padding: 32px; }
}
</style>
@media (max-width: 960px) {
.products { grid-template-columns: 1fr; }
.pattern { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
}
</style>
</head>
<body>
@ -295,8 +193,9 @@
<nav class="nav" id="nav">
<a href="index.html#services">Services</a>
<a href="index.html#how">How it works</a>
<a href="pricing.html">Pricing</a>
<a href="pricing.html" class="is-current">Pricing</a>
<a href="index.html#why">Why us</a>
<a href="sandbox.html">Try sandbox</a>
<a href="contact.html" class="nav__cta">Start a project</a>
</nav>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">
@ -309,170 +208,172 @@
<div class="wrap">
<div class="section__head" style="margin: 0; text-align: left;">
<span class="section__kicker">Pricing</span>
<h1>Three ways to work with us.</h1>
<p>One-off projects for a single deliverable, a monthly retainer for an AI agent that lives in your business, or a studio engagement for ongoing builds. Prices are in South African Rand, exclusive of VAT, and exclude third-party software licences (we'll flag those up front).</p>
<div class="switcher" role="tablist">
<button type="button" class="is-on" data-period="monthly">Monthly</button>
<button type="button" data-period="annual">Annual · save 12%</button>
<h1>Six products. Six clear entry prices.</h1>
<p>Each one is a small, scoped thing you can buy today — and a named retainer that's the natural next step once it's working for you. Prices in South African Rand, excl. VAT.</p>
<div class="lede__pattern">
<strong>The pattern:</strong> cheap entry price to get the &ldquo;yes,&rdquo; retainer once it's earned.
</div>
<div style="margin-top: 28px;">
<a class="btn btn--accent btn--sm" href="sandbox.html">Try the 60-second sandbox →</a>
<span style="margin-left: 14px; font-size: 13.5px; color: var(--muted);">See what we'd build for you, with live previews.</span>
</div>
</div>
</div>
</section>
<section class="section" style="padding-top: 24px;">
<section class="section" style="padding-top: 8px;">
<div class="wrap">
<div class="tiers">
<article class="tier">
<span class="tier__name">Project</span>
<div class="tier__price" data-monthly="R18 000" data-annual="R18 000">R18 000<small>starting</small></div>
<div class="tier__billed">one-off · fixed quote</div>
<p class="tier__desc">A single website, integration, or app build. Best when you know exactly what you need and just want it shipped.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Discovery call &amp; written scope</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly demo every Friday</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>30 days post-launch support</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>All code, content &amp; accounts handed over</li>
<li class="muted"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>Dedicated account lead</li>
<li class="muted"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>Monthly refinement call</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Get a quote</a>
<div class="products">
<!-- 1. AI Worker -->
<article class="product">
<span class="product__num">01</span>
<div class="product__kicker">AI Worker</div>
<h2 class="product__name">Your own automated worker.</h2>
<p class="product__tag">Chat to it, give it tasks, it gets them done. A digital employee, not a chatbot.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Starter</span>
<span class="price__amt">R1 400<small>/ month</small></span>
<span class="price__scope">1 task type (e.g. "answers WhatsApp enquiries" or "drafts quote responses"), capped monthly volume, self-serve.</span>
</div>
<div class="price">
<span class="price__label">Pro</span>
<span class="price__amt">R4 500 – R7 500<small>/ month</small></span>
<span class="price__scope">Multiple task types, weekly tuning call, human escalation handling.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=ai-worker">Start a worker</a>
</div>
</article>
<article class="tier is-featured">
<span class="tier__tag">Most popular</span>
<span class="tier__name">Rent-an-AI-Agent</span>
<div class="tier__price" data-monthly="R9 800" data-annual="R8 624">R9 800<small>/ month</small></div>
<div class="tier__billed" data-monthly-billed="billed monthly · cancel any time" data-annual-billed="billed annually · R103 488 / year">billed monthly · cancel any time</div>
<p class="tier__desc">A dedicated AI agent trained on your business, refined weekly. Lives in your inbox, CRM and WhatsApp. Best for teams losing hours every week to routine work.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>One dedicated agent, named &amp; trained on you</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Email, CRM &amp; WhatsApp integrations</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly 30-min refinement call</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Human escalation paths &amp; guardrails</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Monthly usage &amp; impact report</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Pause, swap or cancel any month</li>
</ul>
<a class="btn btn--accent btn--sm" href="contact.html">Start an agent</a>
<!-- 2. Workflow Automation -->
<article class="product">
<span class="product__num">02</span>
<div class="product__kicker">Workflow Automation</div>
<h2 class="product__name">Connect your apps. Automate the busywork.</h2>
<p class="product__tag">Lead to CRM, email to quote, invoice to ledger. We build the wire, monitor it, and fix it when it breaks.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Single workflow</span>
<span class="price__amt">R3 500<small>once-off</small></span>
<span class="price__scope">One automation end-to-end, tested and live.</span>
</div>
<div class="price">
<span class="price__label">Care plan</span>
<span class="price__amt">R900<small>/ month</small></span>
<span class="price__scope">Monitoring + fixes, once you've got 2+ workflows live.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=workflow">Map a workflow</a>
</div>
</article>
<article class="tier">
<span class="tier__name">Studio</span>
<div class="tier__price" data-monthly="R48 000" data-annual="R42 240">R48 000<small>/ month</small></div>
<div class="tier__billed" data-monthly-billed="billed monthly · 90-day minimum" data-annual-billed="billed annually · R506 880 / year · 90-day minimum">billed monthly · 90-day minimum</div>
<p class="tier__desc">Ongoing builds, integrations, and agents — all in one retainer. Best for businesses that ship software or product changes every month.</p>
<ul class="tier__feat">
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 3 active workstreams</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Dedicated lead + on-call engineer</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Same-day response, 4-hour SLA on P1</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 2 deployed AI agents</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Quarterly roadmap review</li>
<li><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Discounted project add-ons</li>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Book a discovery call</a>
<!-- 3. Social Auto-Post -->
<article class="product">
<span class="product__num">03</span>
<div class="product__kicker">Social Auto-Post</div>
<h2 class="product__name">Facebook &amp; Instagram on autopilot.</h2>
<p class="product__tag">Posts written and scheduled automatically — so the page never goes quiet while you run the business.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Starter</span>
<span class="price__amt">R1 800<small>/ month</small></span>
<span class="price__scope">1 platform, ~12 AI-written &amp; scheduled posts.</span>
</div>
<div class="price">
<span class="price__label">Pro</span>
<span class="price__amt">R2 900<small>/ month</small></span>
<span class="price__scope">Both platforms, ~20 posts + basic monthly report.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=social">Start auto-posting</a>
</div>
</article>
<!-- 4. Websites -->
<article class="product">
<span class="product__num">04</span>
<div class="product__kicker">Websites</div>
<h2 class="product__name">A site that ships in a week, not a quarter.</h2>
<p class="product__tag">A 1-page template site when you need a credible URL fast. A custom build when you need a real product surface.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Starter Site</span>
<span class="price__amt">R1 500<small>once-off</small></span>
<span class="price__scope">1-page template landing site, copy + design + deploy.</span>
</div>
<div class="price">
<span class="price__label">Care plan</span>
<span class="price__amt">R650<small>/ month</small></span>
<span class="price__scope">Hosting, backups, small edits. Cancel any month.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--ghost btn--sm" href="contact.html?topic=website">Get a starter site</a>
<a class="btn btn--ghost btn--sm" href="contact.html?topic=custom-site">Custom build quote</a>
</div>
<p class="price__scope" style="margin-top: 14px;">Custom builds start at <strong style="color: var(--ink-2);">R12 000</strong> — quoted per scope.</p>
</article>
<!-- 5. Apps -->
<article class="product">
<span class="product__num">05</span>
<div class="product__kicker">Apps</div>
<h2 class="product__name">Internal tools, dashboards, portals.</h2>
<p class="product__tag">Adapted from our existing app components — order systems, ops dashboards, agent tooling. Faster and cheaper than a from-scratch agency.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Starter</span>
<span class="price__amt">from R8 500</span>
<span class="price__scope">First build, quoted to scope. Component-based, not from scratch.</span>
</div>
<div class="price">
<span class="price__label">Support retainer</span>
<span class="price__amt">from R1 200<small>/ month</small></span>
<span class="price__scope">Bugs, small features, hosting. Pause any month.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=app">Scope an app</a>
</div>
</article>
<!-- 6. Dashboards -->
<article class="product">
<span class="product__num">06</span>
<div class="product__kicker">Dashboards</div>
<h2 class="product__name">Numbers in one place, refreshed automatically.</h2>
<p class="product__tag">A live view of the metrics that actually run the business — pulling from Xero, Shopify, HubSpot or whatever stack you already use.</p>
<div class="product__row">
<div class="price">
<span class="price__label">Starter</span>
<span class="price__amt">from R4 500</span>
<span class="price__scope">First dashboard, scoped to the questions you need answered.</span>
</div>
<div class="price">
<span class="price__label">Retainer</span>
<span class="price__amt">from R800<small>/ month</small></span>
<span class="price__scope">Data refresh, source changes, small new views.</span>
</div>
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=dashboard">Scope a dashboard</a>
</div>
</article>
</div>
<!-- add-ons -->
<div class="addons">
<div class="addons__head">
<h2>Common add-ons.</h2>
<p>Drop these onto any plan. We bill at the same hourly rate every time — no project premium.</p>
</div>
<div class="addons__grid">
<div class="addon">
<h4>Voice agent</h4>
<div class="addon__price">from R2 400 / month</div>
<p>AI that picks up the phone, routes calls, books appointments, and only hands to a human when the rule says so.</p>
</div>
<div class="addon">
<h4>WhatsApp Business setup</h4>
<div class="addon__price">R4 800 once-off</div>
<p>Verified WhatsApp Business account, template library, agent integration, and 14-day on-boarding.</p>
</div>
<div class="addon">
<h4>Reporting dashboard</h4>
<div class="addon__price">from R14 000</div>
<p>A live dashboard pulling from Xero, Shopify, HubSpot or whatever stack you use. Email-digest on Mondays.</p>
</div>
<div class="addon">
<h4>Knowledge base agent</h4>
<div class="addon__price">from R3 200 / month</div>
<p>Trained on your docs, SOPs and past tickets. Answers customer questions and surfaces the right human when it's stuck.</p>
</div>
<div class="addon">
<h4>Migration sprint</h4>
<div class="addon__price">from R28 000</div>
<p>Two-week sprint to move you off a platform you've outgrown — Webflow → Next.js, old CRM → HubSpot, etc.</p>
</div>
<div class="addon">
<h4>Security review</h4>
<div class="addon__price">R9 600 once-off</div>
<p>Independent review of your stack, agent prompts, and access controls. Written report with prioritised fixes.</p>
</div>
</div>
</div>
<!-- compare table -->
<div class="compare">
<div class="section__head" style="text-align: left; margin: 0 0 8px;">
<span class="section__kicker">Compare</span>
<h2 style="font-size: 30px;">What's in each plan.</h2>
</div>
<div class="compare__wrap">
<table class="compare__tbl">
<thead>
<tr>
<th></th>
<th class="is-col">Project</th>
<th class="is-col">Rent-an-AI-Agent</th>
<th class="is-col">Studio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Web &amp; app builds</td>
<td>One-off</td>
<td>—</td>
<td>Up to 3 active</td>
</tr>
<tr>
<td>Deployed AI agents</td>
<td>—</td>
<td>1</td>
<td>Up to 2</td>
</tr>
<tr>
<td>Workflow integrations</td>
<td>Up to 2</td>
<td>Up to 4</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Weekly refinement call</td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
</tr>
<tr>
<td>Dedicated lead</td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td class="no"><svg viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></td>
<td><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></td>
</tr>
<tr>
<td>Response SLA</td>
<td>Next business day</td>
<td>Same business day</td>
<td>4-hour P1, same-day P2</td>
</tr>
<tr>
<td>Cancellation</td>
<td>End of project</td>
<td>Any month</td>
<td>90-day minimum, then any month</td>
</tr>
</tbody>
</table>
<!-- the pattern (dark band) -->
<div class="pattern">
<div class="pattern__title">One price to start, one retainer to keep it going.</div>
<div class="pattern__body">
<p>Every product above is priced so the first step is a yes you can make in a single conversation — not a six-figure commitment. The retainer that follows is named up front, so there are no surprises once the thing is in production.</p>
<p>We can credibly hit these entry numbers because we're not building from scratch. Our existing apps, dashboards and agent tooling are already battle-tested on other client work, so each new engagement is adaptation, not invention.</p>
</div>
</div>
@ -485,56 +386,56 @@
<div class="faq__list">
<div class="faq__item is-open">
<button class="faq__q" type="button">
<span>Who actually does the work — humans or AI?</span>
<span>Why are the entry prices lower than a typical agency?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Two named humans do the building, the architecture, and the reviews. AI handles the repeatable parts inside your workflows — drafting emails, qualifying leads, routing tickets — under rules we set up together and you approve. If the AI ever makes a call you're uncomfortable with, a human reviews it before it ships.</p>
<p>Because we already have working apps, dashboards and agent tooling in production. When we take on a new client, we're adapting components we've shipped before — not starting from a blank file. The savings on build time get passed back as a lower entry price.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What does a typical agent cost in third-party fees?</span>
<span>What's the difference between Starter and Pro on the AI Worker?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Most Rent-an-AI-Agent clients spend an extra R1 500–R4 000 a month on LLM API usage and a chat/SMS provider. We pass those costs through at cost with no markup, and we cap usage so a surprise bill is impossible. Larger clients on the Studio plan can negotiate committed-use discounts.</p>
<p>Starter is one task type, capped volume, self-serve — pick from a menu of common jobs (WhatsApp replies, quote drafts, lead qualification) and we ship it. Pro is multiple task types, a weekly tuning call with us, and human escalation handling — for when the agent is part of how your business actually runs.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>Do I really own everything you build?</span>
<span>What does a "custom" website or app quote cover?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Yes. Code lives in your GitHub from day one. Content lives in your CMS. Agent prompts live in a workspace we share with you and you keep. Hosting and domain accounts are yours. If you fire us tomorrow, the only thing you lose is our weekly demo.</p>
<p>A discovery call, a written scope, weekly demos, and 30 days of post-launch support. You own the code, the content, the accounts, and the prompts from day one. We hand over everything at the end — no lock-in.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What happens after the 30 days of post-launch support?</span>
<span>Can I cancel the retainer any time?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Your build is yours to run. Anything broken that was our fault, we fix free. Anything new you want built, we send a fixed quote. If you'd rather have us on call, the Rent-an-AI-Agent and Studio retainers both cover ongoing support, refinement and small new builds.</p>
<p>Yes. Every monthly product (AI Worker, Social Auto-Post, the Website care plan, App support, Dashboard retainer) is billed monthly and you can cancel at the end of any month. Care plans for live workflows run month-to-month after the first 2 workflows are in.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>How long until I see results?</span>
<span>Do you work outside South Africa?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>Project builds ship in 10–14 working days. The first AI agent is in production within a week of kick-off, then refined over the next 4 weeks. Studio engagements usually have something live in week 2 and a clear roadmap by week 4.</p>
<p>Yes — UK, EU and the rest of Africa are common. Pricing switches to GBP / EUR / USD at the same ballpark converted, and we adjust SLAs to your timezone. Most client calls run 09:00–11:00 SAST, which is a friendly hour for London and Lagos.</p>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What if my business is outside South Africa?</span>
<span>What if my business is bigger or smaller than the typical client?</span>
<svg class="ic" viewBox="0 0 22 22" fill="none"><path d="M11 4v14M4 11h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<div class="faq__a">
<p>We work with clients across the UK, EU and the rest of Africa. Pricing switches to GBP/EUR/USD at the same ballpark converted, and we adjust SLAs to your timezone. Most client calls run on 09:00–11:00 SAST, which is a friendly hour for London and Lagos.</p>
<p>The prices above are entry points, not ceilings. If you need 5 workflows instead of 1, 3 social platforms instead of 2, or 4 deployed agents, we'll quote a package that makes sense. And if you're a single-person operation and only need the R1 500 starter site, that's a perfectly good fit too.</p>
</div>
</div>
</div>
@ -553,13 +454,14 @@
<p>The on-call studio for small and medium businesses. Build, automate, integrate — without hiring an in-house team.</p>
</div>
<div>
<h5>Services</h5>
<h5>Products</h5>
<ul>
<li><a href="index.html#services">Websites</a></li>
<li><a href="index.html#services">AI agents</a></li>
<li><a href="pricing.html">Rent-an-AI-Agent</a></li>
<li><a href="index.html#services">Integrations</a></li>
<li><a href="index.html#services">Apps &amp; dashboards</a></li>
<li><a href="pricing.html#products">AI Worker</a></li>
<li><a href="pricing.html#products">Workflow automation</a></li>
<li><a href="pricing.html#products">Social auto-post</a></li>
<li><a href="pricing.html#products">Websites</a></li>
<li><a href="pricing.html#products">Apps</a></li>
<li><a href="pricing.html#products">Dashboards</a></li>
</ul>
</div>
<div>
@ -590,38 +492,6 @@
<script src="header.js"></script>
<script>
// Billing-period switcher
(function () {
var btns = document.querySelectorAll('.switcher button');
var prices = document.querySelectorAll('.tier__price[data-monthly]');
var billeds = document.querySelectorAll('[data-monthly-billed]');
if (!btns.length) return;
function apply(period) {
btns.forEach(function (b) { b.classList.toggle('is-on', b.dataset.period === period); });
prices.forEach(function (el) {
var v = el.dataset[period];
if (!v) return;
var small = el.querySelector('small');
var smallHTML = small ? small.outerHTML : '';
// Strip the "/ month" suffix for annual values (which already encode the discount)
if (period === 'annual' && small) {
el.innerHTML = v + '<small>once-off / month equiv.</small>';
} else if (small) {
el.innerHTML = v + smallHTML;
} else {
el.textContent = v;
}
});
billeds.forEach(function (el) {
var v = el.getAttribute('data-' + period + '-billed');
if (v) el.textContent = v;
});
}
btns.forEach(function (b) {
b.addEventListener('click', function () { apply(b.dataset.period); });
});
})();
// FAQ accordion
(function () {
document.querySelectorAll('.faq__q').forEach(function (btn) {

2516
sandbox.html Normal file
View file

File diff suppressed because it is too large Load diff

19
sandbox.html.artifact.json Normal file
View file

@ -0,0 +1,19 @@
{
"version": 1,
"kind": "html",
"title": "sandbox.html",
"entry": "sandbox.html",
"renderer": "html",
"status": "complete",
"exports": [
"html",
"pdf",
"zip"
],
"createdAt": "2026-07-04T20:31:52.242Z",
"updatedAt": "2026-07-04T20:31:52.242Z",
"metadata": {
"inferred": true,
"reconciled": true
}
}