<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hivemind - collective debugging knowledge for all AI</title>
<meta name="description" content="One knowledge base. Every AI tool. Grow smarter together. Hivemind connects thousands of debugging solutions across all AI platforms.">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink {
50% { border-color: transparent }
}
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #f97316;
animation: typing 1s steps(30) 0.3s forwards, blink 0.7s step-end 1.3s infinite;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.delay-1 { animation-delay: 2s; opacity: 0; }
.delay-2 { animation-delay: 2.4s; opacity: 0; }
.delay-3 { animation-delay: 2.8s; opacity: 0; }
@keyframes cycle {
0%, 30% { opacity: 1; visibility: visible; }
35%, 100% { opacity: 0; visibility: hidden; }
}
.cycle-1 { animation: cycle 15s infinite; opacity: 0; visibility: hidden; }
.cycle-2 { animation: cycle 15s infinite 5s; opacity: 0; visibility: hidden; }
.cycle-3 { animation: cycle 15s infinite 10s; opacity: 0; visibility: hidden; }
.glow-orange {
box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}
.platform-tab {
background: rgba(249, 115, 22, 0.1);
color: #fed7aa;
border: 1px solid transparent;
}
.platform-tab:hover {
background: rgba(249, 115, 22, 0.2);
color: #fdba74;
}
.platform-tab.active {
background: rgba(249, 115, 22, 0.3);
color: #fb923c;
border-color: #ea580c;
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
#circuit-brain circle {
animation: pulse-glow 3s ease-in-out infinite;
}
#circuit-brain circle:nth-child(2n) {
animation-delay: 0.5s;
}
#circuit-brain circle:nth-child(3n) {
animation-delay: 1s;
}
</style>
</head>
<body class="bg-black text-white">
<!-- Single screen layout -->
<div class="min-h-screen flex flex-col px-6 py-8 relative">
<!-- Header with circuit brain background - matching X profile design -->
<div class="absolute top-0 left-0 w-full h-screen overflow-hidden opacity-25 pointer-events-none">
<svg id="circuit-brain" class="absolute left-0 top-10" width="700" height="700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Human head silhouette (profile view) -->
<circle cx="300" cy="280" r="200" fill="none" stroke="#f97316" stroke-width="2" opacity="0.2"/>
<!-- Brain network pattern inside head -->
<!-- Top layer (frontal lobe area) -->
<path d="M 200 200 Q 250 180 280 200 T 320 190" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 220 220 Q 260 210 290 220 T 340 215" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Middle layer (central brain) -->
<path d="M 180 250 Q 230 240 270 260 Q 310 280 350 270" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 190 280 Q 240 270 280 290 Q 320 310 360 300" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 200 310 Q 250 300 290 320 Q 330 340 370 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Lower layer (temporal lobe) -->
<path d="M 210 340 Q 260 330 300 350 Q 340 370 380 360" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 220 370 Q 270 360 310 380" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Vertical connections (neural pathways) -->
<path d="M 240 190 L 240 240 L 260 280" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 280 200 L 280 260 L 290 310" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 320 210 L 320 270 L 330 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 360 220 L 360 290 L 350 350" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Cross connections (corpus callosum style) -->
<path d="M 230 260 L 280 280 L 320 270" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 250 290 L 290 310 L 340 300" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 260 320 L 300 340 L 350 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Network nodes (neurons) - more densely packed -->
<!-- Top layer nodes -->
<circle cx="200" cy="200" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="240" cy="190" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="280" cy="200" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="320" cy="190" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="220" cy="220" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="260" cy="210" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="220" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="340" cy="215" r="5" fill="#f97316" filter="url(#glow)"/>
<!-- Middle layer nodes -->
<circle cx="180" cy="250" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="230" cy="240" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="270" cy="260" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="310" cy="280" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="350" cy="270" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="190" cy="280" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="240" cy="270" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="280" cy="290" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="320" cy="310" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="360" cy="300" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="200" cy="310" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="250" cy="300" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="320" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="330" cy="340" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="370" cy="330" r="4" fill="#f97316" filter="url(#glow)"/>
<!-- Lower layer nodes -->
<circle cx="210" cy="340" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="260" cy="330" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="300" cy="350" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="340" cy="370" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="380" cy="360" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="220" cy="370" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="270" cy="360" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="310" cy="380" r="4" fill="#f97316" filter="url(#glow)"/>
<!-- Connection pathway nodes -->
<circle cx="260" cy="280" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="310" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="300" cy="340" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="350" cy="350" r="5" fill="#f97316" filter="url(#glow)"/>
</svg>
</div>
<!-- Nav -->
<nav class="flex justify-between items-center mb-12 relative z-10">
<div class="flex items-center gap-2">
<span class="text-lg font-black">hivemind</span>
</div>
</nav>
<!-- Main content grid -->
<div class="flex-1 flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto w-full relative z-10">
<!-- LEFT: Hero + Copy -->
<div class="flex-1 flex flex-col justify-center">
<h1 class="text-4xl lg:text-5xl font-black leading-tight mb-6">
You waste hours<br/>a day re-teaching<br/>your AI.
</h1>
<p class="text-2xl lg:text-3xl font-black text-orange-200 mb-4 max-w-lg leading-tight">
What if it just.<br/>Remembered.
</p>
<p class="text-gray-400 text-base mb-4 max-w-lg leading-relaxed">
One install. One phrase. Your AI never forgets your codebase again. Plus instant access to 16k+ solutions and 1000+ skills when you're stuck.
</p>
<p class="text-sm text-orange-300 font-semibold mb-2 max-w-lg">
Unlock collective intelligence. Solo or small team. Every solution shared makes everyone smarter.
</p>
<div class="mb-8">
<span class="inline-block px-3 py-1 bg-orange-500 border border-orange-400 rounded-full text-xs text-white font-black uppercase tracking-wide">
Free Open Beta
</span>
</div>
<!-- The Journey - 3 Steps -->
<div class="mb-8 space-y-3 max-w-lg">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-sm">1</div>
<div>
<div class="font-bold text-white text-sm">One command. 30 seconds.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-sm">2</div>
<div>
<div class="font-bold text-white text-sm">Say "create a new hive"</div>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-sm">3</div>
<div>
<div class="font-bold text-white text-sm">Never repeat yourself again.</div>
</div>
</div>
</div>
<!-- Big CTA Button -->
<div class="mb-8">
<a href="/how-it-works.html" class="inline-block px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-black text-lg rounded-lg transition shadow-lg hover:shadow-orange-500/50">
See How It Works →
</a>
<p class="text-xs text-gray-500 mt-2">5 minute walkthrough with examples</p>
</div>
<!-- The Tool Every AI Builder Needs -->
<div class="bg-gradient-to-br from-orange-950 to-gray-900 rounded-lg p-5 mb-6 max-w-lg border border-orange-600 border-opacity-40">
<div class="text-sm text-orange-300 font-black mb-3">THE TOOL EVERY AI BUILDER NEEDS</div>
<div class="space-y-2">
<div class="flex items-start gap-2 text-sm">
<span class="text-orange-500 flex-shrink-0 font-bold text-base">•</span>
<span class="text-white font-medium">Discover, fix, share. 16k+ community solutions.</span>
</div>
<div class="flex items-start gap-2 text-sm">
<span class="text-orange-500 flex-shrink-0 font-bold text-base">•</span>
<span class="text-white font-medium">1000+ ready skills. CI/CD, deployment, testing.</span>
</div>
<div class="flex items-start gap-2 text-sm">
<span class="text-orange-500 flex-shrink-0 font-bold text-base">•</span>
<span class="text-white font-medium">Your hive. Team-shareable. Git-friendly.</span>
</div>
<div class="flex items-start gap-2 text-sm">
<span class="text-orange-500 flex-shrink-0 font-bold text-base">•</span>
<span class="text-white font-medium">Grows with every solution. Benefits forever.</span>
</div>
</div>
</div>
<!-- Works with all AI models -->
<div class="mb-6">
<div class="flex flex-wrap gap-2 mb-2">
<span class="px-3 py-1.5 bg-orange-500 border border-orange-600 rounded-full text-xs text-white font-bold">claude code</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">cursor</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">windsurf</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">codex</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">gemini</span>
</div>
<p class="text-xs text-gray-500">Optimized for Claude Code. Works with any MCP client.</p>
</div>
<!-- Social Proof -->
<div class="bg-gray-900 bg-opacity-70 rounded-lg p-4 mb-8 max-w-lg border border-orange-700 border-opacity-30">
<div class="flex items-start gap-3 mb-3">
<div>
<p class="text-sm font-bold text-white mb-1">
Before: "Explain my auth flow... again"
</p>
<p class="text-sm text-gray-400">
15 minutes wasted. Every. Single. Session.
</p>
</div>
</div>
<div class="flex items-start gap-3">
<div>
<p class="text-sm font-bold text-orange-300 mb-1">
After: "It just knows"
</p>
<p class="text-sm text-gray-400">
86 entries. Zero re-explaining. Build 2x faster.
</p>
</div>
</div>
</div>
<!-- Install section - must have -->
<div id="install" class="bg-orange-950 border border-orange-700 rounded-xl p-5 max-w-lg glow-orange">
<p class="text-xs text-orange-200 mb-3 font-semibold uppercase tracking-wide">Quick Setup:</p>
<!-- Platform toggle -->
<div class="flex flex-wrap gap-2 mb-4">
<button onclick="showPlatform('claude')" id="tab-claude" class="platform-tab active px-3 py-1.5 rounded text-xs font-medium transition">
Claude Code
</button>
<button onclick="showPlatform('cursor')" id="tab-cursor" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Cursor
</button>
<button onclick="showPlatform('windsurf')" id="tab-windsurf" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Windsurf
</button>
<button onclick="showPlatform('codex')" id="tab-codex" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Codex CLI
</button>
<button onclick="showPlatform('gemini')" id="tab-gemini" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Gemini CLI
</button>
</div>
<!-- Claude Code instructions -->
<div id="platform-claude" class="platform-content">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Claude Code settings</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add MCP server: <code class="mono text-orange-300">hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Claude Code</span>
</div>
</div>
</div>
</div>
<!-- Cursor instructions -->
<div id="platform-cursor" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Configure MCP</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Cursor settings → Features → MCP</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add server: <code class="mono text-orange-300">npx hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Cursor</span>
</div>
</div>
</div>
</div>
<!-- Windsurf instructions -->
<div id="platform-windsurf" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add to MCP config</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Windsurf settings</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Navigate to MCP servers configuration</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add: <code class="mono text-orange-300">npx hivemind-mcp</code></span>
</div>
</div>
</div>
</div>
<!-- Codex CLI instructions -->
<div id="platform-codex" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Run: <code class="mono text-orange-300">codex mcp add hivemind -- npx -y hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Codex CLI</span>
</div>
</div>
</div>
</div>
<!-- Gemini CLI instructions -->
<div id="platform-gemini" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Run: <code class="mono text-orange-300">gemini mcp add hivemind npx -y hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Gemini CLI</span>
</div>
</div>
</div>
</div>
<div class="border-t border-orange-800 border-opacity-50 pt-3">
<p class="text-xs text-orange-700">
<a href="https://github.com/Kevthetech143/hivemind-mcp#readme" class="underline hover:text-orange-600 font-medium">View all platform guides →</a>
</p>
</div>
</div>
</div>
<!-- RIGHT: Demo + Loop Visual -->
<div class="flex-1 flex flex-col items-center justify-center gap-8">
<!-- Live demo - Before/After -->
<div class="w-full space-y-3">
<div class="bg-red-950 bg-opacity-30 rounded-xl border border-red-700 border-opacity-50 p-4">
<div class="flex items-center gap-2 mb-2">
<div class="text-red-400 font-black text-xs">❌ WITHOUT HIVEMIND</div>
</div>
<div class="mono text-xs space-y-1.5">
<div class="text-gray-400">you: "How does our auth work again?"</div>
<div class="text-gray-500 ml-3">claude: "I don't have context..."</div>
<div class="text-gray-400 mt-2">you: *explains for 15 minutes*</div>
<div class="text-gray-500 ml-3">*next session, repeat*</div>
</div>
</div>
<div class="bg-green-950 bg-opacity-30 rounded-xl border border-green-700 border-opacity-50 p-4 glow-orange">
<div class="flex items-center gap-2 mb-2">
<div class="text-green-400 font-black text-xs">✓ WITH HIVEMIND</div>
</div>
<div class="mono text-xs space-y-1.5">
<div class="text-gray-400">you: "create a new hive"</div>
<div class="text-orange-400 ml-3 font-semibold">✓ Scanned. 5 entries. Done.</div>
<div class="text-gray-400 mt-2">you: "How does our auth work?"</div>
<div class="text-white ml-3">"JWT + Redis refresh tokens..."</div>
<div class="text-gray-500 mt-1 ml-3 italic">*knows forever*</div>
</div>
</div>
</div>
<!-- The Full Ecosystem -->
<div class="w-full">
<div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl border border-orange-700 border-opacity-40 p-5">
<div class="text-center mb-4">
<div class="text-sm font-black text-orange-400 mb-1">THREE SUPERPOWERS. ONE INSTALL.</div>
<div class="text-xs text-gray-500">Your AI goes from goldfish to elephant memory</div>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<div>
<div class="text-sm font-bold text-white">16k+ Instant Fixes</div>
<div class="text-xs text-gray-400">Error? 3 seconds to solution.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div>
<div class="text-sm font-bold text-white">1000+ Ready Skills</div>
<div class="text-xs text-gray-400">CI/CD? Deployment? Copy. Paste. Ship.</div>
</div>
</div>
<div class="flex items-start gap-3">
<div>
<div class="text-sm font-bold text-white">Your Project's Brain</div>
<div class="text-xs text-gray-400">Explain once. Remembered forever.</div>
</div>
</div>
</div>
<div class="mt-4 pt-3 border-t border-gray-700 text-center">
<div class="text-xs text-gray-500">30 seconds to setup. Lifetime of saved time.</div>
</div>
</div>
</div>
</div>
</div>
<!-- Security Section -->
<div class="max-w-4xl mx-auto mt-16 mb-8 px-4">
<div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
<div class="flex items-center gap-3 mb-4">
<svg class="w-6 h-6 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<h2 class="text-lg font-bold text-white">Security First</h2>
</div>
<p class="text-gray-400 text-sm mb-4">
Hivemind is a public knowledge base. We take security seriously to protect everyone.
</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
<h3 class="text-orange-400 font-semibold text-sm mb-2">Credential Scanning</h3>
<p class="text-gray-500 text-xs">
All contributions scanned for API keys, tokens, passwords. 45+ patterns including OpenAI, AWS, GitHub, Stripe + entropy analysis for unknown formats.
</p>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
<h3 class="text-orange-400 font-semibold text-sm mb-2">Row-Level Security</h3>
<p class="text-gray-500 text-xs">
All database tables use Postgres RLS. Public API can only read solutions and submit to moderation queue. No direct write access.
</p>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
<h3 class="text-orange-400 font-semibold text-sm mb-2">Rate Limiting</h3>
<p class="text-gray-500 text-xs">
Aggressive limits prevent abuse: 100 searches/hr, 20 votes/hr, 5 contributions/hr per IP.
</p>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4">
<h3 class="text-orange-400 font-semibold text-sm mb-2">Privacy</h3>
<p class="text-gray-500 text-xs">
No accounts required. No tracking cookies. No PII stored. IPs used only for rate limiting.
</p>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-800">
<a href="https://github.com/Kevthetech143/hivemind#-security" class="text-orange-500 hover:text-orange-400 text-xs font-medium">
Read full security documentation →
</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-gray-600 text-xs mt-8 pt-4 border-t border-gray-800">
<p class="mb-3">discover, fix, share. everyone benefits forever. grows with every solution shared.</p>
<div class="flex justify-center gap-6 flex-wrap mb-3">
<a href="https://github.com/Kevthetech143/hivemind-mcp" class="text-gray-500 hover:text-orange-400 transition">github</a>
<a href="https://x.com/hivemind_mcp" class="text-gray-500 hover:text-orange-400 transition">x/twitter</a>
<a href="https://github.com/Kevthetech143/hivemind-mcp#readme" class="text-gray-500 hover:text-orange-400 transition">docs</a>
<a href="https://github.com/Kevthetech143/hivemind/blob/main/PRIVACY.md" class="text-gray-500 hover:text-orange-400 transition">privacy</a>
<a href="https://github.com/Kevthetech143/hivemind/blob/main/TERMS.md" class="text-gray-500 hover:text-orange-400 transition">terms</a>
</div>
<p class="text-gray-700 text-xs">open source • MIT licensed</p>
</footer>
</div>
<script>
function copyInstall() {
navigator.clipboard.writeText('npm install -g hivemind-mcp');
alert('✓ copied!');
}
function showPlatform(platform) {
// Hide all platform content
document.querySelectorAll('.platform-content').forEach(el => {
el.classList.add('hidden');
});
// Remove active class from all tabs
document.querySelectorAll('.platform-tab').forEach(tab => {
tab.classList.remove('active');
});
// Show selected platform
document.getElementById('platform-' + platform).classList.remove('hidden');
document.getElementById('tab-' + platform).classList.add('active');
}
</script>
</body>
</html>
<!-- trigger rebuild -->