Files
website/index.html
T

691 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inference Cooperative — Our AI, governed together</title>
<meta name="description" content="A member-governed cooperative for AI inference. Direct the models, the values, and the direction — together.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://inference.coop/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Inference Cooperative">
<meta property="og:title" content="Inference Cooperative — Our AI, governed together">
<meta property="og:description" content="A member-governed cooperative for AI inference. Direct the models, the values, and the direction — together.">
<meta property="og:url" content="https://inference.coop/">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Inference Cooperative — Our AI, governed together">
<meta name="twitter:description" content="A member-governed cooperative for AI inference. Direct the models, the values, and the direction — together.">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Inference Cooperative",
"url": "https://inference.coop/",
"email": "info@inference.coop",
"description": "A member-governed cooperative for AI inference. Direct the models, the values, and the direction — together."
}
</script>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/figtree-400.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/figtree-500.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/figtree-600.woff2') format('woff2');
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/figtree-700.woff2') format('woff2');
}
:root {
--cream: #faf8f5;
--white: #ffffff;
--ink: #2d3327;
--muted: #6b7a62;
--light-muted: #94a08c;
--green-deep: #5b8c5a;
--green-mid: #6ba86b;
--green-light: #7ab87a;
--border: #e8e2d8;
--wash: #eef4ea;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--cream);
color: var(--ink);
font-family: 'Figtree', sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 32px;
}
section { padding: 72px 0; }
section.alt { background: var(--wash); }
.kicker {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--green-deep);
margin-bottom: 14px;
}
h2 {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 16px;
}
.lede {
font-size: 19px;
font-weight: 500;
color: var(--muted);
max-width: 680px;
margin-bottom: 40px;
}
/* ---------- Hero ---------- */
.hero {
text-align: center;
padding: 88px 0 64px;
}
.hero .logo { margin-bottom: 28px; }
.hero h1 {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.hero .url {
font-size: 16px;
font-weight: 500;
color: var(--green-deep);
margin-bottom: 24px;
}
.hero .tagline {
font-size: 24px;
font-weight: 500;
color: var(--ink);
max-width: 660px;
margin: 0 auto 16px;
line-height: 1.4;
}
.hero .sub {
font-size: 17px;
color: var(--muted);
max-width: 640px;
margin: 0 auto 40px;
}
.features {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 44px;
}
.tag {
display: inline-block;
padding: 8px 18px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
background: #e8f5e8;
color: var(--green-deep);
}
.cta-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.cta {
display: inline-block;
padding: 15px 38px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
background: var(--green-deep);
color: var(--white);
transition: opacity 0.2s;
}
.cta:hover { opacity: 0.9; text-decoration: none; }
.cta-secondary {
display: inline-block;
padding: 15px 38px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
background: transparent;
color: var(--green-deep);
border: 2px solid var(--green-deep);
transition: background 0.2s;
}
.cta-secondary:hover { background: #e8f5e8; text-decoration: none; }
/* ---------- Why ---------- */
.why { text-align: center; }
.why p {
font-size: 18px;
color: var(--ink);
max-width: 720px;
margin: 0 auto;
}
.why p + p { margin-top: 18px; color: var(--muted); }
/* ---------- Cogovernance ---------- */
.cogov-grid {
display: flex;
gap: 56px;
align-items: center;
}
.cogov-copy { flex: 1 1 55%; }
.cogov-copy p {
font-size: 17px;
color: var(--muted);
margin-bottom: 24px;
}
.decide-list { list-style: none; margin-bottom: 28px; }
.decide-list li {
font-size: 16px;
padding: 10px 0 10px 30px;
position: relative;
color: var(--ink);
}
.decide-list li::before {
content: "";
position: absolute;
left: 0;
top: 16px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green-mid);
}
.cogov-visual { flex: 0 0 260px; text-align: center; }
.cogov-visual svg { display: block; margin: 0 auto; }
.cogov-visual .caption {
font-size: 13px;
color: var(--light-muted);
margin-top: 10px;
}
.flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.flow-step {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 20px;
}
.flow-step .num {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--green-deep);
margin-bottom: 8px;
}
.flow-step h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.flow-step p { font-size: 14px; color: var(--muted); }
/* ---------- Membership ---------- */
.membership-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.mcard {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
}
.mcard h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.mcard p { font-size: 15px; color: var(--muted); }
/* ---------- Values ---------- */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.value-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 28px;
}
.value-card .icon { margin-bottom: 18px; }
.value-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.value-card p { font-size: 15px; color: var(--muted); }
.value-note {
font-size: 15px;
color: var(--muted);
margin-top: 28px;
text-align: center;
}
.use-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.use-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px 28px;
}
.use-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.use-card p { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.use-card ul { list-style: none; }
.use-card li {
font-size: 15px;
color: var(--ink);
padding: 6px 0 6px 24px;
position: relative;
}
.use-card li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-mid);
}
/* ---------- Built ---------- */
.built p {
font-size: 17px;
color: var(--muted);
max-width: 680px;
}
.built ul { list-style: none; margin-top: 24px; }
.built li {
font-size: 16px;
padding: 8px 0 8px 28px;
position: relative;
color: var(--ink);
}
.built li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green-mid);
}
/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final h2 { margin-bottom: 8px; }
.final p { font-size: 17px; color: var(--muted); margin-bottom: 32px; }
/* ---------- Footer ---------- */
.footer {
padding: 40px 0 56px;
text-align: center;
font-size: 13px;
color: var(--light-muted);
border-top: 1px solid var(--border);
}
.footer .made-for {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
color: var(--muted);
margin-bottom: 16px;
}
.footer .made-for img {
width: 18px;
height: 18px;
border-radius: 50%;
vertical-align: middle;
}
.footer .made-for a { color: var(--green-deep); font-weight: 600; }
.footer .links {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.footer .links a { color: var(--muted); }
.footer .links a:hover { text-decoration: underline; }
@media (max-width: 840px) {
.cogov-grid { flex-direction: column; }
.cogov-visual { order: -1; flex-basis: auto; }
.flow { grid-template-columns: repeat(2, 1fr); }
.values-grid, .use-grid, .membership-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
section { padding: 52px 0; }
h2 { font-size: 27px; }
.hero h1 { font-size: 36px; }
.flow { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Hero -->
<section class="hero">
<div class="wrap">
<div class="logo">
<svg width="120" height="120" viewBox="0 0 130 130" fill="none" aria-label="Inference Cooperative logo">
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
<circle cx="51.5" cy="46" r="6.5" fill="#5b8c5a"/>
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
<circle cx="81" cy="46" r="4" fill="#6ba86b"/>
<circle cx="44" cy="62" r="7" fill="#6ba86b"/>
<circle cx="61" cy="62" r="5.5" fill="#5b8c5a"/>
<circle cx="76" cy="62" r="4.5" fill="#7ab87a"/>
<circle cx="89.5" cy="62" r="3.5" fill="#6ba86b"/>
<circle cx="36.5" cy="78" r="7.5" fill="#5b8c5a"/>
<circle cx="54" cy="78" r="6" fill="#7ab87a"/>
<circle cx="70" cy="78" r="5" fill="#6ba86b"/>
<circle cx="84" cy="78" r="4" fill="#5b8c5a"/>
<circle cx="97.5" cy="78" r="3.5" fill="#7ab87a"/>
<circle cx="44" cy="94" r="6.5" fill="#6ba86b"/>
<circle cx="61" cy="94" r="5.5" fill="#5b8c5a"/>
<circle cx="76" cy="94" r="4.5" fill="#7ab87a"/>
<circle cx="89.5" cy="94" r="3.5" fill="#6ba86b"/>
<circle cx="51.5" cy="110" r="5.5" fill="#5b8c5a"/>
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
<circle cx="81" cy="110" r="3.5" fill="#6ba86b"/>
</svg>
</div>
<h1>Inference Cooperative</h1>
<div class="url">inference.coop</div>
<p class="tagline">Our AI, governed together.</p>
<p class="sub">A member-governed cooperative for AI — where the people who use the models also direct them.</p>
<div class="features">
<span class="tag">Member-governed</span>
<span class="tag">Open source</span>
<span class="tag">Privacy options</span>
<span class="tag">Renewable options</span>
</div>
<div class="cta-row">
<a class="cta" href="https://opencollective.com/inference-cooperative/contribute/sponsors-105477/checkout?interval=month&amount=15">Become a member</a>
<a class="cta-secondary" href="https://my.inference.coop">Member login</a>
</div>
</div>
</section>
<!-- Why we exist -->
<section class="why alt">
<div class="wrap">
<div class="kicker">Why we exist</div>
<h2>AI is becoming infrastructure.</h2>
<p>The models shaping how we work, learn, and talk are owned by a handful of companies — and governed by no one in particular.</p>
<p>We think that's backwards. A tool this consequential should answer to the people who use it. So we're building AI the way we build public institutions: directed by its members, not by shareholders.</p>
</div>
</section>
<!-- Cogovernance -->
<section>
<div class="wrap">
<div class="kicker">Cogovernance</div>
<h2>You don't just use it. You help run it.</h2>
<p class="lede">Membership isn't a subscription to a service. It's a seat in a shared institution. When a question comes up, members weigh in, deliberate in the open, and help steer the co-op.</p>
<div class="cogov-grid">
<div class="cogov-copy">
<p>Here's the kind of thing members shape together:</p>
<ul class="decide-list">
<li>Which models and providers we carry</li>
<li>What we charge, and the monthly allowance</li>
<li>How we handle privacy, energy, and sovereignty</li>
<li>What we build next — and why</li>
</ul>
</div>
<div class="cogov-visual">
<svg width="240" height="240" viewBox="0 0 130 130" fill="none" aria-label="Members gathered around a shared decision">
<circle cx="65" cy="65" r="13" fill="#5b8c5a"/>
<circle cx="65" cy="65" r="5" fill="#ffffff"/>
<line x1="65" y1="65" x2="113" y2="65" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="109.3" y2="83.4" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="98.9" y2="98.9" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="83.4" y2="109.3" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="65" y2="113" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="46.6" y2="109.3" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="31.1" y2="98.9" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="20.7" y2="83.4" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="17" y2="65" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="20.7" y2="46.6" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="31.1" y2="31.1" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="46.6" y2="20.7" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="65" y2="17" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="83.4" y2="20.7" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="98.9" y2="31.1" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<line x1="65" y1="65" x2="109.3" y2="46.6" stroke="#7ab87a" stroke-width="0.8" opacity="0.5"/>
<circle cx="113" cy="65" r="4" fill="#6ba86b"/>
<circle cx="109.3" cy="83.4" r="4" fill="#7ab87a"/>
<circle cx="98.9" cy="98.9" r="4" fill="#6ba86b"/>
<circle cx="83.4" cy="109.3" r="4" fill="#7ab87a"/>
<circle cx="65" cy="113" r="4" fill="#6ba86b"/>
<circle cx="46.6" cy="109.3" r="4" fill="#7ab87a"/>
<circle cx="31.1" cy="98.9" r="4" fill="#6ba86b"/>
<circle cx="20.7" cy="83.4" r="4" fill="#7ab87a"/>
<circle cx="17" cy="65" r="4" fill="#6ba86b"/>
<circle cx="20.7" cy="46.6" r="4" fill="#7ab87a"/>
<circle cx="31.1" cy="31.1" r="4" fill="#6ba86b"/>
<circle cx="46.6" cy="20.7" r="4" fill="#7ab87a"/>
<circle cx="65" cy="17" r="4" fill="#6ba86b"/>
<circle cx="83.4" cy="20.7" r="4" fill="#7ab87a"/>
<circle cx="98.9" cy="31.1" r="4" fill="#6ba86b"/>
<circle cx="109.3" cy="46.6" r="4" fill="#7ab87a"/>
</svg>
<div class="caption">Members, gathered around a shared decision</div>
</div>
</div>
<div class="flow">
<div class="flow-step">
<div class="num">1</div>
<h3>Propose</h3>
<p>Any member opens an idea on the forum or the support repo.</p>
</div>
<div class="flow-step">
<div class="num">2</div>
<h3>Deliberate</h3>
<p>Members discuss it in the open, on Loomio.</p>
</div>
<div class="flow-step">
<div class="num">3</div>
<h3>Decide</h3>
<p>The co-op weighs in and reaches a decision together.</p>
</div>
<div class="flow-step">
<div class="num">4</div>
<h3>Ship</h3>
<p>It goes live in the stack, tracked in our open repos.</p>
</div>
</div>
</div>
</section>
<!-- Membership -->
<section class="alt">
<div class="wrap">
<div class="kicker">Membership</div>
<h2>One membership. A fair price, a full seat.</h2>
<p class="lede">Everyone joins the same way, and everyone gets the same things — the difference is what you can afford to give, not what you get back.</p>
<div class="membership-grid">
<div class="mcard">
<h3>Pay what's fair</h3>
<p>Dues are a sliding scale of $10–20 a month. You choose the amount that fits your circumstances.</p>
</div>
<div class="mcard">
<h3>Everyone gets the same allowance</h3>
<p>A monthly credit of $15 for chat and API alike, whether you pay $10 or $20.</p>
</div>
<div class="mcard">
<h3>Chat, API, and a vote</h3>
<p>One membership opens the chat, the developer API, and a seat in governance.</p>
</div>
<div class="mcard">
<h3>Leave any time</h3>
<p>Cancel whenever you like. Your data stays yours.</p>
</div>
</div>
</div>
</section>
<!-- Values / usage -->
<section>
<div class="wrap">
<div class="kicker">How you use it</div>
<h2>Choose by what you value.</h2>
<p class="lede">Different members care about different things. So we let you route your AI by the value that matters to you — not lock you to a single provider.</p>
<div class="values-grid">
<div class="value-card">
<div class="icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<rect x="4" y="10" width="16" height="10" rx="2" stroke="#5b8c5a" stroke-width="1.6"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#6ba86b" stroke-width="1.6"/>
</svg>
</div>
<h3>Privacy</h3>
<p>Models running in encrypted enclaves, so even we can't read your prompts or responses.</p>
</div>
<div class="value-card">
<div class="icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke="#6ba86b" stroke-width="1.6" stroke-linecap="round"/>
<circle cx="12" cy="12" r="3.5" stroke="#5b8c5a" stroke-width="1.6"/>
</svg>
</div>
<h3>Renewable energy</h3>
<p>Models served on 100% renewable power, for members who want their AI to be lighter on the planet.</p>
</div>
<div class="value-card">
<div class="icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="12" cy="12" r="8" stroke="#5b8c5a" stroke-width="1.6"/>
<path d="M12 4v8l4 2" stroke="#7ab87a" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</div>
<h3>Publicly developed</h3>
<p>Open, sovereign models built as public goods rather than proprietary products.</p>
</div>
</div>
<p class="value-note">The exact lineup changes as the co-op decides. The choice — yours, every time — doesn't.</p>
<div class="use-grid">
<div class="use-card">
<h3>Chat</h3>
<p>Your own chat, tuned to the value you pick.</p>
<ul>
<li>Web search built in</li>
<li>File uploads &amp; documents</li>
<li>Pick the model and provider each time</li>
</ul>
</div>
<div class="use-card">
<h3>Developer API</h3>
<p>Bring your own tools, through a standard endpoint.</p>
<ul>
<li>OpenAI-compatible</li>
<li>Your own API keys</li>
<li>Shares the same monthly allowance</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Built the cooperative way -->
<section class="alt">
<div class="wrap built">
<div class="kicker">How it's built</div>
<h2>Built the cooperative way.</h2>
<p>Everything we run is self-hosted, open source, and free of external dependencies — so the co-op controls its own stack, and members can see exactly how it works.</p>
<ul>
<li>Self-hosted on our own infrastructure</li>
<li>Open source — the code and docs are public</li>
<li>We don't train on your data</li>
<li>Fiscally sponsored by Metagov, funded through Open Collective</li>
</ul>
</div>
</section>
<!-- Final CTA -->
<section class="final">
<div class="wrap">
<h2>Help run the AI you use.</h2>
<p>Join the cooperative, and help decide where it goes next.</p>
<div class="cta-row">
<a class="cta" href="https://opencollective.com/inference-cooperative/contribute/sponsors-105477/checkout?interval=month&amount=15">Become a member</a>
<a class="cta-secondary" href="https://git.inference.coop/co-op/docs">Read the docs</a>
</div>
</div>
</section>
<footer class="footer">
<div class="made-for">
Made for <img src="metagov-earth.png" alt="the world"> by <a href="https://metagov.org">Metagov</a>
</div>
<div class="links">
<a href="mailto:info@inference.coop">info@inference.coop</a>
<span>·</span>
<a href="https://opencollective.com/inference-cooperative">Open Collective</a>
<span>·</span>
<a href="https://forum.inference.coop">Forum</a>
<span>·</span>
<a href="https://git.inference.coop/co-op/docs">Docs</a>
</div>
</footer>
</body>
</html>