Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/index.html

Created February 6, 2026 19:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aseba/c600e0e93c338ff908197050639d847d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aseba/c600e0e93c338ff908197050639d847d to your computer and use it in GitHub Desktop.
Download ZIP
FractalClaw Landing Page
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="FractalClaw — your personal AI agent on Telegram. Subscribe and start chatting. No setup required." />
<title>FractalClaw — Your personal AI agent on Telegram</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
<style>
:root {
--bg: #0b1020;
--panel: rgba(255,255,255,0.06);
--panel-2: rgba(255,255,255,0.09);
--border: rgba(255,255,255,0.12);
--text: rgba(255,255,255,0.92);
--muted: rgba(255,255,255,0.70);
--muted2: rgba(255,255,255,0.55);
--brand: #7c5cff;
--brand2: #22d3ee;
--good: #34d399;
--shadow: 0 20px 60px rgba(0,0,0,0.45);
--radius: 16px;
--max: 1120px;
--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
}
body {
background:
radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,0.25), transparent 60%),
radial-gradient(1000px 700px at 80% 20%, rgba(34,211,238,0.18), transparent 55%),
var(--bg);
color: var(--text);
font-family: var(--font);
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
/* ── Nav ── */
.nav {
position: sticky; top: 0; z-index: 10;
backdrop-filter: blur(12px);
background: rgba(11,16,32,0.65);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo-mark {
width: 28px; height: 28px; border-radius: 10px;
background: linear-gradient(135deg, var(--brand), var(--brand2));
box-shadow: 0 10px 30px rgba(124,92,255,0.25);
}
.nav-links { display: flex; gap: 20px; align-items: center; color: var(--muted); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 12px 20px; border-radius: 12px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.06);
color: var(--text); font-weight: 600; font-size: 14px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.btn:active { transform: translateY(1px); }
.btn-primary {
border: none;
background: linear-gradient(135deg, var(--brand), var(--brand2));
color: #081018;
box-shadow: 0 16px 40px rgba(124,92,255,0.25);
}
.btn-primary:hover { box-shadow: 0 16px 50px rgba(124,92,255,0.4); background: linear-gradient(135deg, #8e72ff, #3de0f5); }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 14px; }
/* ── Hero ── */
.hero { padding: 72px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 32px; align-items: start; }
.badge {
display: inline-flex; gap: 8px; align-items: center;
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.05);
color: var(--muted); font-size: 13px;
}
.badge b { color: var(--text); }
h1 { margin: 16px 0 0; font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
.gradient-text {
background: linear-gradient(135deg, var(--brand), var(--brand2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.subhead { margin: 16px 0 0; font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 52ch; }
.cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fineprint { margin-top: 14px; color: var(--muted2); font-size: 13px; }
.hero-card {
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.hero-card .inner { padding: 20px; }
.hero-card h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted2); font-weight: 600; }
.chat { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.msg {
padding: 10px 14px; border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.86);
}
.msg.me { margin-left: 20px; }
.msg.bot {
margin-right: 20px;
background: linear-gradient(135deg, rgba(124,92,255,0.16), rgba(34,211,238,0.12));
border-color: rgba(124,92,255,0.22);
}
.msg b { font-weight: 600; }
.checklist { margin-top: 16px; display: grid; gap: 10px; }
.check { display: flex; gap: 10px; color: var(--muted); font-size: 14px; align-items: center; }
.dot {
width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
background: var(--good);
box-shadow: 0 0 0 4px rgba(52,211,153,0.15);
}
/* ── How It Works ── */
section { padding: 48px 0; }
.section-title { font-size: 28px; letter-spacing: -0.4px; }
.section-sub { margin: 10px 0 0; color: var(--muted); max-width: 65ch; line-height: 1.6; }
.steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
margin-top: 24px;
}
.step {
padding: 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
text-align: center;
}
.step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand2));
color: #081018; font-weight: 800; font-size: 18px;
margin-bottom: 12px;
}
.step h4 { font-size: 16px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14px; }
/* ── Features ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.card {
padding: 20px; border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
}
.card h4 { font-size: 16px; margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
/* ── Pricing ── */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; align-items: stretch; }
.plan {
position: relative; padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
display: flex; flex-direction: column; gap: 14px;
}
.plan.featured {
background: linear-gradient(180deg, rgba(124,92,255,0.18), rgba(255,255,255,0.03));
border-color: rgba(124,92,255,0.35);
box-shadow: 0 20px 70px rgba(124,92,255,0.18);
}
.plan .tag {
position: absolute; top: 16px; right: 16px;
font-size: 11px; color: #081018; font-weight: 700;
background: linear-gradient(135deg, var(--brand), var(--brand2));
padding: 5px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px;
}
.plan h3 { font-size: 20px; }
.price { font-size: 44px; letter-spacing: -0.8px; font-weight: 700; }
.per { color: var(--muted); font-size: 14px; font-weight: 400; }
.plan ul { padding-left: 0; display: grid; gap: 8px; }
.plan li { color: var(--muted); font-size: 14px; padding-left: 20px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.plan .btn { width: 100%; margin-top: auto; }
/* ── FAQ ── */
.faq { margin-top: 24px; display: grid; gap: 10px; max-width: 720px; }
details {
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
padding: 16px 18px;
}
summary {
cursor: pointer; font-weight: 650;
color: rgba(255,255,255,0.9);
list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 20px; color: var(--muted); transition: transform 0.2s; }
details[open] summary::after { content: "−"; }
details p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
/* ── Footer ── */
footer {
padding: 32px 0 64px;
border-top: 1px solid var(--border);
color: var(--muted); font-size: 14px;
}
.footer-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }
/* ── Responsive ── */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
.nav-links { display: none; }
.grid-3, .steps, .pricing { grid-template-columns: 1fr; }
h1 { font-size: 38px; }
}
</style>
</head>
<body>
<header class="nav">
<div class="container">
<div class="nav-inner">
<a class="logo" href="#top">
<span class="logo-mark"></span>
<span>FractalClaw</span>
</a>
<nav class="nav-links">
<a href="#how">How it works</a>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
<a class="btn btn-primary" href="#pricing">Get started</a>
</div>
</div>
</header>
<main id="top">
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div>
<div class="badge">
Powered by <a href="https://openclaw.ai/" target="_blank" rel="noopener"><b>OpenClaw</b></a> &nbsp;·&nbsp; <a href="https://claude.ai/new" target="_blank" rel="noopener"><b>Claude</b></a> &nbsp;·&nbsp; <b>Telegram</b>
</div>
<h1>Your personal <span class="gradient-text">AI agent</span> on Telegram</h1>
<p class="subhead">
Subscribe and start chatting with an AI agent powered by
<a href="https://openclaw.ai/" target="_blank" rel="noopener" style="color:var(--brand2)">OpenClaw</a> and
<a href="https://claude.ai/new" target="_blank" rel="noopener" style="color:var(--brand)">Claude</a>
that can research the web, draft documents, run code, and help you get real work done — all from Telegram.
</p>
<div class="cta-row">
<a class="btn btn-primary btn-lg" href="#pricing">Get started</a>
<a class="btn btn-lg" href="#how">How it works</a>
</div>
<p class="fineprint">No credit card required to explore. Cancel anytime.</p>
</div>
<aside class="hero-card">
<div class="inner">
<h3>Telegram Chat</h3>
<div class="chat">
<div class="msg me"><b>You:</b> Plan my week and draft 3 client emails.</div>
<div class="msg bot"><b>FractalClaw:</b> On it. I'll propose a Mon–Fri schedule, then draft the emails in your tone. Any deadlines?</div>
<div class="msg me"><b>You:</b> Friendly, concise. Deadlines Tue + Thu.</div>
<div class="msg bot"><b>FractalClaw:</b> Done. Here's your weekly plan and 3 email drafts. Want me to adjust anything?</div>
</div>
<div class="checklist">
<div class="check"><span class="dot"></span><span>No apps to install — just Telegram</span></div>
<div class="check"><span class="dot"></span><span>Private, dedicated agent instance</span></div>
<div class="check"><span class="dot"></span><span>Cancel anytime</span></div>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- How It Works -->
<section id="how">
<div class="container">
<h2 class="section-title">How it works</h2>
<p class="section-sub">Three steps. Under five minutes.</p>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<h4>Subscribe</h4>
<p>Pay $100/mo through Stripe and share your Claude API key.</p>
</div>
<div class="step">
<div class="step-num">2</div>
<h4>Get added</h4>
<p>We spin up your dedicated agent and add you to the Telegram bot.</p>
</div>
<div class="step">
<div class="step-num">3</div>
<h4>Start chatting</h4>
<p>Message your agent and get real work done.</p>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="container">
<h2 class="section-title">What FractalClaw can do</h2>
<p class="section-sub">
Not just a chatbot — an AI agent that takes multi-step tasks and follows through.
</p>
<div class="grid-3">
<div class="card">
<h4>Tasks that actually finish</h4>
<p>Research topics, summarize sources, draft content, create plans, and refine with your feedback.</p>
</div>
<div class="card">
<h4>Telegram-first</h4>
<p>No dashboards to learn. Message your agent like you'd message a friend — from phone or desktop.</p>
</div>
<div class="card">
<h4>Zero setup</h4>
<p>Subscribe, get added to the bot, and start. We host and manage everything for you.</p>
</div>
<div class="card">
<h4>Web browsing &amp; code</h4>
<p>Your agent can browse the web, run code, and handle files for real workflows.</p>
</div>
<div class="card">
<h4>Dedicated instance</h4>
<p>Your own isolated deployment — not a shared, overloaded bot.</p>
</div>
<div class="card">
<h4>Open source</h4>
<p>Built on <a href="https://openclaw.ai/" target="_blank" rel="noopener" style="color:var(--brand2)">OpenClaw</a>, an open-source AI agent framework. Transparent and auditable.</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing">
<div class="container">
<h2 class="section-title">Simple pricing</h2>
<p class="section-sub">
One plan. Everything included.
</p>
<div style="max-width:400px;margin-top:24px;">
<div class="plan featured">
<h3>FractalClaw Agent</h3>
<p class="price">$100 <span class="per">/ mo</span></p>
<ul>
<li>Dedicated AI agent on Telegram</li>
<li>Web browsing, code, &amp; file tools</li>
<li>Your own isolated instance</li>
<li>Bring your own Claude API key</li>
<li>Cancel anytime</li>
</ul>
<a class="btn btn-primary btn-lg" href="https://buy.stripe.com/test_28EbJ16x11TPfvFe0j8Vi00" target="_blank" rel="noopener">Subscribe</a>
<p style="margin-top:12px;color:var(--muted2);font-size:13px;text-align:center;">
You'll need an <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener" style="color:var(--brand2);">Anthropic API key</a> for Claude.
Don't have one? <a href="mailto:hello@openclaw.ai" style="color:var(--brand2);">Contact us</a> and we'll help.
</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="container">
<h2 class="section-title">FAQ</h2>
<div class="faq">
<details>
<summary>How do I start?</summary>
<p>Subscribe via Stripe, share your Claude API key, and we'll add you to the FractalClaw Telegram bot. You can start chatting right away.</p>
</details>
<details>
<summary>Is this just a chatbot?</summary>
<p>No. It's a full AI agent powered by <a href="https://openclaw.ai/" target="_blank" rel="noopener" style="color:var(--brand2)">OpenClaw</a> and <a href="https://claude.ai/new" target="_blank" rel="noopener" style="color:var(--brand)">Claude</a> — it handles multi-step tasks like research, drafting, and iteration. It can browse the web, run code, and manage files.</p>
</details>
<details>
<summary>Do I need to install anything?</summary>
<p>No. If you have Telegram on your phone or desktop, you're good to go.</p>
</details>
<details>
<summary>What does "fair use" mean?</summary>
<p>Each plan includes generous usage for typical personal and professional workflows. If you consistently need more, we'll recommend the right tier or a custom plan.</p>
</details>
<details>
<summary>Can I cancel anytime?</summary>
<p>Yes. Cancel through Stripe and your subscription won't renew. Your agent stays active until the billing period ends.</p>
</details>
<details>
<summary>Is my data private?</summary>
<p>Your agent runs in a dedicated, isolated instance. We retain only minimal operational logs and never share your data.</p>
</details>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-row">
<div>&copy; <span id="yr"></span> FractalClaw</div>
<div class="footer-links">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a href="https://github.com/aseba/openclaw-aas" target="_blank" rel="noopener">GitHub</a>
</div>
</div>
</div>
</footer>
<script>
document.getElementById("yr").textContent = new Date().getFullYear();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment