Skip to content

Instantly share code, notes, and snippets.

@jeremykoerber

jeremykoerber/coming-soon.html

Created March 15, 2026 03:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jeremykoerber/2821520e91de2da41ec64151317eb40a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jeremykoerber/2821520e91de2da41ec64151317eb40a to your computer and use it in GitHub Desktop.
Download ZIP
clawdre.ai coming soon page
Raw
coming-soon.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clawdre.ai — Your AI Department</title>
<meta name="description" content="Deploy a fully functional AI engineering team in minutes. Open source, self-hosted, privacy-first.">
<link rel="icon" type="image/png" href="https://static.wixstatic.com/media/31b8cb_b9648339254841388fa3288ef1bbfe11~mv2.png">
<!-- HTML Meta Tags -->
<title>Clawdre.ai — Your AI Department</title>
<meta name="description" content="Deploy a fully functional AI team in minutes. Open source, self-hosted, privacy-first.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.clawdre.ai/">
<meta property="og:type" content="website">
<meta property="og:title" content="Clawdre.ai — Your AI Department">
<meta property="og:description" content="Deploy a fully functional AI team in minutes. Open source, self-hosted, privacy-first.">
<meta property="og:image" content="https://static.wixstatic.com/media/31b8cb_f900272b5a674f6da1215a8a7e9ec367~mv2.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="clawdre.ai">
<meta property="twitter:url" content="https://www.clawdre.ai/">
<meta name="twitter:title" content="Clawdre.ai — Your AI Department">
<meta name="twitter:description" content="Deploy a fully functional AI team in minutes. Open source, self-hosted, privacy-first.">
<meta name="twitter:image" content="https://static.wixstatic.com/media/31b8cb_f900272b5a674f6da1215a8a7e9ec367~mv2.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f1117;
--bg-card: #181b24;
--bg-card-hover: #1e2230;
--text: #e8e9ed;
--text-muted: #8b8fa3;
--accent: #e85d4a;
--accent-glow: rgba(232, 93, 74, 0.15);
--border: #2a2d3a;
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* --- NAV --- */
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background: rgba(15, 17, 23, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
nav .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
}
.logo {
font-family: var(--mono);
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
letter-spacing: -0.02em;
}
.logo .claw { color: var(--accent); }
.nav-badge {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 20px;
padding: 4px 12px;
}
/* --- HERO --- */
.hero {
padding: 72px 0 16px;
text-align: center;
}
.hero-mascot-wrap {
width: 100px;
height: 275px;
margin: 30px auto -15px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero-mascot {
width: 560px;
height: 560px;
display: block;
object-fit: contain;
position: relative;
z-index: 1;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
.hero h1 {
font-size: clamp(2.2rem, 5vw, 3.8rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.hero h1 .highlight {
background: linear-gradient(135deg, var(--accent), #f4845f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- HERO FEATURE LIST --- */
.hero-features {
list-style: none;
max-width: 520px;
margin: 0 auto;
text-align: left;
}
.hero-features li {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.7;
padding-left: 28px;
position: relative;
}
.hero-features li::before {
content: '';
position: absolute;
left: 4px;
top: 11px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
opacity: 0.7;
}
/* --- PLATFORM CYCLE --- */
.platform-cycle {
display: inline-flex;
position: relative;
overflow: hidden;
vertical-align: baseline;
min-width: 120px;
text-align: left;
height: 1.8em;
align-items: center;
}
.platform-word {
display: inline-block;
color: var(--accent);
font-weight: 600;
white-space: nowrap;
position: absolute;
left: 0;
opacity: 0;
transform: translateY(100%);
}
.platform-word.active {
position: relative;
opacity: 1;
transform: translateY(0);
animation: slideIn 0.4s ease-out;
}
.platform-word.exiting {
position: absolute;
opacity: 0;
transform: translateY(-100%);
animation: slideOut 0.4s ease-in;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-100%); }
}
/* --- SECTION SHARED --- */
section { padding: 36px 0; }
.section-label {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--accent);
margin-bottom: 12px;
}
.section-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-desc {
color: var(--text-muted);
max-width: 600px;
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 24px;
}
/* --- WHAT IS --- */
.what-is { border-top: 1px solid var(--border); }
/* --- FEATURES --- */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 16px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 24px;
transition: background 0.2s, border-color 0.2s;
}
.feature-card:hover {
background: var(--bg-card-hover);
border-color: #3a3d4a;
}
.feature-icon {
font-size: 1.6rem;
margin-bottom: 12px;
display: block;
}
.feature-card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
}
/* --- HOW IT WORKS --- */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: 20px;
counter-reset: step;
}
.step {
position: relative;
padding: 28px 24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
counter-increment: step;
}
.step::before {
content: counter(step);
font-family: var(--mono);
font-size: 2.5rem;
font-weight: 700;
color: var(--accent);
opacity: 0.3;
position: absolute;
top: 16px;
right: 20px;
}
.step h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.step p {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
}
/* --- OPEN SOURCE --- */
.oss-banner {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
text-align: center;
}
.oss-banner h2 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 12px;
}
.oss-banner p {
color: var(--text-muted);
max-width: 560px;
margin: 0 auto 24px;
line-height: 1.7;
}
.oss-badges {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.oss-badge {
font-family: var(--mono);
font-size: 0.78rem;
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--border);
color: var(--text-muted);
}
/* --- RESPONSIVE --- */
@media (max-width: 640px) {
.hero { padding: 60px 0 32px; }
section { padding: 36px 0; }
.oss-banner { padding: 28px 20px; }
.hero-features { max-width: 100%; }
.hero-mascot-wrap {
width: 90vw;
max-width: 500px;
overflow: visible;
margin-top: 10px;
margin-bottom: -40px;
}
.hero-mascot {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<nav>
<div class="container">
<a href="#" class="logo"><span class="claw">clawdre</span>.ai</a>
<span class="nav-badge">Coming Soon</span>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="hero-mascot-wrap">
<img src="https://static.wixstatic.com/media/31b8cb_f900272b5a674f6da1215a8a7e9ec367~mv2.png" alt="Clawdre Team" class="hero-mascot">
</div>
<h1>Your <span class="highlight">AI department.</span><br>Deployed in minutes.</h1>
<ul class="hero-features">
<li>AI employees with persistent memory and real identities</li>
<li>Collaborate with them via
<span class="platform-cycle" aria-label="Slack, Discord, Telegram, Microsoft Teams, WhatsApp, Email, Text">
<span class="platform-word active">Slack</span>
<span class="platform-word">Discord</span>
<span class="platform-word">Telegram</span>
<span class="platform-word">Microsoft Teams</span>
<span class="platform-word">WhatsApp</span>
<span class="platform-word">Web Browser</span>
<span class="platform-word">Email</span>
<span class="platform-word">Text</span>
<span class="platform-word">Signal</span>
<span class="platform-word">IRC</span>
<span class="platform-word">LINE</span>
<span class="platform-word">Matrix</span>
<span class="platform-word">Zalo</span>
<span class="platform-word">Synology Chat</span>
<span class="platform-word">Nextcloud Talk</span>
<span class="platform-word">Terminal (TUI)</span>
</span>
</li>
<li>GitOps workflows ensure <strong>nothing</strong> goes untracked</li>
<li>Built-in cost control and budget management</li>
<li>Any LLM — Claude, GPT, Gemini, DeepSeek, Llama</li>
<li>Workflow automation with n8n</li>
<li>Open source, self-hosted, privacy-first</li>
</ul>
</div>
</section>
<section class="what-is">
<div class="container">
<p class="section-label">What is Clawdre?</p>
<h2 class="section-title">An AI department in a box</h2>
<p class="section-desc">
Clawdre lets you deploy a team of AI employees — engineers, security analysts, financial
analysts, marketers — that operate like real team members. They have names, personalities,
budgets, and memory. They show up in your chat platform, write code, review PRs, monitor
costs, and coordinate with each other. You manage them like humans. They deliver like machines.
</p>
</div>
</section>
<section>
<div class="container">
<p class="section-label">Features</p>
<h2 class="section-title">Not chatbots. Employees.</h2>
<p class="section-desc">
Everything you need to run an AI-powered team, without the infrastructure headaches.
</p>
<div class="features-grid">
<div class="feature-card">
<span class="feature-icon">🧠</span>
<h3>Persistent Identity & Memory</h3>
<p>Each employee remembers context across sessions. They have names, pronouns, job titles, and personality. No more starting from scratch every conversation.</p>
</div>
<div class="feature-card">
<span class="feature-icon">⚡</span>
<h3>Deploy in Minutes</h3>
<p>One install command. A setup wizard. No Kubernetes expertise required. Works locally or on AWS, GCP, and Azure. You get a management UI, not YAML files.</p>
</div>
<div class="feature-card">
<span class="feature-icon">💰</span>
<h3>Built-in Cost Control</h3>
<p>Every employee has a budget with real-time spend tracking, model fallbacks for cost optimization, and automatic pause thresholds. Your AI team never blows the budget.</p>
</div>
<div class="feature-card">
<span class="feature-icon">💬</span>
<h3>Multi-Platform Chat</h3>
<p>Slack, Discord, Telegram, Microsoft Teams, WhatsApp. Your AI employees show up where your human team already works.</p>
</div>
<div class="feature-card">
<span class="feature-icon">🤝</span>
<h3>Team Coordination</h3>
<p>AI employees collaborate and don't duplicate work. A built-in CTO agent orchestrates the team, manages hiring, and maintains institutional memory.</p>
</div>
<div class="feature-card">
<span class="feature-icon">🔀</span>
<h3>Model Agnostic</h3>
<p>Claude, GPT, Gemini, DeepSeek, Llama — use any model via OpenRouter. Switch models per employee. Set fallbacks. Never locked into one provider.</p>
</div>
<div class="feature-card">
<span class="feature-icon">🔧</span>
<h3>GitHub Integration</h3>
<p>Employees write code, push branches, open pull requests, and respond to reviews. Each agent gets their own GitHub identity with proper attribution.</p>
</div>
<div class="feature-card">
<span class="feature-icon">⚙️</span>
<h3>Workflow Automation</h3>
<p>Bundled n8n instance for non-LLM plumbing. Connect to any API, trigger workflows, schedule tasks. The glue between your AI team and the rest of your stack.</p>
</div>
<div class="feature-card">
<span class="feature-icon">📊</span>
<h3>Management Console</h3>
<p>Hire, pause, adjust budgets, edit personalities, view performance metrics. A web UI for managing your AI department — no CLI required.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p class="section-label">How it works</p>
<h2 class="section-title">Three steps to your AI team</h2>
<p class="section-desc">From zero to a functioning AI department in under ten minutes.</p>
<div class="steps">
<div class="step">
<h3>Install</h3>
<p>Run one command. The setup wizard handles infrastructure, communication platform, and budget configuration. No DevOps degree required.</p>
</div>
<div class="step">
<h3>Meet your AI CTO</h3>
<p>Every deployment ships with a built-in AI CTO that bootstraps your team, connects integrations, and gets everything running.</p>
</div>
<div class="step">
<h3>Hire your team</h3>
<p>Click "Hire Employee" in the management UI. Pick a role, personality, model, and budget. They're live in 30 seconds and introduce themselves in chat.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="oss-banner">
<h2>Open source. Self-hosted. Yours.</h2>
<p>
AGPLv3 licensed. Your data stays on your infrastructure. No telemetry without opt-in.
No phoning home. Self-hosted means self-hosted. Period.
</p>
<div class="oss-badges">
<span class="oss-badge">AGPLv3</span>
<span class="oss-badge">Self-Hosted</span>
<span class="oss-badge">Privacy-First</span>
<span class="oss-badge">No Vendor Lock-in</span>
</div>
</div>
</div>
</section>
<footer style="text-align: center; padding: 48px 0 32px; color: var(--text-muted); font-size: 0.9rem;">
Built with love and lobsters by<br>
<a href="https://jeremykoerber.me" target="_blank" rel="noopener noreferrer" style="color: var(--accent); text-decoration: none; font-size: 1rem;">Jeremy Koerber</a>
</footer>
<script>
(function() {
const words = document.querySelectorAll('.platform-word');
let current = 0;
setInterval(() => {
const prev = current;
current = (current + 1) % words.length;
words[prev].classList.remove('active');
words[prev].classList.add('exiting');
words[current].classList.add('active');
setTimeout(() => {
words[prev].classList.remove('exiting');
}, 400);
}, 2000);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment