Stackless-Website/pricing.html

507 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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; }
/* ---------- 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; }
/* ---------- 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; }
/* ---------- 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; }
@media (max-width: 960px) {
.products { grid-template-columns: 1fr; }
.pattern { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
}
</style>
</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>
<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">
<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>
</div>
</div>
</div>
</section>
<section class="section" style="padding-top: 8px;">
<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>
</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>
</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>
</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>
<!-- 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>
<!-- 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>
<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>
</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>
<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>
</div>
</div>
<div class="faq__item">
<button class="faq__q" type="button">
<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>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>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>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>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>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 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>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>
</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>
<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>
</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>
</body>
</html>