paaas/index.html
sirius f5d89fd240
Some checks failed
build-and-deploy / build (push) Failing after 15s
pubreg test
2026-07-07 14:58:36 -04:00

831 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 &middot; 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 &amp; 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 &amp; 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 &middot; No credit card required</p>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<span>&copy; 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 -->
<!-- pubreg 1783450862 -->