164 lines
12 KiB
HTML
164 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Simbiot UI — Claude Code in your browser. $99.9/mo, seat included</title>
|
||
<meta name="description" content="Simbiot UI gives your team a deployed Claude Code web interface: agent mailbox, studio RAG, signed audit. No setup, keys included, $99.9/mo.">
|
||
<meta property="og:title" content="Simbiot UI — Claude Code in your browser">
|
||
<meta property="og:description" content="Deployed Claude Code web UI with agent mailbox and studio knowledge base. $99.9/mo, claude seat included.">
|
||
<meta property="og:url" content="https://ui.cil.by/">
|
||
<meta property="og:type" content="website">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--paper:#faf8f3; --paper2:#f2efe7; --ink:#1a1a18; --ink2:#55534b; --ink3:#6b685c;
|
||
--line:#e2ded2; --line2:#cfcabb; --acc:#5b4be0; --acc2:#3d2fae;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{font-family:'Inter Tight',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
|
||
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
|
||
a{color:var(--acc)}
|
||
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
|
||
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,248,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
|
||
nav .wrap{display:flex;align-items:center;height:60px}
|
||
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.3px}
|
||
.logo-mark{width:14px;height:14px;background:var(--acc)}
|
||
nav .cta{margin-left:auto;display:flex;gap:16px;align-items:center}
|
||
.btn{display:inline-block;font-weight:600;font-size:15px;padding:11px 22px;border-radius:10px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
|
||
.btn:active{transform:translateY(1px)}
|
||
.btn-acc{background:var(--acc);color:#fff}
|
||
.btn-acc:hover{background:var(--acc2);box-shadow:0 6px 20px rgba(91,75,224,.25)}
|
||
.btn-ghost{border:1.5px solid var(--line2);color:var(--ink)}
|
||
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
|
||
.hero{padding:150px 0 90px;position:relative}
|
||
.kicker{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:500;margin-bottom:18px}
|
||
h1{font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.02em;font-weight:700;max-width:900px}
|
||
h1 em{font-style:normal;color:var(--acc)}
|
||
.sub{margin-top:22px;font-size:19px;line-height:1.55;color:var(--ink2);max-width:640px}
|
||
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
|
||
.price-pill{display:inline-flex;align-items:baseline;gap:8px;margin-top:26px;padding:10px 18px;border:1px solid var(--line2);border-radius:999px;background:#fff}
|
||
.price-pill b{font-size:22px;letter-spacing:-.02em}
|
||
.price-pill span{color:var(--ink3);font-size:14px}
|
||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
|
||
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px}
|
||
.card h3{font-size:16.5px;font-weight:600;margin-bottom:8px}
|
||
.card p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
|
||
.card .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--acc);letter-spacing:.1em;margin-bottom:10px;display:block}
|
||
section{padding:76px 0}
|
||
h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;font-weight:700;max-width:760px}
|
||
.h2sub{margin-top:14px;color:var(--ink2);font-size:17px;max-width:640px;line-height:1.5}
|
||
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:44px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
|
||
.feat>div{padding:26px 26px;border-bottom:1px solid var(--line)}
|
||
.feat>div:nth-child(odd){border-right:1px solid var(--line)}
|
||
.feat>div:nth-last-child(-n+2){border-bottom:none}
|
||
.feat b{display:block;font-size:16px;margin-bottom:6px}
|
||
.feat p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
|
||
.steps{counter-reset:s;margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
|
||
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;position:relative}
|
||
.step:before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--acc);letter-spacing:.1em}
|
||
.step b{display:block;margin:10px 0 6px;font-size:15.5px}
|
||
.step p{font-size:14px;line-height:1.5;color:var(--ink2)}
|
||
.faq{margin-top:44px;max-width:760px}
|
||
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:10px}
|
||
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
|
||
.faq summary:after{content:'+';color:var(--acc);font-size:18px}
|
||
.faq details[open] summary:after{content:'–'}
|
||
.faq details p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink2)}
|
||
form{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;max-width:640px}
|
||
label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px}
|
||
input,textarea{width:100%;font:inherit;font-size:15px;padding:11px 14px;border:1.5px solid var(--line2);border-radius:10px;background:var(--paper);color:var(--ink)}
|
||
input:focus,textarea:focus{outline:none;border-color:var(--acc)}
|
||
textarea{min-height:84px;resize:vertical}
|
||
.submit{margin-top:20px;width:100%;border:none;font-size:16px;cursor:pointer}
|
||
.note{margin-top:14px;font-size:13px;color:var(--ink3);line-height:1.5}
|
||
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--ink3);font-size:13.5px}
|
||
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||
@media(max-width:900px){.grid,.steps{grid-template-columns:1fr 1fr}.feat{grid-template-columns:1fr}.feat>div:nth-child(odd){border-right:none}}
|
||
@media(max-width:600px){.grid,.steps{grid-template-columns:1fr}.hero{padding:120px 0 60px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav><div class="wrap">
|
||
<div class="logo"><span class="logo-mark"></span>Simbiot UI</div>
|
||
<div class="cta"><a class="btn btn-acc" href="#apply">Apply for access</a></div>
|
||
</div></nav>
|
||
|
||
<header class="hero wrap" id="top">
|
||
<div class="kicker">Simbiot UI · by Cooperative 42</div>
|
||
<h1>Claude Code in your browser, <em>deployed and maintained</em> for you.</h1>
|
||
<p class="sub">No installs, no setup, no API-key juggling. We provision the workspace, the agent mailbox and the model access — you open a tab and build.</p>
|
||
<div class="hero-cta">
|
||
<a class="btn btn-acc" href="#apply">Request access</a>
|
||
<a class="btn btn-ghost" href="#how">How it works</a>
|
||
</div>
|
||
<div class="price-pill"><b class="mono">$99.9</b><span>/ month · claude seat included · cancel anytime</span></div>
|
||
<div class="grid">
|
||
<div class="card"><span class="n">ZERO-SETUP</span><h3>Works out of the box</h3><p>A deployed web UI for Claude Code (Simbiot Dashboard for monitoring). Browser only — nothing to install or configure.</p></div>
|
||
<div class="card"><span class="n">SEAT-INCLUDED</span><h3>Model access included</h3><p>Claude seat is part of the plan — you don't bring keys, you don't see ours. Fair-use limits keep it fast for everyone.</p></div>
|
||
<div class="card"><span class="n">STUDIO-KNOWLEDGE</span><h3>Studio RAG built in</h3><p>Your workspace knows the cooperative's playbook: how to build startups, studio terms and processes — searchable by your agent.</p></div>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="how" class="wrap">
|
||
<h2>How it works</h2>
|
||
<p class="h2sub">We onboard every workspace by hand for the first cohort — that keeps quality high while we scale.</p>
|
||
<div class="steps">
|
||
<div class="step"><b>Apply</b><p>Tell us about your team and what you're building. Takes a minute.</p></div>
|
||
<div class="step"><b>We provision</b><p>Your workspace, agent mailbox and Claude seat are set up by us — usually within a day.</p></div>
|
||
<div class="step"><b>You get credentials</b><p>Login, password and URL arrive by email, with a starter guide for your agent.</p></div>
|
||
<div class="step"><b>Build</b><p>Open Simbiot UI and work with Claude Code in the browser. Support channel included.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wrap" id="features" style="padding-top:0">
|
||
<h2>What's inside</h2>
|
||
<div class="feat">
|
||
<div><b>Personal workspace</b><p>Isolated container per client: your files, your agent, your limits. Others can't see your data, you can't see theirs.</p></div>
|
||
<div><b>Agent mailbox</b><p>Every workspace ships with an agent email address on our domain — your Claude can send and receive mail as part of the workflow.</p></div>
|
||
<div><b>Model gateway</b><p>All model traffic goes through our gateway with per-client tracking and fair-use limits. Predictable, monitored, no surprise bills.</p></div>
|
||
<div><b>Signed & auditable</b><p>Every agent action is signed and auditable — the same audit spine the cooperative runs on every day.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wrap" id="faq">
|
||
<h2>FAQ</h2>
|
||
<div class="faq">
|
||
<details><summary>Do I need my own API keys or Claude account?</summary><p>No. The claude seat is included in the $99.9/mo price — model access is provisioned and managed by us.</p></details>
|
||
<details><summary>How fast can I start?</summary><p>We onboard the first cohort manually: apply, we confirm, you get credentials — typically within one business day.</p></details>
|
||
<details><summary>What's the studio knowledge base?</summary><p>A curated, read-only RAG with the studio's startup-building methodology and terms — available to your agent inside the workspace. Private cooperative data is not included.</p></details>
|
||
<details><summary>Is my data isolated?</summary><p>Yes — one isolated container per client with its own volume and resource limits.</p></details>
|
||
<details><summary>Can I cancel?</summary><p>Month-to-month subscription, cancel anytime. We'll help you export your files.</p></details>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wrap" id="apply">
|
||
<h2>Request access</h2>
|
||
<p class="h2sub">First cohort is onboarded personally — leave your details and we'll get back to you.</p>
|
||
<form action="https://formsubmit.co/hello@cil.by" method="POST">
|
||
<input type="hidden" name="_subject" value="Simbiot UI — access request">
|
||
<label for="name">Name</label>
|
||
<input id="name" name="name" required placeholder="Jane Doe">
|
||
<label for="email">Email</label>
|
||
<input id="email" name="email" type="email" required placeholder="jane@team.dev">
|
||
<label for="tg">Telegram (optional)</label>
|
||
<input id="tg" name="telegram" placeholder="@jane">
|
||
<label for="about">What will you build?</label>
|
||
<textarea id="about" name="about" placeholder="2–3 sentences about your team and tasks"></textarea>
|
||
<button class="btn btn-acc submit" type="submit">Apply — $99.9/mo after confirmation</button>
|
||
<p class="note">We reply personally, no auto-billing. Payment link arrives after your workspace is confirmed. Month-to-month, cancel anytime.</p>
|
||
<p class="note"><span class="mono">TODO(deploy):</span> form endpoint is a placeholder (hello@cil.by) — wire to the chosen application channel (email agent / TG bot / portal) before deploying. See docs/ROADMAP-SIMBIOT-UI.md.</p>
|
||
</form>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="wrap">
|
||
<div>© 2026 Cooperative 42 · <a href="https://cil.by">cil.by</a></div>
|
||
<div>Simbiot UI · powered by claudecodeui</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|