366 lines
21 KiB
HTML
366 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OPHION - Observability com Inteligência Artificial</title>
|
|
<meta name="description" content="Plataforma de observabilidade com IA. Monitore, detecte anomalias e corrija problemas automaticamente. Alternativa open source ao Datadog.">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); }
|
|
.glow { box-shadow: 0 0 60px rgba(34, 197, 94, 0.3); }
|
|
.glow-purple { box-shadow: 0 0 60px rgba(139, 92, 246, 0.3); }
|
|
.snake-gradient { background: linear-gradient(90deg, #22c55e, #10b981, #059669); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.ai-gradient { background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.card-glow:hover { box-shadow: 0 0 30px rgba(34, 197, 94, 0.2); }
|
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
.pulse { animation: pulse 2s infinite; }
|
|
</style>
|
|
</head>
|
|
<body class="gradient-bg text-white min-h-screen">
|
|
<!-- Nav -->
|
|
<nav class="container mx-auto px-6 py-6 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-3xl">🐍</span>
|
|
<span class="text-2xl font-bold snake-gradient">OPHION</span>
|
|
<span class="text-xs bg-purple-600 px-2 py-0.5 rounded-full ml-2">AI-Powered</span>
|
|
</div>
|
|
<div class="hidden md:flex space-x-8">
|
|
<a href="#ai" class="hover:text-purple-400 transition">IA</a>
|
|
<a href="#features" class="hover:text-green-400 transition">Features</a>
|
|
<a href="#pricing" class="hover:text-green-400 transition">Pricing</a>
|
|
<a href="https://github.com/bigtux/ophion" class="hover:text-green-400 transition">GitHub</a>
|
|
</div>
|
|
<div class="flex space-x-4">
|
|
<a href="/login" class="px-4 py-2 rounded-lg hover:bg-slate-700 transition">Login</a>
|
|
<a href="/register" class="px-6 py-2 bg-gradient-to-r from-green-600 to-purple-600 rounded-lg hover:opacity-90 transition font-semibold">Start Free</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="container mx-auto px-6 py-20 text-center">
|
|
<div class="inline-flex items-center space-x-2 px-4 py-1 bg-purple-900/50 rounded-full text-purple-300 text-sm mb-6">
|
|
<span class="pulse">🤖</span>
|
|
<span>Powered by GPT-4 & Machine Learning</span>
|
|
</div>
|
|
<h1 class="text-5xl md:text-7xl font-extrabold mb-6">
|
|
Observability com<br>
|
|
<span class="ai-gradient">Inteligência Artificial</span>
|
|
</h1>
|
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-10">
|
|
O único sistema de monitoramento que <strong class="text-white">detecta anomalias</strong>,
|
|
<strong class="text-white">prevê problemas</strong> e <strong class="text-white">corrige automaticamente</strong>.
|
|
Pare de apagar incêndios. Deixe a IA trabalhar por você.
|
|
</p>
|
|
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
|
|
<a href="/register" class="px-8 py-4 bg-gradient-to-r from-green-600 to-purple-600 rounded-xl text-lg font-semibold hover:opacity-90 transition glow-purple">
|
|
Começar Grátis →
|
|
</a>
|
|
<a href="#demo" class="px-8 py-4 border border-slate-600 rounded-xl text-lg font-semibold hover:border-purple-500 transition">
|
|
Ver Demo com IA
|
|
</a>
|
|
</div>
|
|
<p class="text-slate-500 mt-6">14 dias grátis • Sem cartão de crédito</p>
|
|
</section>
|
|
|
|
<!-- AI Section -->
|
|
<section id="ai" class="container mx-auto px-6 py-20">
|
|
<div class="text-center mb-16">
|
|
<span class="text-purple-400 font-semibold">INTELIGÊNCIA ARTIFICIAL</span>
|
|
<h2 class="text-4xl font-bold mt-2">O que nenhum concorrente oferece</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
|
<!-- Copilot -->
|
|
<div class="bg-gradient-to-br from-purple-900/30 to-slate-800/50 p-8 rounded-2xl border border-purple-500/30 card-glow transition-all">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<span class="text-4xl">💬</span>
|
|
<h3 class="text-2xl font-bold">OPHION Copilot</h3>
|
|
</div>
|
|
<p class="text-slate-400 mb-4">
|
|
Chat com IA especialista em infraestrutura. Pergunte qualquer coisa:
|
|
</p>
|
|
<div class="bg-slate-900/50 rounded-lg p-4 font-mono text-sm">
|
|
<p class="text-slate-500">Você:</p>
|
|
<p class="text-white mb-2">"Por que o servidor web-01 está lento?"</p>
|
|
<p class="text-slate-500">Copilot:</p>
|
|
<p class="text-green-400">"Analisei as métricas e logs. O problema é um memory leak no processo node. O uso de RAM cresceu 40% nas últimas 2h. Sugestão: reiniciar o PM2 com `pm2 restart all`"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto-Healing -->
|
|
<div class="bg-gradient-to-br from-green-900/30 to-slate-800/50 p-8 rounded-2xl border border-green-500/30 card-glow transition-all">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<span class="text-4xl">🔧</span>
|
|
<h3 class="text-2xl font-bold">Auto-Healing</h3>
|
|
</div>
|
|
<p class="text-slate-400 mb-4">
|
|
A IA corrige problemas automaticamente enquanto você dorme:
|
|
</p>
|
|
<ul class="space-y-2 text-sm">
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-green-400">✓</span>
|
|
<span>Reinicia serviços com falha</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-green-400">✓</span>
|
|
<span>Escala containers automaticamente</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-green-400">✓</span>
|
|
<span>Limpa cache quando necessário</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-green-400">✓</span>
|
|
<span>Rotaciona logs cheios</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-yellow-400">⚡</span>
|
|
<span>Modo dry-run para aprovação</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Smart Alerts -->
|
|
<div class="bg-gradient-to-br from-blue-900/30 to-slate-800/50 p-8 rounded-2xl border border-blue-500/30 card-glow transition-all">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<span class="text-4xl">🚨</span>
|
|
<h3 class="text-2xl font-bold">Smart Alerts</h3>
|
|
</div>
|
|
<p class="text-slate-400 mb-4">
|
|
Chega de 100 alertas que não dizem nada. A IA:
|
|
</p>
|
|
<ul class="space-y-2 text-sm">
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-blue-400">🔇</span>
|
|
<span>Filtra ruído e falsos positivos</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-blue-400">🔗</span>
|
|
<span>Correlaciona alertas relacionados</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-blue-400">🎯</span>
|
|
<span>Identifica a causa raiz</span>
|
|
</li>
|
|
<li class="flex items-center space-x-2">
|
|
<span class="text-blue-400">💡</span>
|
|
<span>Sugere ações de correção</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Predictions -->
|
|
<div class="bg-gradient-to-br from-orange-900/30 to-slate-800/50 p-8 rounded-2xl border border-orange-500/30 card-glow transition-all">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<span class="text-4xl">🔮</span>
|
|
<h3 class="text-2xl font-bold">Predictions</h3>
|
|
</div>
|
|
<p class="text-slate-400 mb-4">
|
|
Preveja o futuro da sua infraestrutura:
|
|
</p>
|
|
<div class="bg-slate-900/50 rounded-lg p-4 text-sm">
|
|
<p class="text-orange-400 font-semibold">⚠️ Previsão:</p>
|
|
<p class="text-white">"O disco do servidor db-01 vai encher em <strong>7 dias</strong> se a tendência continuar."</p>
|
|
<p class="text-slate-400 mt-2">Confiança: 87%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comparison -->
|
|
<section class="container mx-auto px-6 py-20">
|
|
<h2 class="text-4xl font-bold text-center mb-12">OPHION vs Concorrentes</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full max-w-4xl mx-auto text-left">
|
|
<thead>
|
|
<tr class="border-b border-slate-700">
|
|
<th class="py-4 px-4">Feature</th>
|
|
<th class="py-4 px-4 text-center">OPHION</th>
|
|
<th class="py-4 px-4 text-center text-slate-500">Datadog</th>
|
|
<th class="py-4 px-4 text-center text-slate-500">SigNoz</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Métricas, Logs, Traces</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Copilot com IA</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Auto-Healing</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Correlação de Alertas com IA</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-yellow-400">$$$</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Previsões de Capacidade</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-yellow-400">$$$</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Open Source</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
<td class="py-4 px-4 text-center text-slate-500">—</td>
|
|
<td class="py-4 px-4 text-center text-green-400">✓</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-800">
|
|
<td class="py-4 px-4">Preço</td>
|
|
<td class="py-4 px-4 text-center text-green-400">R$ 97+</td>
|
|
<td class="py-4 px-4 text-center text-red-400">$$$$$</td>
|
|
<td class="py-4 px-4 text-center text-green-400">Grátis*</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section id="features" class="container mx-auto px-6 py-20">
|
|
<h2 class="text-4xl font-bold text-center mb-16">Todas as Features</h2>
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">📊</div>
|
|
<h3 class="text-lg font-semibold mb-2">Infrastructure Monitoring</h3>
|
|
<p class="text-slate-400 text-sm">CPU, memória, disco, rede. Docker, K8s, Cloud.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">📝</div>
|
|
<h3 class="text-lg font-semibold mb-2">Log Management</h3>
|
|
<p class="text-slate-400 text-sm">Centralize, busque e analise logs com IA.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">🔍</div>
|
|
<h3 class="text-lg font-semibold mb-2">Distributed Tracing</h3>
|
|
<p class="text-slate-400 text-sm">Rastreie requests entre microserviços.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">📈</div>
|
|
<h3 class="text-lg font-semibold mb-2">Custom Dashboards</h3>
|
|
<p class="text-slate-400 text-sm">Drag-and-drop. Templates prontos.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">🚨</div>
|
|
<h3 class="text-lg font-semibold mb-2">Alertas Inteligentes</h3>
|
|
<p class="text-slate-400 text-sm">Telegram, Slack, Email, PagerDuty.</p>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-6 rounded-xl border border-slate-700 hover:border-green-500 transition">
|
|
<div class="text-3xl mb-3">🔐</div>
|
|
<h3 class="text-lg font-semibold mb-2">Segurança</h3>
|
|
<p class="text-slate-400 text-sm">SSO, RBAC, detecção de anomalias.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section id="pricing" class="container mx-auto px-6 py-20">
|
|
<h2 class="text-4xl font-bold text-center mb-4">Preços Simples</h2>
|
|
<p class="text-slate-400 text-center mb-16">Sem surpresas. Sem cobrança por usuário. Com IA inclusa.</p>
|
|
<div class="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
|
<h3 class="text-lg font-semibold text-slate-400">Community</h3>
|
|
<div class="text-4xl font-bold my-4">Grátis</div>
|
|
<p class="text-slate-400 mb-6">Self-hosted</p>
|
|
<ul class="space-y-3 text-sm text-slate-300">
|
|
<li>✓ Métricas & Logs</li>
|
|
<li>✓ Alertas básicos</li>
|
|
<li>✓ 7 dias retenção</li>
|
|
<li>✗ <span class="text-slate-500">IA Features</span></li>
|
|
</ul>
|
|
<a href="https://github.com/bigtux/ophion" class="block mt-8 py-3 text-center border border-slate-600 rounded-lg hover:border-green-500 transition">Download</a>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
|
<h3 class="text-lg font-semibold text-slate-400">Starter</h3>
|
|
<div class="text-4xl font-bold my-4">R$ 97<span class="text-lg text-slate-400">/mês</span></div>
|
|
<p class="text-slate-400 mb-6">Pequenas equipes</p>
|
|
<ul class="space-y-3 text-sm text-slate-300">
|
|
<li>✓ 5 hosts</li>
|
|
<li>✓ 14 dias retenção</li>
|
|
<li>✓ Copilot IA básico</li>
|
|
<li>✓ Smart Alerts</li>
|
|
</ul>
|
|
<a href="/register" class="block mt-8 py-3 text-center bg-slate-700 rounded-lg hover:bg-slate-600 transition">Começar</a>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border-2 border-purple-500 relative">
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-purple-500 px-3 py-1 rounded-full text-xs font-semibold">AI COMPLETO</div>
|
|
<h3 class="text-lg font-semibold text-purple-400">Pro</h3>
|
|
<div class="text-4xl font-bold my-4">R$ 297<span class="text-lg text-slate-400">/mês</span></div>
|
|
<p class="text-slate-400 mb-6">Empresas</p>
|
|
<ul class="space-y-3 text-sm text-slate-300">
|
|
<li>✓ 20 hosts</li>
|
|
<li>✓ 30 dias retenção</li>
|
|
<li>✓ <span class="text-purple-400">Copilot IA completo</span></li>
|
|
<li>✓ <span class="text-purple-400">Auto-Healing</span></li>
|
|
<li>✓ <span class="text-purple-400">Predictions</span></li>
|
|
</ul>
|
|
<a href="/register" class="block mt-8 py-3 text-center bg-purple-600 rounded-lg hover:bg-purple-500 transition">Começar</a>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-8 rounded-2xl border border-slate-700">
|
|
<h3 class="text-lg font-semibold text-slate-400">Enterprise</h3>
|
|
<div class="text-4xl font-bold my-4">Custom</div>
|
|
<p class="text-slate-400 mb-6">Grandes empresas</p>
|
|
<ul class="space-y-3 text-sm text-slate-300">
|
|
<li>✓ Hosts ilimitados</li>
|
|
<li>✓ SSO / SAML</li>
|
|
<li>✓ On-premise</li>
|
|
<li>✓ SLA 99.99%</li>
|
|
<li>✓ Suporte dedicado</li>
|
|
</ul>
|
|
<a href="mailto:contato@ophion.com.br" class="block mt-8 py-3 text-center border border-slate-600 rounded-lg hover:border-purple-500 transition">Contato</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="container mx-auto px-6 py-20 text-center">
|
|
<div class="bg-gradient-to-r from-purple-900/50 to-green-900/50 rounded-3xl p-12 border border-purple-800">
|
|
<span class="text-6xl mb-4 block">🐍</span>
|
|
<h2 class="text-4xl font-bold mb-4">Deixe a IA cuidar da sua infra</h2>
|
|
<p class="text-slate-400 mb-8 max-w-2xl mx-auto">
|
|
Enquanto você dorme, o OPHION monitora, detecta problemas,
|
|
correlaciona eventos e até corrige automaticamente.
|
|
</p>
|
|
<a href="/register" class="inline-block px-8 py-4 bg-gradient-to-r from-green-600 to-purple-600 rounded-xl text-lg font-semibold hover:opacity-90 transition">
|
|
Testar Grátis por 14 dias →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="container mx-auto px-6 py-12 border-t border-slate-800">
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0">
|
|
<span class="text-2xl">🐍</span>
|
|
<span class="text-xl font-bold">OPHION</span>
|
|
</div>
|
|
<div class="flex space-x-8 text-slate-400">
|
|
<a href="#" class="hover:text-white transition">Docs</a>
|
|
<a href="#" class="hover:text-white transition">Status</a>
|
|
<a href="https://github.com/bigtux/ophion" class="hover:text-white transition">GitHub</a>
|
|
<a href="#" class="hover:text-white transition">Contato</a>
|
|
</div>
|
|
<div class="text-slate-500 mt-4 md:mt-0">
|
|
Made with 🤖 + 🖤 in Brazil
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|