Stackless-Website/pricing.html

508 lines
22 KiB
HTML
Raw Permalink Normal View History

2026-06-18 10:22:31 +00:00
<!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="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" />
<!-- 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="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; }
2026-06-18 10:22:31 +00:00
/* ---------- 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; }
2026-06-18 10:22:31 +00:00
/* ---------- 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; }
2026-06-18 10:22:31 +00:00
/* ---------- 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; }
2026-06-18 10:22:31 +00:00
@media (max-width: 960px) {
.products { grid-template-columns: 1fr; }
.pattern { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
}
</style>
2026-06-18 10:22:31 +00:00
</head>
<body>
<header class="header">
<div class="wrap header__row">
<a href="index.html" class="brand">
<span class="brand__mark"><img src="brand-mark.svg" alt="" width="26" height="26" /></span>
stackless
</a>
<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" class="is-current">Pricing</a>
2026-06-18 10:22:31 +00:00
<a href="index.html#why">Why us</a>
<a href="sandbox.html">Try sandbox</a>
2026-06-18 10:22:31 +00:00
<a href="contact.html" class="nav__cta">Start a project</a>
</nav>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="#212A40" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
</header>
<section class="section lede">
<div class="wrap">
<div class="section__head" style="margin: 0; text-align: left;">
<span class="section__kicker">Pricing</span>
<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>
2026-06-18 10:22:31 +00:00
</div>
</div>
</div>
</section>
<section class="section" style="padding-top: 8px;">
2026-06-18 10:22:31 +00:00
<div class="wrap">
<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>
2026-06-18 10:22:31 +00:00
</article>
<!-- 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>
2026-06-18 10:22:31 +00:00
</article>
<!-- 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>
2026-06-18 10:22:31 +00:00
</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>
2026-06-18 10:22:31 +00:00
</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>
2026-06-18 10:22:31 +00:00
</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>
2026-06-18 10:22:31 +00:00
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=app">Scope an app</a>
2026-06-18 10:22:31 +00:00
</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>
2026-06-18 10:22:31 +00:00
</div>
<div class="product__cta">
<a class="btn btn--accent btn--sm" href="contact.html?topic=dashboard">Scope a dashboard</a>
2026-06-18 10:22:31 +00:00
</div>
</article>
2026-06-18 10:22:31 +00:00
</div>
<!-- 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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<!-- FAQ -->
<div class="faq">
<div class="section__head" style="text-align: left; margin: 0;">
<span class="section__kicker">Frequently asked</span>
<h2 style="font-size: 30px;">The questions we hear most.</h2>
</div>
<div class="faq__list">
<div class="faq__item is-open">
<button class="faq__q" type="button">
<span>Why are the entry prices lower than a typical agency?</span>
2026-06-18 10:22:31 +00:00
<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>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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What's the difference between Starter and Pro on the AI Worker?</span>
2026-06-18 10:22:31 +00:00
<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>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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What does a "custom" website or app quote cover?</span>
2026-06-18 10:22:31 +00:00
<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>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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>Can I cancel the retainer any time?</span>
2026-06-18 10:22:31 +00:00
<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. 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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>Do you work outside South Africa?</span>
2026-06-18 10:22:31 +00:00
<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 — 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>
2026-06-18 10:22:31 +00:00
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<span>What if my business is bigger or smaller than the typical client?</span>
2026-06-18 10:22:31 +00:00
<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>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>
2026-06-18 10:22:31 +00:00
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap">
<div class="foot">
<div class="foot__brand">
<a href="index.html" class="brand">
<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>Products</h5>
2026-06-18 10:22:31 +00:00
<ul>
<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>
2026-06-18 10:22:31 +00:00
</ul>
</div>
<div>
<h5>Studio</h5>
<ul>
<li><a href="index.html#how">How we work</a></li>
<li><a href="index.html#why">Why us</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Start a project</a></li>
</ul>
</div>
<div>
<h5>Reach us</h5>
<ul>
<li><a href="mailto:hello@stackless.app">hello@stackless.app</a></li>
<li><a href="tel:+27210000000">+27 21 000 0000</a></li>
<li>Cape Town · Johannesburg</li>
<li>Mon–Fri, 08:00–17:00 SAST</li>
</ul>
</div>
</div>
<div class="foot__legal">
<span>© 2026 Stackless (Pty) Ltd · Reg. 2024/184256/07</span>
<span>Made on the African continent.</span>
</div>
</div>
</footer>
<script src="header.js"></script>
<script>
// FAQ accordion
(function () {
document.querySelectorAll('.faq__q').forEach(function (btn) {
btn.addEventListener('click', function () {
btn.parentElement.classList.toggle('is-open');
});
});
})();
</script>
<script src="chat-widget.js" defer></script>
2026-06-18 10:22:31 +00:00
</body>
</html>