Files
website/index.html
T

597 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inference Cooperative — 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 — 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:image" content="https://inference.coop/inference-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://inference.coop/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Inference Cooperative — AI, governed together">
<meta name="twitter:description" content="A member-governed cooperative for AI inference. Direct the models, the values, and the direction — together.">
<meta name="twitter:image" content="https://inference.coop/inference-card.png">
<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;
--earth-red: #a04b3a;
--earth-red-wash: #f3e6e1;
--bronze: #a97a4a;
--bronze-wash: #f1e8da;
}
* { 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); }
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);
}
.tag--red { background: var(--earth-red-wash); color: var(--earth-red); }
.tag--bronze { background: var(--bronze-wash); color: var(--bronze); }
.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); }
/* ---------- 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);
}
/* ---------- 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) {
.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; }
}
/* Decorative dots: light green + bronze, varied sizes, scattered across the
page background. Implemented as a fixed full-viewport SVG layer behind
content (pointer-events: none, very low contrast so text stays readable).
Echoes the logo's pine-silhouette dot motif. */
.bg-dots {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.bg-dots circle {
opacity: 0.28;
}
.bg-dots .big { opacity: 0.22; }
/* Parallax: dots scroll at a fraction of page speed (JS below) */
.bg-dots {
will-change: transform;
}
.wrap, header.site-header, section, footer {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<!-- Decorative background dots (logo motif echo) -->
<svg class="bg-dots" aria-hidden="true">
<!-- scattered greens: light + a few big soft ones -->
<circle cx="4%" cy="12%" r="5" fill="#a8cdb4"/>
<circle cx="12%" cy="34%" r="4" fill="#b5d4c0"/>
<circle cx="7%" cy="58%" r="16" class="big" fill="#b7d8c2"/>
<circle cx="16%" cy="78%" r="5" fill="#a8cdb4"/>
<circle cx="24%" cy="6%" r="9" fill="#b7d8c2"/>
<circle cx="31%" cy="22%" r="4" fill="#b5d4c0"/>
<circle cx="28%" cy="52%" r="20" class="big" fill="#bfdccd"/>
<circle cx="38%" cy="70%" r="5" fill="#a8cdb4"/>
<circle cx="47%" cy="10%" r="6" fill="#b7d8c2"/>
<circle cx="55%" cy="30%" r="24" class="big" fill="#bfdccd"/>
<circle cx="52%" cy="55%" r="4" fill="#a8cdb4"/>
<circle cx="63%" cy="14%" r="5" fill="#b5d4c0"/>
<circle cx="68%" cy="42%" r="18" class="big" fill="#b7d8c2"/>
<circle cx="61%" cy="66%" r="6" fill="#bfdccd"/>
<circle cx="72%" cy="58%" r="4" fill="#b5d4c0"/>
<circle cx="78%" cy="8%" r="8" fill="#a8cdb4"/>
<circle cx="83%" cy="26%" r="4" fill="#b5d4c0"/>
<circle cx="76%" cy="48%" r="6" fill="#bfdccd"/>
<circle cx="86%" cy="38%" r="22" class="big" fill="#b7d8c2"/>
<circle cx="93%" cy="16%" r="5" fill="#a8cdb4"/>
<circle cx="90%" cy="60%" r="4" fill="#b5d4c0"/>
<circle cx="81%" cy="72%" r="17" class="big" fill="#bfdccd"/>
<circle cx="95%" cy="46%" r="4" fill="#b5d4c0"/>
<circle cx="89%" cy="86%" r="5" fill="#a8cdb4"/>
<circle cx="9%" cy="88%" r="16" class="big" fill="#b7d8c2"/>
<circle cx="40%" cy="88%" r="4" fill="#b5d4c0"/>
<circle cx="57%" cy="84%" r="5" fill="#a8cdb4"/>
<circle cx="70%" cy="80%" r="18" class="big" fill="#bfdccd"/>
<!-- bronze accents, sparser -->
<circle cx="20%" cy="44%" r="5" fill="#d9c3a8"/>
<circle cx="44%" cy="38%" r="4" fill="#e0cbb2"/>
<circle cx="66%" cy="30%" r="18" class="big" fill="#d9c3a8"/>
<circle cx="87%" cy="70%" r="5" fill="#e0cbb2"/>
<circle cx="33%" cy="76%" r="4" fill="#d9c3a8"/>
<circle cx="58%" cy="72%" r="5" fill="#e0cbb2"/>
<circle cx="97%" cy="78%" r="6" fill="#d9c3a8"/>
<circle cx="3%" cy="72%" r="4" fill="#e0cbb2"/>
</svg>
<script>
// Gentle parallax: the dot layer scrolls at ~12% of page speed and drifts
// slightly sideways, so the background feels alive without distracting.
(function () {
var el = document.querySelector('.bg-dots');
if (!el) return;
var ticking = false;
window.addEventListener('scroll', function () {
if (ticking) return;
ticking = true;
requestAnimationFrame(function () {
var y = window.scrollY || 0;
el.style.transform = 'translateY(' + (y * -0.12) + 'px)';
ticking = false;
});
}, { passive: true });
})();
</script>
<!-- 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">AI, governed together.</p>
<p class="sub">We don't have to accept the choices Big Tech gives us. We can make our own.</p>
<div class="features">
<span class="tag">Member-governed</span>
<span class="tag">Open source</span>
<span class="tag tag--red">Privacy options</span>
<span class="tag tag--bronze">Renewable options</span>
</div>
<div class="cta-row">
<a class="cta" href="https://opencollective.com/inference-cooperative/contribute/sponsors-105477/checkout?interval=month&amount=5">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">
<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 first for their shareholders' profit.</p>
<p>We think that's backwards. A tool this consequential should answer to the people who use it. So we're enabling access to AI on the users' terms.</p>
</div>
</section>
<!-- Membership -->
<section>
<div class="wrap">
<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 starting at $5 a month — you choose the amount that fits your circumstances. (Many members pay $15.)</p>
</div>
<div class="mcard">
<h3>Everyone gets the same allowance</h3>
<p>Today, every member gets a $15 monthly credit for chat and API alike, whether you pay $5 or $20.</p>
</div>
<div class="mcard">
<h3>Need more? Add credits</h3>
<p>When the allowance isn't enough, buy a credit pack. Credits never expire, carry over month to month, and kick in only after your allowance is used.</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>
<p class="value-note">Pricing is itself a co-op decision. As usage grows, the current scale will need to change — and members will decide how, together.</p>
</div>
</section>
<!-- Values / usage -->
<section class="alt">
<div class="wrap">
<h2>Choose by what you value.</h2>
<p class="lede">Different members care about different things. So we let you choose your AI by the values that matter 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="#a04b3a" stroke-width="1.6"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#b3543a" 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="#a97a4a" stroke-width="1.6"/>
<path d="M12 4v8l4 2" stroke="#b98a55" 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.</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>
<!-- 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=5">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>