830 lines
27 KiB
HTML
830 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PAaaS — Premium Private AI Agents</title>
|
|
<meta name="description" content="Isolated private compute with dedicated inference. Persistent agents, Kanban-orchestrated specialist teams, enterprise privacy. No data sharing. From $99/mo.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ============================================
|
|
RESET + BASE
|
|
============================================ */
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#0f0f0d;
|
|
--bg-raised:#161614;
|
|
--bg-elevated:#1d1d1a;
|
|
--text:#eae8e0;
|
|
--text-muted:#9e9a8f;
|
|
--text-dim:#6e6a60;
|
|
--accent:#c9854a;
|
|
--accent-dim:rgba(201,133,74,0.12);
|
|
--accent-glow:rgba(201,133,74,0.06);
|
|
--border:rgba(255,255,255,0.06);
|
|
--border-raised:rgba(255,255,255,0.09);
|
|
--font-serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
|
|
--font-sans:'DM Sans', system-ui, -apple-system, sans-serif;
|
|
--max-w:1160px;
|
|
--max-w-narrow:780px;
|
|
}
|
|
html{scroll-behavior:smooth}
|
|
body{
|
|
font-family:var(--font-sans);
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
line-height:1.6;
|
|
-webkit-font-smoothing:antialiased;
|
|
overflow-x:hidden;
|
|
}
|
|
a{color:inherit;text-decoration:none}
|
|
img{max-width:100%;display:block}
|
|
|
|
/* ============================================
|
|
CONTAINER + UTILITY
|
|
============================================ */
|
|
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
|
|
.container-narrow{max-width:var(--max-w-narrow);margin:0 auto;padding:0 28px}
|
|
.sans{font-family:var(--font-sans)}
|
|
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
|
|
.fade-up.visible{opacity:1;transform:translateY(0)}
|
|
|
|
/* ============================================
|
|
NAV
|
|
============================================ */
|
|
nav{
|
|
position:fixed;top:0;left:0;right:0;z-index:100;
|
|
background:rgba(15,15,13,0.85);
|
|
backdrop-filter:blur(14px);
|
|
border-bottom:1px solid var(--border);
|
|
}
|
|
nav .container{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
height:58px;
|
|
}
|
|
.logo{
|
|
font-family:var(--font-serif);
|
|
font-size:1.2rem;
|
|
letter-spacing:-.01em;
|
|
color:var(--text);
|
|
}
|
|
.logo em{font-style:italic;color:var(--accent)}
|
|
.nav-links{display:flex;gap:28px;align-items:center}
|
|
.nav-links a{
|
|
font-size:.8125rem;font-weight:500;
|
|
color:var(--text-muted);
|
|
transition:color .2s;
|
|
}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.nav-cta{
|
|
font-size:.8125rem;font-weight:600;
|
|
padding:7px 18px;
|
|
border-radius:5px;
|
|
background:var(--accent);
|
|
color:var(--bg);
|
|
transition:opacity .2s;
|
|
}
|
|
.nav-cta:hover{opacity:.88}
|
|
.menu-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer}
|
|
|
|
/* ============================================
|
|
SECTION 1 — OPENING (not a hero)
|
|
============================================ */
|
|
.opening{
|
|
padding:160px 0 80px;
|
|
position:relative;
|
|
}
|
|
.opening::before{
|
|
content:'';
|
|
position:absolute;
|
|
top:-100px;right:-200px;
|
|
width:600px;height:600px;
|
|
background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 70%);
|
|
pointer-events:none;
|
|
}
|
|
.opening .content{
|
|
position:relative;z-index:1;
|
|
max-width:760px;
|
|
}
|
|
.opening h1{
|
|
font-family:var(--font-serif);
|
|
font-size:clamp(2.6rem,5.5vw,4.2rem);
|
|
font-weight:400;
|
|
line-height:1.08;
|
|
letter-spacing:-.02em;
|
|
margin-bottom:24px;
|
|
}
|
|
.opening h1 .accent{color:var(--accent)}
|
|
.opening .lede{
|
|
font-size:1.1rem;
|
|
color:var(--text-muted);
|
|
line-height:1.75;
|
|
max-width:580px;
|
|
margin-bottom:36px;
|
|
}
|
|
.opening-form{
|
|
display:flex;gap:10px;
|
|
max-width:440px;
|
|
}
|
|
.opening-form input{
|
|
flex:1;
|
|
padding:12px 16px;
|
|
border-radius:5px;
|
|
border:1px solid var(--border);
|
|
background:var(--bg-raised);
|
|
color:var(--text);
|
|
font-size:.9375rem;
|
|
outline:none;
|
|
transition:border-color .25s;
|
|
font-family:var(--font-sans);
|
|
}
|
|
.opening-form input::placeholder{color:var(--text-dim)}
|
|
.opening-form input:focus{border-color:var(--accent)}
|
|
.btn-accent{
|
|
padding:12px 26px;
|
|
border-radius:5px;
|
|
border:none;
|
|
background:var(--accent);
|
|
color:var(--bg);
|
|
font-size:.9375rem;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:opacity .2s,transform .1s;
|
|
white-space:nowrap;
|
|
font-family:var(--font-sans);
|
|
}
|
|
.btn-accent:hover{opacity:.88}
|
|
.btn-accent:active{transform:scale(.97)}
|
|
.opening-note{
|
|
font-size:.8125rem;
|
|
color:var(--text-dim);
|
|
margin-top:14px;
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION 2 — WHAT YOU GET (asymmetric editorial)
|
|
============================================ */
|
|
.what-you-get{
|
|
padding:100px 0;
|
|
border-top:1px solid var(--border);
|
|
}
|
|
.what-you-get .grid{
|
|
display:grid;
|
|
grid-template-columns:1.2fr 1fr;
|
|
gap:60px;
|
|
align-items:start;
|
|
}
|
|
.what-you-get .intro{}
|
|
.what-you-get .intro h2{
|
|
font-family:var(--font-serif);
|
|
font-size:clamp(1.8rem,3vw,2.6rem);
|
|
font-weight:400;
|
|
line-height:1.15;
|
|
letter-spacing:-.015em;
|
|
margin-bottom:20px;
|
|
}
|
|
.what-you-get .intro p{
|
|
color:var(--text-muted);
|
|
line-height:1.7;
|
|
font-size:.95rem;
|
|
}
|
|
.what-you-get .detail-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:0;
|
|
}
|
|
.detail-item{
|
|
padding:18px 0;
|
|
border-bottom:1px solid var(--border);
|
|
}
|
|
.detail-item:last-child{border-bottom:none}
|
|
.detail-item .label{
|
|
font-size:.7rem;
|
|
font-weight:600;
|
|
letter-spacing:.08em;
|
|
text-transform:uppercase;
|
|
color:var(--accent);
|
|
margin-bottom:4px;
|
|
}
|
|
.detail-item .value{
|
|
font-size:.9rem;
|
|
color:var(--text);
|
|
line-height:1.55;
|
|
}
|
|
.detail-item .value .sub{
|
|
color:var(--text-muted);
|
|
font-size:.82rem;
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION 3 — INFRASTRUCTURE (full-bleed narrative)
|
|
============================================ */
|
|
.infrastructure{
|
|
padding:100px 0;
|
|
background:var(--bg-raised);
|
|
border-top:1px solid var(--border);
|
|
border-bottom:1px solid var(--border);
|
|
}
|
|
.infrastructure .container-narrow{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:50px;
|
|
}
|
|
.infrastructure h2{
|
|
font-family:var(--font-serif);
|
|
font-size:clamp(1.5rem,2.5vw,2rem);
|
|
font-weight:400;
|
|
line-height:1.2;
|
|
letter-spacing:-.01em;
|
|
color:var(--text);
|
|
}
|
|
.infrastructure h2 em{
|
|
font-style:italic;
|
|
color:var(--accent);
|
|
}
|
|
.infrastructure p{
|
|
color:var(--text-muted);
|
|
line-height:1.7;
|
|
font-size:.95rem;
|
|
}
|
|
.infrastructure p strong{color:var(--text);font-weight:500}
|
|
|
|
/* ============================================
|
|
SECTION 4 — PLANS (editorial pricing)
|
|
============================================ */
|
|
.plans{
|
|
padding:100px 0;
|
|
}
|
|
.plans-head{
|
|
margin-bottom:50px;
|
|
}
|
|
.plans-head .overline{
|
|
font-size:.7rem;
|
|
font-weight:600;
|
|
letter-spacing:.1em;
|
|
text-transform:uppercase;
|
|
color:var(--accent);
|
|
margin-bottom:10px;
|
|
}
|
|
.plans-head h2{
|
|
font-family:var(--font-serif);
|
|
font-size:clamp(1.8rem,3vw,2.6rem);
|
|
font-weight:400;
|
|
line-height:1.1;
|
|
letter-spacing:-.015em;
|
|
margin-bottom:14px;
|
|
}
|
|
.plans-head p{
|
|
color:var(--text-muted);
|
|
font-size:.95rem;
|
|
max-width:480px;
|
|
}
|
|
.plans-grid{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:24px;
|
|
}
|
|
.plan-card{
|
|
padding:32px;
|
|
border:1px solid var(--border);
|
|
border-radius:6px;
|
|
background:var(--bg-raised);
|
|
transition:border-color .25s;
|
|
}
|
|
.plan-card:hover{border-color:var(--border-raised)}
|
|
.plan-card.heavy{
|
|
border-color:var(--accent-dim);
|
|
position:relative;
|
|
}
|
|
.plan-card.heavy::after{
|
|
content:'';
|
|
position:absolute;
|
|
top:-1px;left:0;right:0;
|
|
height:2px;
|
|
background:var(--accent);
|
|
border-radius:2px 2px 0 0;
|
|
}
|
|
.plan-name{
|
|
font-size:.75rem;
|
|
font-weight:600;
|
|
letter-spacing:.08em;
|
|
text-transform:uppercase;
|
|
color:var(--accent);
|
|
margin-bottom:6px;
|
|
}
|
|
.plan-price{
|
|
font-family:var(--font-serif);
|
|
font-size:2.4rem;
|
|
line-height:1;
|
|
letter-spacing:-.02em;
|
|
margin-bottom:4px;
|
|
}
|
|
.plan-price .dollar{font-size:1rem;color:var(--text-muted);vertical-align:super}
|
|
.plan-price .period{font-size:.9rem;color:var(--text-dim);font-family:var(--font-sans);font-weight:400}
|
|
.plan-desc{
|
|
font-size:.85rem;
|
|
color:var(--text-muted);
|
|
margin:14px 0 22px;
|
|
line-height:1.55;
|
|
}
|
|
.plan-features{
|
|
list-style:none;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
.plan-features li{
|
|
display:flex;
|
|
align-items:flex-start;
|
|
gap:10px;
|
|
font-size:.85rem;
|
|
color:var(--text-muted);
|
|
line-height:1.45;
|
|
}
|
|
.plan-features li svg{
|
|
width:16px;height:16px;
|
|
flex-shrink:0;
|
|
margin-top:3px;
|
|
color:var(--accent);
|
|
}
|
|
.plan-features li.disabled{color:var(--text-dim)}
|
|
.plan-features li.disabled svg{color:var(--text-dim)}
|
|
.plan-card .btn-accent{
|
|
width:100%;
|
|
text-align:center;
|
|
margin-top:24px;
|
|
display:block;
|
|
}
|
|
.plan-card.heavy .btn-accent{background:var(--accent);color:var(--bg)}
|
|
|
|
/* ============================================
|
|
SECTION 5 — FAQ (compact, footnote-style)
|
|
============================================ */
|
|
.faq{
|
|
padding:80px 0;
|
|
border-top:1px solid var(--border);
|
|
border-bottom:1px solid var(--border);
|
|
background:var(--bg-raised);
|
|
}
|
|
.faq .container-narrow{}
|
|
.faq h2{
|
|
font-family:var(--font-serif);
|
|
font-size:1.5rem;
|
|
font-weight:400;
|
|
letter-spacing:-.01em;
|
|
margin-bottom:36px;
|
|
color:var(--text-muted);
|
|
}
|
|
.faq-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:0;
|
|
}
|
|
.faq-item{
|
|
border-bottom:1px solid var(--border);
|
|
padding:0;
|
|
}
|
|
.faq-item:last-child{border-bottom:none}
|
|
.faq-q{
|
|
width:100%;
|
|
padding:18px 40px 18px 0;
|
|
background:none;
|
|
border:none;
|
|
color:var(--text);
|
|
font-size:.9rem;
|
|
font-weight:500;
|
|
text-align:left;
|
|
cursor:pointer;
|
|
font-family:var(--font-sans);
|
|
position:relative;
|
|
line-height:1.5;
|
|
transition:color .2s;
|
|
}
|
|
.faq-q:hover{color:var(--accent)}
|
|
.faq-q::after{
|
|
content:'+';
|
|
position:absolute;
|
|
right:0;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
font-size:1.1rem;
|
|
font-weight:300;
|
|
color:var(--text-dim);
|
|
transition:transform .3s;
|
|
font-family:var(--font-serif);
|
|
}
|
|
.faq-item.open .faq-q::after{
|
|
transform:translateY(-50%) rotate(45deg);
|
|
color:var(--accent);
|
|
}
|
|
.faq-a{
|
|
max-height:0;
|
|
overflow:hidden;
|
|
transition:max-height .35s ease,padding .35s ease;
|
|
}
|
|
.faq-a-inner{
|
|
padding:0 0 18px;
|
|
font-size:.85rem;
|
|
color:var(--text-muted);
|
|
line-height:1.7;
|
|
}
|
|
.faq-item.open .faq-a{max-height:400px}
|
|
|
|
/* ============================================
|
|
SECTION 6 — CLOSE
|
|
============================================ */
|
|
.close{
|
|
padding:80px 0;
|
|
text-align:center;
|
|
}
|
|
.close h2{
|
|
font-family:var(--font-serif);
|
|
font-size:clamp(1.5rem,2.5vw,2rem);
|
|
font-weight:400;
|
|
letter-spacing:-.01em;
|
|
margin-bottom:10px;
|
|
}
|
|
.close p{
|
|
color:var(--text-muted);
|
|
margin-bottom:28px;
|
|
font-size:.95rem;
|
|
}
|
|
.close .opening-form{margin:0 auto}
|
|
.close .opening-note{margin-top:14px}
|
|
|
|
/* ============================================
|
|
TOAST
|
|
============================================ */
|
|
.toast{
|
|
position:fixed;
|
|
top:74px;
|
|
left:50%;
|
|
transform:translateX(-50%) translateY(-16px);
|
|
background:var(--bg-elevated);
|
|
border:1px solid var(--accent-dim);
|
|
color:var(--accent);
|
|
padding:12px 22px;
|
|
border-radius:5px;
|
|
font-size:.875rem;
|
|
font-weight:500;
|
|
z-index:200;
|
|
opacity:0;
|
|
pointer-events:none;
|
|
transition:opacity .3s,transform .3s;
|
|
}
|
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
|
|
|
|
/* ============================================
|
|
FOOTER
|
|
============================================ */
|
|
footer{
|
|
padding:36px 0;
|
|
}
|
|
footer .container{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
gap:12px;
|
|
}
|
|
footer span{font-size:.8rem;color:var(--text-dim)}
|
|
footer a{font-size:.8rem;color:var(--text-muted);transition:color .2s}
|
|
footer a:hover{color:var(--text)}
|
|
|
|
/* ============================================
|
|
RESPONSIVE
|
|
============================================ */
|
|
@media(max-width:820px){
|
|
.what-you-get .grid{grid-template-columns:1fr;gap:36px}
|
|
.infrastructure .container-narrow{grid-template-columns:1fr;gap:24px}
|
|
.plans-grid{grid-template-columns:1fr;gap:20px}
|
|
.opening{padding:130px 0 60px}
|
|
.opening h1{font-size:2.2rem}
|
|
.nav-links{display:none}
|
|
.menu-toggle{display:block}
|
|
.opening-form{flex-direction:column}
|
|
section{padding:70px 0}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="container">
|
|
<a href="#" class="logo">PA<em>aaS</em></a>
|
|
<div class="nav-links">
|
|
<a href="#what-you-get">What you get</a>
|
|
<a href="#plans">Plans</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a href="#signup" class="nav-cta">Join waitlist</a>
|
|
</div>
|
|
<button class="menu-toggle" onclick="document.querySelector('.nav-links').style.display=document.querySelector('.nav-links').style.display==='flex'?'none':'flex'" aria-label="Toggle menu">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- TOAST -->
|
|
<div class="toast" id="toast">✓ You're on the list. We'll be in touch.</div>
|
|
|
|
<!-- SECTION 1: OPENING -->
|
|
<section class="opening" id="signup">
|
|
<div class="container">
|
|
<div class="content fade-up">
|
|
<h1>Your own private<br><span class="accent">AI agent workspace.</span></h1>
|
|
<p class="lede">
|
|
Isolated private compute. Persistent memory. Specialist agent teams coordinated via Kanban. Your data stays private — never used for training or shared. From $99/month.
|
|
</p>
|
|
<form class="opening-form" onsubmit="return handleSignup(event)">
|
|
<input type="email" placeholder="you@example.com" required autocomplete="email">
|
|
<button type="submit" class="btn-accent">Join waitlist</button>
|
|
</form>
|
|
<p class="opening-note">No credit card needed · Rolling out Q2 2026</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 2: WHAT YOU GET (asymmetric editorial) -->
|
|
<section class="what-you-get" id="what-you-get">
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="intro fade-up">
|
|
<h2>Infrastructure without the overhead.</h2>
|
|
<p>
|
|
Every AgentForge workspace is purpose-built for running AI agents. Your Hermes or
|
|
OpenClaw agent runs 24/7 with automatic health monitoring and restarts. Your data
|
|
lives in a managed PostgreSQL database with pgVector extensions — ready for
|
|
semantic search, RAG pipelines, and agent memory. Everything sits on Google
|
|
Kubernetes Engine with GPU pass-through, fully isolated from other workspaces.
|
|
</p>
|
|
</div>
|
|
<div class="detail-list fade-up">
|
|
<div class="detail-item">
|
|
<div class="label">Compute</div>
|
|
<div class="value">High-performance GPU access<br><span class="sub">Priority queue placement, enterprise-grade GPUs on GKE</span></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="label">Agent</div>
|
|
<div class="value">Managed Hermes or OpenClaw 24/7<br><span class="sub">Auto-restart, health monitoring, zero-config deploy</span></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="label">Storage</div>
|
|
<div class="value">PostgreSQL with pgVector<br><span class="sub">10GB Standard, 50GB Heavy — daily backups, PITR, pre-configured</span></div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="label">Isolation</div>
|
|
<div class="value">Containerized on GKE<br><span class="sub">No multi-tenancy, no data sharing. Your compute, your rules.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 3: INFRASTRUCTURE NARRATIVE -->
|
|
<section class="infrastructure">
|
|
<div class="container-narrow">
|
|
<div class="fade-up">
|
|
<h2>Built on <em>GKE</em>,<br>designed for agents.</h2>
|
|
</div>
|
|
<div class="fade-up">
|
|
<p>
|
|
We handle the stack so you don't have to. <strong>GPU provisioning</strong>, cluster management,
|
|
agent lifecycle, database maintenance, TLS, monitoring — it's all included.
|
|
You bring your models, your prompts, and your ideas. We keep the infrastructure
|
|
running and the bills predictable.
|
|
</p>
|
|
<p style="margin-top:16px">
|
|
Every workspace ships with a pre-configured Hermes agent, a PostgreSQL database
|
|
with pgVector for vector search, and priority access to NVIDIA GPUs on GKE.
|
|
Optional web hosting with custom domains and CDN for serving agent-facing UIs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 4: PLANS -->
|
|
<section class="plans" id="plans">
|
|
<div class="container">
|
|
<div class="plans-head fade-up">
|
|
<div class="overline">Plans</div>
|
|
<h2>Two tiers, one promise.</h2>
|
|
<p>No surprises, no lock-in. Cancel anytime, keep access through the billing period.</p>
|
|
</div>
|
|
<div class="plans-grid">
|
|
<div class="plan-card fade-up">
|
|
<div class="plan-name">Standard</div>
|
|
<div class="plan-price"><span class="dollar">$</span>100<span class="period"> /mo</span></div>
|
|
<p class="plan-desc">For a single AI agent with moderate workloads.</p>
|
|
<ul class="plan-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
High-performance GPU access
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Managed Hermes agent, always on
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
PostgreSQL with pgVector (10GB)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
GKE container isolation
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Daily backups & monitoring
|
|
</li>
|
|
<li class="disabled">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
Optional web hosting
|
|
</li>
|
|
<li class="disabled">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
Custom domain + CDN
|
|
</li>
|
|
</ul>
|
|
<a href="#signup" class="btn-accent">Join waitlist</a>
|
|
</div>
|
|
|
|
<div class="plan-card heavy fade-up">
|
|
<div class="plan-name">Heavy</div>
|
|
<div class="plan-price"><span class="dollar">$</span>200<span class="period"> /mo</span></div>
|
|
<p class="plan-desc">For training, serving, and multi-agent workloads.</p>
|
|
<ul class="plan-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Priority GPU access queue
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Managed Hermes or OpenClaw agent
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
PostgreSQL with pgVector (50GB)
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
GKE container isolation
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Real-time backups & monitoring
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Optional web hosting + custom domains
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
CDN, TLS, and priority support
|
|
</li>
|
|
</ul>
|
|
<a href="#signup" class="btn-accent">Join waitlist</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 5: FAQ -->
|
|
<section class="faq" id="faq">
|
|
<div class="container-narrow">
|
|
<h2 class="fade-up">Common questions</h2>
|
|
<div class="faq-list fade-up">
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">What exactly comes with my workspace?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">A fully isolated container on GKE with GPU access, a managed Hermes or OpenClaw agent running 24/7, a PostgreSQL database with pgVector, daily backups, and monitoring. Everything pre-configured and ready to use from day one.</div></div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">What's the difference between Standard and Heavy?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">Standard gives you shared GPU access and 10GB database storage — great for a single agent. Heavy gives you priority GPU queue placement, 50GB storage, optional web hosting with custom domains, CDN, and priority support. If you're training or serving at scale, go Heavy.</div></div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">Can I deploy my own models?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">Yes. Your workspace is fully yours — install anything, run fine-tuning jobs, host inference endpoints. You have full container-level access.</div></div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">When will I get access?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">We're rolling out in waves starting Q2 2026. Earlier signups get priority placement. If you join the waitlist today, you'll be among the first to know when your slot opens.</div></div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">Can I cancel?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">Absolutely. No lock-in, no contracts. Cancel whenever — you keep access through the end of your billing period.</div></div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">Where is the infrastructure hosted?</button>
|
|
<div class="faq-a"><div class="faq-a-inner">All workspaces run on Google Kubernetes Engine in US-based regions. Every workspace is containerized and isolated — your data never shares an environment with another customer.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 6: CLOSE -->
|
|
<section class="close" id="signup-bottom">
|
|
<div class="container-narrow fade-up">
|
|
<h2>Ready to forge your own agent workspace?</h2>
|
|
<p>Priority GPU access, managed Hermes agent, persistent PostgreSQL. From $100/mo.</p>
|
|
<form class="opening-form" onsubmit="return handleSignup(event)">
|
|
<input type="email" placeholder="you@example.com" required autocomplete="email">
|
|
<button type="submit" class="btn-accent">Join waitlist</button>
|
|
</form>
|
|
<p class="opening-note">Limited spots · No credit card required</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="container">
|
|
<span>© 2026 AgentForge. All rights reserved.</span>
|
|
<div style="display:flex;gap:20px">
|
|
<a href="#">Privacy</a>
|
|
<a href="#">Terms</a>
|
|
<a href="https://x.com" target="_blank" rel="noopener" aria-label="Twitter / X">Twitter/X</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// === FAQ toggle ===
|
|
function toggleFaq(btn){
|
|
var item=btn.parentElement;
|
|
var wasOpen=item.classList.contains('open');
|
|
document.querySelectorAll('.faq-item.open').forEach(function(i){i.classList.remove('open')});
|
|
if(!wasOpen)item.classList.add('open');
|
|
}
|
|
|
|
// === Signup handler ===
|
|
async function handleSignup(e){
|
|
e.preventDefault();
|
|
var form=e.target;
|
|
var input=form.querySelector('input[type="email"]');
|
|
var email=input.value.trim();
|
|
if(!email)return false;
|
|
|
|
var btn=form.querySelector('button[type="submit"]');
|
|
var orig=btn.textContent;
|
|
btn.textContent='Submitting...';
|
|
btn.disabled=true;
|
|
|
|
try{
|
|
var resp = await fetch('/api/waitlist',{
|
|
method:'POST',
|
|
headers:{'Content-Type':'application/json'},
|
|
body:JSON.stringify({email:email,source:'agentforge-landing'})
|
|
});
|
|
|
|
if(resp.ok){
|
|
btn.textContent=orig;
|
|
btn.disabled=false;
|
|
input.value='';
|
|
|
|
var toast=document.getElementById('toast');
|
|
toast.textContent='You are on the list!';
|
|
toast.classList.add('show');
|
|
setTimeout(function(){toast.classList.remove('show')},3500);
|
|
}else{
|
|
throw new Error(resp.status===409?'already registered':'server error');
|
|
}
|
|
}catch(err){
|
|
btn.textContent=orig;
|
|
btn.disabled=false;
|
|
|
|
var toast=document.getElementById('toast');
|
|
toast.textContent=err.message==='already registered'
|
|
?'You are already on the list!'
|
|
:'Something went wrong. Try again.';
|
|
toast.classList.add('show');
|
|
setTimeout(function(){toast.classList.remove('show')},3500);
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// === Scroll fade-in ===
|
|
(function(){
|
|
var observer=new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){
|
|
if(e.isIntersecting){
|
|
e.target.classList.add('visible');
|
|
observer.unobserve(e.target);
|
|
}
|
|
});
|
|
},{threshold:0.1,rootMargin:'0px 0px -40px 0px'});
|
|
document.querySelectorAll('.fade-up').forEach(function(el){observer.observe(el)});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!-- ci trigger 1783449907 -->
|
|
<!-- ci 1783450019 -->
|
|
<!-- ci 1783450078 -->
|
|
<!-- ci 1783450170 -->
|
|
<!-- ci 1783450228 -->
|
|
<!-- ci 1783450295 -->
|
|
<!-- ci 1783450378 -->
|
|
<!-- ci 1783450443 -->
|
|
<!-- final 1783450781 -->
|