Files

597 lines
20 KiB
HTML
Raw Permalink 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 — 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=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">
<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>Right now, 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>Today, every member gets a $15 monthly credit for chat and API alike, whether you pay $10 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=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>