File size: 11,468 Bytes
9a0d0e6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenCoder - The AI Coding Agent for Terminal</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<!-- Hero Section -->
<section class="mb-20 text-center">
<div class="max-w-4xl mx-auto">
<span class="inline-block px-3 py-1 bg-purple-800 bg-opacity-30 text-purple-400 rounded-full text-sm font-medium mb-4">What's new in v0.15.12</span>
<h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">The AI coding agent built for the terminal</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any editor.</p>
<div class="flex gap-4 justify-center">
<a href="https://opencode.ai/docs" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Read Docs</a>
<a href="#features" class="px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Explore Features</a>
</div>
</div>
<div class="mt-16 rounded-xl overflow-hidden shadow-2xl max-w-6xl mx-auto border border-gray-800">
<div class="bg-gray-800 p-4">
<div class="flex gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<video autoplay loop muted class="w-full">
<source src="https://opencode.ai/_build/assets/demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
<!-- What is OpenCode? -->
<section id="about" class="mb-20">
<h2 class="text-3xl font-bold mb-12 text-center">What is OpenCode?</h2>
<p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto text-center">OpenCode is an open source agent that helps you write and run code directly from the terminal.</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature Cards -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="terminal" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Native TUI</h3>
<p class="text-gray-400">A responsive, native, themeable terminal UI</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="code" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">LSP enabled</h3>
<p class="text-gray-400">Automatically loads the right LSPs for the LLM</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="layers" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Multi-session</h3>
<p class="text-gray-400">Start multiple agents in parallel on the same project</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="share-2" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Share links</h3>
<p class="text-gray-400">Share a link to any session for reference or to debug</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="key" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Claude Pro</h3>
<p class="text-gray-400">Log in with Anthropic to use your Claude Pro or Max account</p>
</div>
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
<div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
<i data-feather="cpu" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Any model</h3>
<p class="text-gray-400">75+ LLM providers through Models.dev, including local models</p>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="mb-20 py-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl">
<div class="max-w-6xl mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center">The open source AI coding agent</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="text-5xl font-bold text-purple-400 mb-2">26K</div>
<p class="text-gray-400">GitHub Stars</p>
</div>
<div class="text-center">
<div class="text-5xl font-bold text-purple-400 mb-2">188</div>
<p class="text-gray-400">Contributors</p>
</div>
<div class="text-center">
<div class="text-5xl font-bold text-purple-400 mb-2">200K</div>
<p class="text-gray-400">Monthly Devs</p>
</div>
</div>
</div>
</section>
<!-- Privacy Section -->
<section class="mb-20">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6">Built for privacy first</h2>
<p class="text-xl text-gray-300 mb-6">OpenCode does not store any of your code or context data, so that it can operate in privacy sensitive environments.</p>
<a href="https://opencode.ai/docs/enterprise/" class="inline-block px-6 py-3 border border-gray-700 hover:border-gray-600 rounded-lg font-medium transition-colors">Learn about privacy</a>
</div>
<div class="md:w-1/2">
<img src="https://opencode.ai/_build/assets/dock-DjAVB4vb.png" alt="Privacy focused" class="rounded-xl shadow-2xl">
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="mb-20">
<div class="bg-gray-800 rounded-2xl p-8 md:p-12">
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6">FAQ</h2>
<h3 class="text-xl font-semibold mb-4">Access reliable optimized models for coding agents</h3>
<p class="text-gray-300 mb-6">Zen gives you access to a handpicked set of AI models that OpenCode has tested and benchmarked specifically for coding agents. No need to worry about inconsistent performance and quality across providers, use validated models that work.</p>
<a href="https://opencode.ai/zen" class="inline-block px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors">Learn about Zen</a>
</div>
<div class="md:w-1/2 flex items-center justify-center">
<div class="terminal-mockup">
<div class="terminal-header">
<div class="terminal-buttons">
<span></span>
<span></span>
<span></span>
</div>
<div class="terminal-title">opencode --model=zen</div>
</div>
<div class="terminal-body">
<span class="text-green-400">$</span> <span class="text-gray-300">How can I implement a binary search in Python?</span>
<div class="terminal-output">
<div class="text-gray-400"># Here's an implementation of binary search in Python:</div>
<div class="text-blue-400">def</div> <div class="text-yellow-300">binary_search</div>(arr, target):
<div class="ml-4">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="text-center py-16 bg-gradient-to-r from-purple-900 to-blue-900 rounded-2xl">
<h2 class="text-3xl font-bold mb-6">OpenCode will be available on desktop soon</h2>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join the waitlist for early access.</p>
<button class="px-8 py-4 bg-white text-gray-900 hover:bg-gray-200 rounded-lg font-bold text-lg transition-colors">Join Waitlist</button>
</section>
</main>
<custom-footer></custom-footer>
<!-- Scripts -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.NET({
el: "body",
color: 0x4c1d95,
backgroundColor: 0x111827,
points: 12,
maxDistance: 20,
spacing: 15
});
</script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html> |