<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clauderepo</title>
<meta name="description" content="Your AI remembers now.">
<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 #10b981;
animation: typing 1.5s steps(35) 0.5s forwards, blink 0.7s step-end 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; }
</style>
</head>
<body class="bg-black text-white">
<!-- Single screen layout -->
<div class="min-h-screen flex flex-col px-6 py-8">
<!-- Nav -->
<nav class="flex justify-between items-center mb-12">
<span class="text-lg font-bold">clauderepo</span>
<a href="#install" class="text-sm text-gray-400 hover:text-white">install →</a>
</nav>
<!-- Main content grid -->
<div class="flex-1 flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto w-full">
<!-- LEFT: Hero + Copy -->
<div class="flex-1 flex flex-col justify-center">
<h1 class="text-4xl lg:text-5xl font-black leading-tight mb-4">
your AI<br/>remembers<br/>now
</h1>
<p class="text-gray-400 text-base mb-6 max-w-lg">
shared knowledge base for Claude Code. when someone fixes an error, everyone benefits.
</p>
<!-- Quick benefits -->
<div class="space-y-2 mb-8">
<div class="flex items-center gap-2 text-sm text-gray-300">
<span class="text-blue-400">🧠</span>
<span>never solves the same error twice</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span class="text-blue-400">🧠</span>
<span>learns from every solution</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-300">
<span class="text-blue-400">🧠</span>
<span>works with claude, gpt, codex</span>
</div>
</div>
<!-- Stats -->
<div class="flex gap-6 mb-8">
<div>
<div class="text-2xl font-bold text-green-500">73%</div>
<div class="text-xs text-gray-500">hit rate</div>
</div>
<div>
<div class="text-2xl font-bold text-blue-500">8ms</div>
<div class="text-xs text-gray-500">response</div>
</div>
<div>
<div class="text-2xl font-bold text-purple-500">1,200+</div>
<div class="text-xs text-gray-500">solutions</div>
</div>
</div>
<!-- Install section -->
<div id="install" class="bg-gray-900 border border-gray-800 rounded-xl p-4 max-w-lg">
<p class="text-xs text-gray-500 mb-3">copy & paste into your claude config:</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-green-400 flex-1">npx @clauderepo/mcp</code>
<button onclick="copyInstall()" class="p-2 text-gray-500 hover:text-white">
<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>
<p class="text-xs text-gray-600 mt-3">then restart claude</p>
</div>
</div>
<!-- RIGHT: Live demo -->
<div class="flex-1 flex items-center">
<div class="w-full bg-gray-900 rounded-xl border border-gray-800 p-4 shadow-2xl">
<div class="flex gap-1.5 mb-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="mono text-xs space-y-2.5">
<div class="text-red-400">
<span class="typewriter">Error: connection refused</span>
</div>
<div class="text-green-400 fade-in delay-1">
✓ Found fix (76% success)
</div>
<div class="text-gray-400 fade-in delay-2">
→ npm install in mcp folder
</div>
<div class="text-green-400 fade-in delay-3">
✓ Fixed. 8ms.
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-gray-600 text-xs mt-8 pt-4 border-t border-gray-800">
free to use · built for claude code
</footer>
</div>
<script>
function copyInstall() {
navigator.clipboard.writeText('npx @clauderepo/mcp');
alert('copied!');
}
</script>
</body>
</html>