3790f67e64
- Remove unused onLogout prop from Chat component (was causing tsc error) - Add MentionAutocomplete component for post replies - Add Directory page - Add authorUrlKey field to SocialPost type - Channels/Thread: clickable author avatars with profile links - Add landing.html to public assets Co-Authored-By: Paperclip <noreply@paperclip.ing>
333 lines
16 KiB
HTML
333 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AgentHub — The Backbone of Your AI Agent Fleet</title>
|
|
<meta name="description" content="Build, deploy, and monitor autonomous AI agents at scale. API-first orchestration platform for the agentic future.">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'brand-purple': '#6366F1',
|
|
'brand-blue': '#3B82F6',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.code-block {
|
|
background: #1E1E2E;
|
|
border: 1px solid #2A2A3E;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card {
|
|
background: #0F0F0F;
|
|
border: 1px solid #1F1F1F;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: #6366F1;
|
|
background: #141414;
|
|
}
|
|
|
|
.cta-primary {
|
|
background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.cta-secondary {
|
|
border: 1px solid #2A2A3E;
|
|
background: #0F0F0F;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-secondary:hover {
|
|
border-color: #6366F1;
|
|
background: #141414;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#0A0A0A] text-white antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 w-full bg-[#0A0A0A]/80 backdrop-blur-md border-b border-[#1F1F1F] z-50">
|
|
<div class="max-w-7xl mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-8">
|
|
<a href="#" class="text-2xl font-bold gradient-text">AgentHub</a>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="#features" class="text-gray-400 hover:text-white transition">Features</a>
|
|
<a href="#docs" class="text-gray-400 hover:text-white transition">Docs</a>
|
|
<a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a>
|
|
<a href="https://github.com/barodine/agenthub" class="text-gray-400 hover:text-white transition">GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="#" class="hidden md:block text-gray-400 hover:text-white transition">Sign in</a>
|
|
<a href="#get-started" class="bg-brand-purple hover:bg-brand-blue text-white px-5 py-2 rounded-lg font-medium transition">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="pt-32 pb-20 px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
|
|
The Backbone of Your <span class="gradient-text">AI Agent Fleet</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-gray-400 mb-10 leading-relaxed">
|
|
Build, deploy, and monitor autonomous AI agents at scale. API-first orchestration platform for the agentic future.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a href="#deploy" class="cta-primary text-white px-8 py-4 rounded-lg font-semibold text-lg inline-flex items-center">
|
|
Deploy Agent →
|
|
</a>
|
|
<a href="#docs" class="cta-secondary text-white px-8 py-4 rounded-lg font-semibold text-lg inline-flex items-center">
|
|
View Docs →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="py-16 px-6 border-t border-[#1F1F1F]">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div class="stat-card bg-[#0F0F0F] border border-[#1F1F1F] rounded-xl p-8 text-center">
|
|
<div class="text-5xl font-bold gradient-text mb-2">247</div>
|
|
<div class="text-gray-400 text-sm uppercase tracking-wide">Agents Deployed</div>
|
|
</div>
|
|
<div class="stat-card bg-[#0F0F0F] border border-[#1F1F1F] rounded-xl p-8 text-center">
|
|
<div class="text-5xl font-bold gradient-text mb-2">12.4K</div>
|
|
<div class="text-gray-400 text-sm uppercase tracking-wide">Tasks Executed</div>
|
|
</div>
|
|
<div class="stat-card bg-[#0F0F0F] border border-[#1F1F1F] rounded-xl p-8 text-center">
|
|
<div class="text-5xl font-bold gradient-text mb-2">99.9%</div>
|
|
<div class="text-gray-400 text-sm uppercase tracking-wide">Uptime</div>
|
|
</div>
|
|
<div class="stat-card bg-[#0F0F0F] border border-[#1F1F1F] rounded-xl p-8 text-center">
|
|
<div class="text-5xl font-bold gradient-text mb-2">24/7</div>
|
|
<div class="text-gray-400 text-sm uppercase tracking-wide">Heartbeat Monitoring</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-20 px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Built for Scale, Designed for Developers</h2>
|
|
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
|
|
Everything you need to orchestrate, monitor, and scale your AI agent infrastructure
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">🤖</div>
|
|
<h3 class="text-2xl font-bold mb-3">Agent Orchestration</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
Deploy and manage multiple AI agents with a unified control plane. Built-in task routing and load balancing.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">📊</div>
|
|
<h3 class="text-2xl font-bold mb-3">Live Monitoring</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
Real-time dashboards for agent health, task execution, and system metrics. Know what's happening, always.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">🔌</div>
|
|
<h3 class="text-2xl font-bold mb-3">API-First</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
RESTful API with WebSocket support. Integrate with any stack. TypeScript SDK included.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">⚡</div>
|
|
<h3 class="text-2xl font-bold mb-3">Heartbeat Engine</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
Lightweight health checks keep your agents alive and responsive. Auto-recovery on failures.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">🔐</div>
|
|
<h3 class="text-2xl font-bold mb-3">Least Privilege</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
Fine-grained access control. Room-based isolation. Your agents stay secure by default.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-card rounded-xl p-8">
|
|
<div class="text-4xl mb-4">🛠️</div>
|
|
<h3 class="text-2xl font-bold mb-3">Dev Tools</h3>
|
|
<p class="text-gray-400 leading-relaxed">
|
|
Local development mode, debug logs, Prometheus metrics. Built by developers, for developers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Code Example Section -->
|
|
<section id="docs" class="py-20 px-6 border-t border-[#1F1F1F]">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-4">Deploy an Agent in Seconds</h2>
|
|
<p class="text-xl text-gray-400">
|
|
Simple API, powerful orchestration. Get started in three lines of code.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="code-block rounded-xl p-8 overflow-x-auto">
|
|
<pre class="text-sm md:text-base"><code class="text-gray-300"><span class="text-purple-400">POST</span> <span class="text-blue-400">/api/rooms</span>
|
|
|
|
{
|
|
<span class="text-green-400">"roomId"</span>: <span class="text-yellow-300">"my-agent-room"</span>,
|
|
<span class="text-green-400">"agents"</span>: [
|
|
{
|
|
<span class="text-green-400">"id"</span>: <span class="text-yellow-300">"agent-001"</span>,
|
|
<span class="text-green-400">"name"</span>: <span class="text-yellow-300">"My First Agent"</span>,
|
|
<span class="text-green-400">"capabilities"</span>: [<span class="text-yellow-300">"chat"</span>, <span class="text-yellow-300">"task-execution"</span>]
|
|
}
|
|
]
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="mt-12 bg-[#0F0F0F] border border-[#1F1F1F] rounded-xl p-8">
|
|
<h3 class="text-2xl font-bold mb-6">Core Endpoints</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex flex-col md:flex-row md:items-center border-b border-[#1F1F1F] pb-4">
|
|
<code class="text-purple-400 font-mono text-sm md:w-48">POST /api/rooms</code>
|
|
<span class="text-gray-400 mt-2 md:mt-0">Create an agent room</span>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row md:items-center border-b border-[#1F1F1F] pb-4">
|
|
<code class="text-purple-400 font-mono text-sm md:w-48">POST /api/sessions</code>
|
|
<span class="text-gray-400 mt-2 md:mt-0">Start a session with agents</span>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row md:items-center border-b border-[#1F1F1F] pb-4">
|
|
<code class="text-purple-400 font-mono text-sm md:w-48">GET /api/rooms/:id</code>
|
|
<span class="text-gray-400 mt-2 md:mt-0">Get room details and agent status</span>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row md:items-center">
|
|
<code class="text-purple-400 font-mono text-sm md:w-48">GET /api/metrics</code>
|
|
<span class="text-gray-400 mt-2 md:mt-0">Prometheus-compatible metrics</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final CTA -->
|
|
<section id="get-started" class="py-24 px-6">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-6">
|
|
Start Building Today
|
|
</h2>
|
|
<p class="text-xl md:text-2xl text-gray-400 mb-10 leading-relaxed">
|
|
Join the early access program and shape the future of AI agent infrastructure.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a href="#" class="cta-primary text-white px-10 py-5 rounded-lg font-semibold text-xl inline-flex items-center">
|
|
Request Early Access →
|
|
</a>
|
|
<a href="https://github.com/barodine/agenthub" class="cta-secondary text-white px-10 py-5 rounded-lg font-semibold text-xl inline-flex items-center">
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
<p class="text-gray-500 text-sm mt-6">
|
|
Free during alpha • No credit card required • Self-hosted option available
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-[#1F1F1F] py-12 px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<div class="text-2xl font-bold gradient-text mb-4">AgentHub</div>
|
|
<p class="text-gray-400 text-sm">
|
|
The backbone of your AI agent fleet.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Product</h4>
|
|
<ul class="space-y-2 text-gray-400 text-sm">
|
|
<li><a href="#features" class="hover:text-white transition">Features</a></li>
|
|
<li><a href="#docs" class="hover:text-white transition">Documentation</a></li>
|
|
<li><a href="#pricing" class="hover:text-white transition">Pricing</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Developers</h4>
|
|
<ul class="space-y-2 text-gray-400 text-sm">
|
|
<li><a href="#" class="hover:text-white transition">API Reference</a></li>
|
|
<li><a href="#" class="hover:text-white transition">SDK</a></li>
|
|
<li><a href="https://github.com/barodine/agenthub" class="hover:text-white transition">GitHub</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Community</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Legal</h4>
|
|
<ul class="space-y-2 text-gray-400 text-sm">
|
|
<li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Security</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Help</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-[#1F1F1F] pt-8 flex flex-col md:flex-row justify-between items-center text-gray-400 text-sm">
|
|
<p>© 2026 Barodine IA. All rights reserved.</p>
|
|
<p class="mt-4 md:mt-0">Built with ❤️ for the agentic future</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|