Stackless-Website/index.html

1119 lines
40 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>Stackless — Build, automate, integrate. We handle it for you.</title>
<meta name="description" content="Stackless builds, automates, and integrates the software your business runs on — websites, AI agents, workflow automation, and internal apps. Outsourced, end-to-end." />
<meta name="theme-color" content="#1DB897" />
<!-- Favicons (browser tabs + iOS home screen) -->
<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 (WhatsApp, iMessage, Telegram, Discord, Slack, Facebook, LinkedIn) -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Stackless" />
<meta property="og:title" content="Stackless — Build, automate, integrate. We handle it for you." />
<meta property="og:description" content="Websites, AI agents, workflow automation, and internal apps — built and run for you. Outsourced software, end-to-end." />
<meta property="og:url" content="https://stackless.co.za/" />
<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="Stackless — Build, automate, integrate. We handle it for you." />
<meta name="twitter:description" content="Websites, AI agents, workflow automation, and internal apps — built and run for you." />
<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" />
<style>
/* ===========================================================
Tokens — Stackless brand (paper / ink / teal / coral)
=========================================================== */
:root {
--bg: #F4F2EC;
--surface: #FFFFFF;
--ink: #212A40;
--ink-2: #1C2439;
--muted: #6E7387;
--border: #E5E2D8;
--accent: #1DB897;
--accent-2: #F76857;
--font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--shadow-pop: 0 14px 40px -18px rgba(28, 36, 57, 0.28);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font: 16px/1.55 var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--ink-2); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* ---------- header ---------- */
.header {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(244, 242, 236, 0.78);
border-bottom: 1px solid var(--border);
}
.header__row {
display: flex; align-items: center; justify-content: space-between;
height: 68px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
font: 600 19px/1 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
}
.brand__mark {
width: 26px; height: 26px;
display: grid; place-items: center;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
padding: 8px 14px; border-radius: 999px;
font-size: 14.5px; font-weight: 500;
color: var(--ink);
transition: background 0.15s, color 0.15s;
}
.nav a:hover { background: rgba(33, 42, 64, 0.06); }
.nav__cta {
margin-left: 12px;
background: var(--accent-2); color: #fff !important;
padding: 9px 16px;
}
.nav__cta:hover { background: #e25645 !important; }
.menu-btn { display: none; background: transparent; border: 0; padding: 8px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font: 500 15px/1 var(--font-body);
letter-spacing: -0.005em;
border: 1px solid transparent;
transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-2); color: #fff; }
.btn--primary:hover { background: #e25645; }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }
/* ---------- hero ---------- */
.hero { padding: 88px 0 60px; position: relative; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
font: 500 12.5px/1 var(--font-mono);
letter-spacing: 0.04em;
color: var(--ink);
}
.hero__eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(29, 184, 151, 0.18);
}
.hero h1 {
margin-top: 22px;
font: 700 clamp(40px, 5.6vw, 76px)/1.04 var(--font-display);
letter-spacing: -0.035em;
color: var(--ink-2);
max-width: 14ch;
}
.hero h1 em {
font-style: normal;
color: var(--accent);
}
.hero__sub {
margin-top: 22px;
font-size: 19px;
line-height: 1.55;
color: var(--muted);
max-width: 56ch;
}
.hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta {
margin-top: 28px;
display: flex; gap: 26px; flex-wrap: wrap;
font: 500 13px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { color: var(--accent); }
.hero__panel {
margin-top: 64px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.panel__bar {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.panel__dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d6cc; }
.panel__dot.is-on { background: var(--accent); }
.panel__url {
margin-left: 14px;
font: 500 12.5px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
.panel__body {
display: grid;
grid-template-columns: 1.2fr 1fr;
min-height: 360px;
}
.panel__col {
padding: 30px 32px;
}
.panel__col + .panel__col { border-left: 1px solid var(--border); }
.panel__col h3 {
font: 600 14px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 16px;
}
.panel__row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
border-top: 1px solid var(--border);
font-size: 14.5px;
}
.panel__row:first-of-type { border-top: 0; }
.panel__row .pill {
font: 500 11.5px/1 var(--font-mono);
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.04em;
background: rgba(29, 184, 151, 0.12);
color: #117a64;
}
.panel__row .pill.is-2 { background: rgba(247, 104, 87, 0.13); color: #c84434; }
.panel__row .pill.is-3 { background: rgba(33, 42, 64, 0.08); color: var(--ink); }
.panel__stat {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.panel__stat .num {
font: 600 30px/1 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.panel__stat .lbl {
margin-top: 6px;
font: 500 12.5px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
/* ---------- trust strip ---------- */
.trust {
padding: 36px 0 16px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 80px;
}
.trust__lbl {
font: 500 12px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
text-align: center;
margin-bottom: 22px;
}
.trust__row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
align-items: center;
}
.trust__logo {
text-align: center;
font: 600 16px/1 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink);
opacity: 0.55;
}
.trust__logo small {
display: block;
font: 500 10px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.1em;
margin-top: 4px;
text-transform: uppercase;
opacity: 0.7;
}
/* ---------- services ---------- */
.section { padding: 110px 0 30px; }
.section__head { max-width: 720px; margin-bottom: 50px; }
.section__kicker {
display: inline-flex; align-items: center; gap: 8px;
font: 500 12.5px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 18px;
}
.section__kicker::before {
content: ""; display: block; width: 22px; height: 1px; background: var(--accent);
}
.section h2 {
font: 600 clamp(30px, 3.8vw, 46px)/1.1 var(--font-display);
letter-spacing: -0.025em;
color: var(--ink-2);
}
.section__sub {
margin-top: 14px;
font-size: 17px;
color: var(--muted);
max-width: 60ch;
}
.services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.service {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 28px 26px;
display: flex; flex-direction: column;
transition: border-color 0.18s, transform 0.18s;
}
.service:hover {
border-color: rgba(29, 184, 151, 0.5);
transform: translateY(-2px);
}
.service__num {
font: 500 12px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.06em;
}
.service__icon {
width: 40px; height: 40px;
margin: 18px 0 20px;
border-radius: 10px;
background: rgba(29, 184, 151, 0.10);
color: var(--accent);
display: grid; place-items: center;
}
.service__icon svg { width: 22px; height: 22px; }
.service h3 {
font: 600 19px/1.25 var(--font-display);
letter-spacing: -0.015em;
color: var(--ink-2);
margin-bottom: 8px;
}
.service p {
font-size: 14.5px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 18px;
}
.service__list {
list-style: none;
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: 16px;
}
.service__list li {
font: 500 13px/1.6 var(--font-mono);
color: var(--ink);
padding: 4px 0;
letter-spacing: -0.005em;
}
.service__list li::before {
content: "→"; color: var(--accent); margin-right: 8px;
}
/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 26px;
position: relative;
}
.step__num {
font: 600 48px/1 var(--font-display);
letter-spacing: -0.04em;
color: var(--accent);
opacity: 0.85;
}
.step h3 {
margin-top: 14px;
font: 600 19px/1.25 var(--font-display);
letter-spacing: -0.015em;
color: var(--ink-2);
}
.step p {
margin-top: 8px;
font-size: 14.5px;
color: var(--muted);
line-height: 1.55;
}
.step__time {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 18px;
font: 500 12px/1 var(--font-mono);
color: var(--muted);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
}
/* ---------- why us ---------- */
.why {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.why__col h2 { max-width: 16ch; }
.why__col p { margin-top: 16px; max-width: 46ch; }
.why__list { display: grid; gap: 14px; }
.why__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.why__num {
font: 600 18px/1 var(--font-mono);
color: var(--accent-2);
letter-spacing: -0.02em;
}
.why__item h4 {
font: 600 16px/1.3 var(--font-display);
color: var(--ink-2);
letter-spacing: -0.01em;
}
.why__item p {
margin-top: 4px;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* ---------- pricing teaser ---------- */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 30px;
display: flex; flex-direction: column;
}
.tier.is-featured {
border-color: var(--ink-2);
background: var(--ink-2);
color: #F4F2EC;
}
.tier__name {
font: 500 12.5px/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 4px;
font: 600 42px/1 var(--font-display);
letter-spacing: -0.03em;
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__desc {
font-size: 14px; color: var(--muted);
min-height: 42px;
}
.tier.is-featured .tier__desc { color: rgba(244, 242, 236, 0.7); }
.tier__feat {
list-style: none;
margin: 22px 0 24px;
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: 7px 0;
display: flex; gap: 10px;
color: var(--ink);
}
.tier.is-featured .tier__feat li { color: rgba(244, 242, 236, 0.92); }
.tier__feat li::before {
content: ""; display: block;
width: 16px; height: 16px; flex-shrink: 0;
margin-top: 2px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%231DB897' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.tier.is-featured .tier__feat li::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%231DB897' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.tier .btn { justify-content: center; }
/* ---------- cta banner ---------- */
.cta {
margin: 110px 0 100px;
background: var(--ink-2);
border-radius: var(--r-lg);
padding: 60px 56px;
color: #F4F2EC;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: end;
position: relative;
overflow: hidden;
}
.cta::after {
content: ""; position: absolute; right: -40px; bottom: -40px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle at center, rgba(29, 184, 151, 0.4), transparent 70%);
}
.cta h2 {
font: 600 clamp(28px, 3.4vw, 42px)/1.1 var(--font-display);
letter-spacing: -0.025em;
color: #fff;
max-width: 18ch;
}
.cta p {
margin-top: 14px;
font-size: 16px;
color: rgba(244, 242, 236, 0.7);
max-width: 50ch;
}
.cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; position: relative; z-index: 1; }
.cta__actions .btn--primary { background: var(--accent-2); }
.cta__small {
font: 500 12px/1.4 var(--font-mono);
color: rgba(244, 242, 236, 0.55);
letter-spacing: 0.02em;
}
/* ---------- footer ---------- */
footer {
border-top: 1px solid var(--border);
padding: 56px 0 36px;
}
.foot {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 40px;
margin-bottom: 40px;
}
.foot__brand p {
margin-top: 12px;
font-size: 14px;
color: var(--muted);
max-width: 30ch;
}
.foot h5 {
font: 500 12px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-2);
margin-bottom: 14px;
}
.foot ul { list-style: none; }
.foot li { padding: 4px 0; font-size: 14px; color: var(--muted); }
.foot li a:hover { color: var(--ink-2); }
.foot__legal {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border);
font: 500 12.5px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
/* ---------- responsive ---------- */
@media (max-width: 960px) {
.hero__panel .panel__body { grid-template-columns: 1fr; }
.panel__col + .panel__col { border-left: 0; border-top: 1px solid var(--border); }
.services, .how, .pricing { grid-template-columns: 1fr 1fr; }
.why { grid-template-columns: 1fr; gap: 36px; }
.cta { grid-template-columns: 1fr; padding: 40px; }
.cta__actions { align-items: flex-start; }
.foot { grid-template-columns: 1fr 1fr; }
.trust__row { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media (max-width: 680px) {
.nav { display: none; }
.menu-btn { display: inline-flex; }
.nav.is-open {
display: flex;
position: absolute; top: 68px; left: 0; right: 0;
flex-direction: column;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px;
gap: 4px;
}
.nav.is-open a { padding: 12px 14px; }
.nav.is-open .nav__cta { margin-left: 0; margin-top: 8px; text-align: center; }
.hero { padding: 56px 0 36px; }
.hero__panel { margin-top: 36px; }
.panel__col { padding: 22px; }
.services, .how, .pricing { grid-template-columns: 1fr; }
.section { padding: 72px 0 16px; }
.foot { grid-template-columns: 1fr; gap: 28px; }
.foot__legal { flex-direction: column; gap: 8px; align-items: flex-start; }
.trust { margin-top: 48px; }
}
</style>
</head>
<body>
<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>
stackless
</a>
<nav class="nav" id="nav">
<a href="#services">Services</a>
<a href="#how">How it works</a>
<a href="pricing.html">Pricing</a>
<a href="#why">Why us</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>
<!-- =========================================================
HERO
========================================================= -->
<section class="hero">
<div class="wrap">
<span class="hero__eyebrow"><span class="dot"></span>Now booking Q3 builds</span>
<h1>Build less.<br/>Ship <em>more</em>.</h1>
<p class="hero__sub">
Stackless is the on-call studio for small and medium businesses. We build your website, install AI agents that do the busywork, and wire up the tools you already pay for — so your team can stop wrestling with software and get back to the work that actually moves the business.
</p>
<div class="hero__actions">
<a class="btn btn--primary" href="contact.html">Start a project <span class="arrow">→</span></a>
<a class="btn btn--ghost" href="#services">See what we do</a>
</div>
<div class="hero__meta">
<span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Most builds ship in 10–14 working days
</span>
<span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
Fixed quote within one business day
</span>
<span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1l1.8 4 4.2.5-3.2 2.9 1 4.1L7 10.4 3.2 12.5l1-4.1L1 5.5l4.2-.5L7 1z" fill="currentColor"/></svg>
Cape Town · Johannesburg studio
</span>
</div>
<!-- product-style preview panel -->
<div class="hero__panel" aria-hidden="true">
<div class="panel__bar">
<span class="panel__dot"></span>
<span class="panel__dot is-on"></span>
<span class="panel__dot"></span>
<span class="panel__url">stackless.app / c / meridian-coffee</span>
</div>
<div class="panel__body">
<div class="panel__col">
<h3>Active workflows</h3>
<div class="panel__row">
<span>Lead intake → CRM</span>
<span class="pill">RUNNING</span>
</div>
<div class="panel__row">
<span>Quote follow-up email</span>
<span class="pill is-2">REVIEW</span>
</div>
<div class="panel__row">
<span>Inventory sync (Shopify → Xero)</span>
<span class="pill">RUNNING</span>
</div>
<div class="panel__row">
<span>WhatsApp support agent</span>
<span class="pill is-3">DRAFT</span>
</div>
<div class="panel__row">
<span>Monthly client report</span>
<span class="pill">RUNNING</span>
</div>
</div>
<div class="panel__col">
<h3>This month</h3>
<div class="panel__stat">
<div>
<div class="num">142</div>
<div class="lbl">Hours saved</div>
</div>
<div>
<div class="num">38</div>
<div class="lbl">Leads handled by agent</div>
</div>
<div>
<div class="num">R48.2k</div>
<div class="lbl">Tools consolidated</div>
</div>
<div>
<div class="num">98.4%</div>
<div class="lbl">Uptime</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =========================================================
TRUST STRIP
========================================================= -->
<section class="trust">
<div class="wrap">
<div class="trust__lbl">Trusted by operators at</div>
<div class="trust__row">
<div class="trust__logo">meridian<small>coffee co</small></div>
<div class="trust__logo">kaelo<small>logistics</small></div>
<div class="trust__logo">ovira<small>wellness</small></div>
<div class="trust__logo">stanfield<small>&amp; co</small></div>
<div class="trust__logo">nautilus<small>imports</small></div>
<div class="trust__logo">deux<small>studio</small></div>
</div>
</div>
</section>
<!-- =========================================================
SERVICES
========================================================= -->
<section class="section" id="services">
<div class="wrap">
<div class="section__head">
<span class="section__kicker">What we ship</span>
<h2>Six things we do, end to end.</h2>
<p class="section__sub">Pick one, or layer them. Every engagement is a fixed quote with weekly demos — no retainers you can't get out of, no hidden scope creep.</p>
</div>
<div class="services">
<article class="service">
<span class="service__num">/ 01</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M3 8h18" stroke="currentColor" stroke-width="1.7"/><circle cx="6.5" cy="6" r="0.7" fill="currentColor"/><circle cx="9" cy="6" r="0.7" fill="currentColor"/><path d="M8 18l-2 3M16 18l2 3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</div>
<h3>Website builds &amp; upgrades</h3>
<p>Marketing sites, ecommerce, internal portals — designed, built and hosted. You get a real CMS, not a black box.</p>
<ul class="service__list">
<li>Brand &amp; UX</li>
<li>Webflow · Next.js · Shopify</li>
<li>Hosting + analytics included</li>
</ul>
</article>
<article class="service">
<span class="service__num">/ 02</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><rect x="4" y="7" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><circle cx="9" cy="12.5" r="1.4" stroke="currentColor" stroke-width="1.7"/><circle cx="15" cy="12.5" r="1.4" stroke="currentColor" stroke-width="1.7"/><path d="M12 4v3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</div>
<h3>AI agents, installed</h3>
<p>Trained on your docs, wired into your inbox and CRM. They draft, route, escalate and reply — under the rules you set.</p>
<ul class="service__list">
<li>Sales &amp; support agents</li>
<li>Voice + chat</li>
<li>Human escalation paths</li>
</ul>
</article>
<article class="service">
<span class="service__num">/ 03</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><path d="M4 7l8-3 8 3-8 3-8-3z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M4 12l8 3 8-3M4 17l8 3 8-3" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
</div>
<h3>Rent-an-AI-Agent</h3>
<p>A dedicated agent on a monthly retainer. Trained once, refined forever. Pause or swap any month.</p>
<ul class="service__list">
<li>From R9 800 / month</li>
<li>Weekly refinement calls</li>
<li>Cancel any time</li>
</ul>
</article>
<article class="service">
<span class="service__num">/ 04</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
</div>
<h3>Outreach &amp; lead-gen automation</h3>
<p>Cold and warm pipelines that don't sound like a bot. Personalisation tokens pulled from live data, not scraped fluff.</p>
<ul class="service__list">
<li>Email + LinkedIn + WhatsApp</li>
<li>Reply detection &amp; routing</li>
<li>CRM hand-off</li>
</ul>
</article>
<article class="service">
<span class="service__num">/ 05</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><circle cx="6" cy="6" r="2.5" stroke="currentColor" stroke-width="1.7"/><circle cx="18" cy="6" r="2.5" stroke="currentColor" stroke-width="1.7"/><circle cx="12" cy="18" r="2.5" stroke="currentColor" stroke-width="1.7"/><path d="M8 7l3 9M16 7l-3 9M8 6h8" stroke="currentColor" stroke-width="1.7"/></svg>
</div>
<h3>Workflow integrations</h3>
<p>Xero ↔ Shopify, HubSpot ↔ Slack, WhatsApp ↔ your inbox. The plumbing between the tools you already pay for, made reliable.</p>
<ul class="service__list">
<li>n8n · Make · Zapier</li>
<li>Custom APIs when needed</li>
<li>Error alerts + retries</li>
</ul>
</article>
<article class="service">
<span class="service__num">/ 06</span>
<div class="service__icon">
<svg viewBox="0 0 24 24" fill="none"><rect x="6" y="3" width="12" height="18" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M10 18h4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</div>
<h3>Apps, dashboards &amp; internal tools</h3>
<p>Custom web apps your team actually opens on Monday morning. Field-ops tools, ops dashboards, customer portals.</p>
<ul class="service__list">
<li>React + Postgres</li>
<li>Role-based access</li>
<li>Mobile-responsive by default</li>
</ul>
</article>
</div>
</div>
</section>
<!-- =========================================================
HOW IT WORKS
========================================================= -->
<section class="section" id="how">
<div class="wrap">
<div class="section__head">
<span class="section__kicker">How it works</span>
<h2>Three steps. No mystery.</h2>
<p class="section__sub">We start with a 30-minute call, send a fixed quote the next day, and demo something real every Friday until it's shipped.</p>
</div>
<div class="how">
<article class="step">
<div class="step__num">01</div>
<h3>Tell us what's broken</h3>
<p>A short call. We map what's slowing you down — a missing site, a lead pipeline, an inbox that eats your mornings — and what would actually move the needle.</p>
<span class="step__time">~ 30 min call</span>
</article>
<article class="step">
<div class="step__num">02</div>
<h3>Get a fixed quote</h3>
<p>You receive a one-page quote by the next business day: scope, deliverables, timeline, price. No retainer, no surprise hours, no fine print.</p>
<span class="step__time">~ 1 day turnaround</span>
</article>
<article class="step">
<div class="step__num">03</div>
<h3>Watch it ship weekly</h3>
<p>Every Friday you get a Loom showing what's live that week. You sign off in Slack, not in a 90-minute status meeting.</p>
<span class="step__time">10–14 day builds</span>
</article>
</div>
</div>
</section>
<!-- =========================================================
WHY US
========================================================= -->
<section class="section" id="why">
<div class="wrap why">
<div class="why__col">
<span class="section__kicker">Why Stackless</span>
<h2>The studio you call when your last agency ghosted you.</h2>
<p class="section__sub">We've been the people who fix what other people built. Most of our work comes from teams who tried once, got burned, and want a partner who actually answers the phone.</p>
</div>
<div class="why__list">
<div class="why__item">
<span class="why__num">01</span>
<div>
<h4>You always know who's building</h4>
<p>Two named humans, plus the agent they supervise. No black-box dev shop, no junior team learning on your dime.</p>
</div>
</div>
<div class="why__item">
<span class="why__num">02</span>
<div>
<h4>Fixed quotes, real demos</h4>
<p>We send a price and a deadline, then show you something live every Friday. If we miss it, the next build's on us.</p>
</div>
</div>
<div class="why__item">
<span class="why__num">03</span>
<div>
<h4>You own everything we build</h4>
<p>Code, content, accounts, agent prompts — all yours. We hand over the keys on day one. Walk away whenever you want.</p>
</div>
</div>
<div class="why__item">
<span class="why__num">04</span>
<div>
<h4>Built for small teams, not enterprises</h4>
<p>We work with 5 to 200-person businesses. No procurement theatre, no 200-slide decks — just a call, a quote, and a build.</p>
</div>
</div>
</div>
</div>
</section>
<!-- =========================================================
PRICING TEASER
========================================================= -->
<section class="section" id="pricing">
<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>
</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>
<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>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Get a quote</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>
<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>
</ul>
<a class="btn btn--primary btn--sm" href="pricing.html">See full pricing</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>
<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>
</ul>
<a class="btn btn--ghost btn--sm" href="contact.html">Book a discovery call</a>
</article>
</div>
</div>
</section>
<!-- =========================================================
CTA BANNER
========================================================= -->
<section class="wrap">
<div class="cta">
<div>
<h2>You've got a business to run. Let us take the software off your plate.</h2>
<p>Tell us what's eating your week. We'll come back with a fixed quote and a real plan — usually within one business day.</p>
</div>
<div class="cta__actions">
<a class="btn btn--primary" href="contact.html">Start a project <span class="arrow">→</span></a>
<span class="cta__small">or email hello@stackless.app</span>
</div>
</div>
</section>
<!-- =========================================================
FOOTER
========================================================= -->
<footer>
<div class="wrap">
<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>
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>
<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>
</ul>
</div>
<div>
<h5>Studio</h5>
<ul>
<li><a href="#how">How we work</a></li>
<li><a href="#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>
// Mobile menu toggle
(function () {
var btn = document.getElementById('menuBtn');
var nav = document.getElementById('nav');
if (btn && nav) {
btn.addEventListener('click', function () {
nav.classList.toggle('is-open');
});
nav.addEventListener('click', function (e) {
if (e.target.tagName === 'A') nav.classList.remove('is-open');
});
}
// Animate stat numbers when panel scrolls into view
var stats = document.querySelectorAll('.panel__stat .num');
if ('IntersectionObserver' in window && stats.length) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var el = entry.target;
if (el.dataset.done) return;
el.dataset.done = '1';
var raw = el.textContent.trim();
var isPercent = raw.endsWith('%');
var isRand = raw.startsWith('R');
var suffix = isPercent ? '%' : (isRand ? 'k' : '');
var num = parseFloat(raw.replace(/[^\d.]/g, '')) || 0;
var prefix = isRand ? 'R' : '';
var duration = 900;
var start = null;
function step(t) {
if (!start) start = t;
var p = Math.min(1, (t - start) / duration);
var v = num * (0.6 + 0.4 * (1 - Math.pow(1 - p, 3)));
var formatted = num >= 100 ? Math.round(v) : v.toFixed(1);
el.textContent = prefix + formatted + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = raw;
}
requestAnimationFrame(step);
});
}, { threshold: 0.4 });
stats.forEach(function (el) { io.observe(el); });
}
})();
</script>
</body>
</html>