880 lines
26 KiB
HTML
880 lines
26 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title
|
||
|
|
data-en="Vapora - Intelligent Development Orchestration"
|
||
|
|
data-es="Vapora - Orquestación Inteligente de Desarrollo"
|
||
|
|
>
|
||
|
|
Vapora
|
||
|
|
</title>
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: "JetBrains Mono", monospace;
|
||
|
|
background: #0a0118;
|
||
|
|
color: #ffffff;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gradient-bg {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
background:
|
||
|
|
radial-gradient(
|
||
|
|
circle at 20% 50%,
|
||
|
|
rgba(168, 85, 247, 0.15) 0%,
|
||
|
|
transparent 50%
|
||
|
|
),
|
||
|
|
radial-gradient(
|
||
|
|
circle at 80% 80%,
|
||
|
|
rgba(34, 211, 238, 0.15) 0%,
|
||
|
|
transparent 50%
|
||
|
|
),
|
||
|
|
radial-gradient(
|
||
|
|
circle at 40% 90%,
|
||
|
|
rgba(236, 72, 153, 0.1) 0%,
|
||
|
|
transparent 50%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.language-toggle {
|
||
|
|
position: fixed;
|
||
|
|
top: 2rem;
|
||
|
|
right: 2rem;
|
||
|
|
z-index: 100;
|
||
|
|
display: flex;
|
||
|
|
gap: 0.5rem;
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
border: 1px solid rgba(34, 211, 238, 0.3);
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 0.3rem 0.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lang-btn {
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
color: #94a3b8;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border-radius: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-family: "JetBrains Mono", monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lang-btn.active {
|
||
|
|
background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lang-btn:hover {
|
||
|
|
color: #22d3ee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
text-align: center;
|
||
|
|
padding: 5rem 0 4rem;
|
||
|
|
animation: fadeInUp 0.8s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-badge {
|
||
|
|
display: inline-block;
|
||
|
|
background: rgba(34, 211, 238, 0.2);
|
||
|
|
border: 1px solid #22d3ee;
|
||
|
|
color: #22d3ee;
|
||
|
|
padding: 0.5rem 1.5rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-container {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-container img {
|
||
|
|
max-width: 440px;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
filter: drop-shadow(0 0 30px rgba(34, 211, 238, 0.4));
|
||
|
|
}
|
||
|
|
|
||
|
|
.tagline {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: #22d3ee;
|
||
|
|
font-weight: 400;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2.8rem;
|
||
|
|
font-weight: 800;
|
||
|
|
line-height: 1.2;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
#22d3ee 0%,
|
||
|
|
#a855f7 50%,
|
||
|
|
#ec4899 100%
|
||
|
|
);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-subtitle {
|
||
|
|
font-size: 1.15rem;
|
||
|
|
color: #cbd5e1;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto 2rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
color: #22d3ee;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
margin: 4rem 0;
|
||
|
|
animation: fadeInUp 0.8s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 800;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
color: #22d3ee;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title span {
|
||
|
|
background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problems-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem-card {
|
||
|
|
background: rgba(255, 255, 255, 0.03);
|
||
|
|
border: 1px solid rgba(168, 85, 247, 0.3);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
border-color: rgba(34, 211, 238, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem-number {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 800;
|
||
|
|
background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem-card h3 {
|
||
|
|
color: #ec4899;
|
||
|
|
font-size: 1.05rem;
|
||
|
|
margin-bottom: 0.7rem;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem-card p {
|
||
|
|
color: #cbd5e1;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-stack {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-badge {
|
||
|
|
background: rgba(34, 211, 238, 0.15);
|
||
|
|
border: 1px solid #22d3ee;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: #22d3ee;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.features-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-box {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(34, 211, 238, 0.1) 0%,
|
||
|
|
rgba(168, 85, 247, 0.1) 100%
|
||
|
|
);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
border-left: 4px solid #22d3ee;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-box:hover {
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(34, 211, 238, 0.15) 0%,
|
||
|
|
rgba(168, 85, 247, 0.15) 100%
|
||
|
|
);
|
||
|
|
transform: translateY(-3px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-icon {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-title {
|
||
|
|
font-size: 1.15rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #22d3ee;
|
||
|
|
margin-bottom: 0.7rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-text {
|
||
|
|
color: #cbd5e1;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
line-height: 1.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.agents-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.agent-item {
|
||
|
|
background: rgba(236, 72, 153, 0.1);
|
||
|
|
padding: 1.2rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
border: 1px solid rgba(236, 72, 153, 0.3);
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.agent-item:hover {
|
||
|
|
background: rgba(236, 72, 153, 0.15);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.agent-name {
|
||
|
|
color: #ec4899;
|
||
|
|
font-weight: 700;
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0.3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.agent-role {
|
||
|
|
color: #94a3b8;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-section {
|
||
|
|
text-align: center;
|
||
|
|
margin: 5rem 0 3rem;
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
rgba(34, 211, 238, 0.1) 0%,
|
||
|
|
rgba(236, 72, 153, 0.1) 100%
|
||
|
|
);
|
||
|
|
border-radius: 20px;
|
||
|
|
border: 1px solid rgba(168, 85, 247, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 800;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
background: linear-gradient(135deg, #22d3ee 0%, #ec4899 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button {
|
||
|
|
display: inline-block;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
#22d3ee 0%,
|
||
|
|
#a855f7 50%,
|
||
|
|
#ec4899 100%
|
||
|
|
);
|
||
|
|
color: #fff;
|
||
|
|
padding: 1.1rem 2.8rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 800;
|
||
|
|
font-size: 1rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cta-button:hover {
|
||
|
|
transform: translateY(-3px) scale(1.05);
|
||
|
|
box-shadow: 0 20px 50px rgba(34, 211, 238, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
padding: 3rem 0 2rem;
|
||
|
|
color: #64748b;
|
||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
margin-top: 4rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer p:first-child {
|
||
|
|
font-weight: 700;
|
||
|
|
color: #94a3b8;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer p:last-child {
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
.hero-subtitle {
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
.logo-container img {
|
||
|
|
max-width: 352px;
|
||
|
|
}
|
||
|
|
.section-title {
|
||
|
|
font-size: 1.6rem;
|
||
|
|
}
|
||
|
|
.cta-title {
|
||
|
|
font-size: 1.6rem;
|
||
|
|
}
|
||
|
|
.language-toggle {
|
||
|
|
top: 1rem;
|
||
|
|
right: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="gradient-bg"></div>
|
||
|
|
|
||
|
|
<div class="language-toggle">
|
||
|
|
<button
|
||
|
|
class="lang-btn active"
|
||
|
|
data-lang="en"
|
||
|
|
onclick="switchLanguage('en')"
|
||
|
|
>
|
||
|
|
EN
|
||
|
|
</button>
|
||
|
|
<button class="lang-btn" data-lang="es" onclick="switchLanguage('es')">
|
||
|
|
ES
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<header>
|
||
|
|
<span
|
||
|
|
class="status-badge"
|
||
|
|
data-en="✅ v1.2.0"
|
||
|
|
data-es="✅ v1.2.0"
|
||
|
|
>✅ v1.2.0</span
|
||
|
|
>
|
||
|
|
<div class="logo-container">
|
||
|
|
<img
|
||
|
|
src="assets/vapora.svg"
|
||
|
|
alt="Vapora - Development Orchestration"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<p class="tagline">Evaporate complexity</p>
|
||
|
|
<h1
|
||
|
|
data-en="Development Flows<br>When Teams and AI Orchestrate"
|
||
|
|
data-es="El Desarrollo Fluye<br>Cuando Equipos e IA Orquestan"
|
||
|
|
>
|
||
|
|
Development Flows
|
||
|
|
</h1>
|
||
|
|
<p class="hero-subtitle">
|
||
|
|
<span
|
||
|
|
class="highlight"
|
||
|
|
data-en="Specialized agents"
|
||
|
|
data-es="Agentes especializados"
|
||
|
|
>Specialized agents</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
data-en="orchestrate pipelines for design, implementation, testing, documentation and deployment. Agents learn from history and optimize costs automatically."
|
||
|
|
data-es="orquestan pipelines para diseño, implementación, testing, documentación y deployment. Los agentes aprenden del historial y optimizan costos automáticamente."
|
||
|
|
>orchestrate pipelines for design, implementation, testing,
|
||
|
|
documentation and deployment. Agents learn from history and optimize
|
||
|
|
costs automatically.</span
|
||
|
|
>
|
||
|
|
<strong data-en="100% self-hosted." data-es="100% self-hosted."
|
||
|
|
>100% self-hosted.</strong
|
||
|
|
>
|
||
|
|
<span data-en="No SaaS." data-es="Sin SaaS.">No SaaS.</span>
|
||
|
|
</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<span
|
||
|
|
data-en="The 4 Problems It Solves"
|
||
|
|
data-es="Los 4 Problemas que Resuelve"
|
||
|
|
>The 4 Problems It Solves</span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<div class="problems-grid">
|
||
|
|
<div class="problem-card">
|
||
|
|
<div class="problem-number">01</div>
|
||
|
|
<h3 data-en="Context Switching" data-es="Cambio de Contexto">
|
||
|
|
Context Switching
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
data-en="Developers jump between tools constantly. Vapora unifies everything in one intelligent system where context flows."
|
||
|
|
data-es="Los developers saltan constantemente entre herramientas. Vapora unifica todo en un sistema inteligente donde el contexto fluye."
|
||
|
|
>
|
||
|
|
Developers jump between tools constantly. Vapora unifies
|
||
|
|
everything in one intelligent system where context flows.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="problem-card">
|
||
|
|
<div class="problem-number">02</div>
|
||
|
|
<h3
|
||
|
|
data-en="Knowledge Fragmentation"
|
||
|
|
data-es="Fragmentación de Conocimiento"
|
||
|
|
>
|
||
|
|
Knowledge Fragmentation
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
data-en="Decisions lost in threads, code scattered, docs unmaintained. RAG search and semantic indexing make knowledge discoverable."
|
||
|
|
data-es="Decisiones perdidas en threads, código disperso, docs desactualizadas. Búsqueda RAG e indexing semántico hacen el conocimiento visible."
|
||
|
|
>
|
||
|
|
Decisions lost in threads, code scattered, docs unmaintained. RAG
|
||
|
|
search and semantic indexing make knowledge discoverable.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="problem-card">
|
||
|
|
<div class="problem-number">03</div>
|
||
|
|
<h3 data-en="Manual Coordination" data-es="Coordinación Manual">
|
||
|
|
Manual Coordination
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
data-en="Orchestrating code review, testing, documentation and deployment manually creates bottlenecks. Multi-agent workflows solve this."
|
||
|
|
data-es="Orquestar manualmente code review, testing, documentación y deployment crea cuellos. Los workflows multi-agente lo resuelven."
|
||
|
|
>
|
||
|
|
Orchestrating code review, testing, documentation and deployment
|
||
|
|
manually creates bottlenecks. Multi-agent workflows solve this.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="problem-card">
|
||
|
|
<div class="problem-number">04</div>
|
||
|
|
<h3 data-en="Dev-Ops Friction" data-es="Fricción Dev-Ops">
|
||
|
|
Dev-Ops Friction
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
data-en="Handoffs between developers and operations lack visibility and context. Vapora maintains unified deployment readiness."
|
||
|
|
data-es="Los handoffs entre developers y operaciones carecen de visibilidad y contexto. Vapora mantiene unificada la deployment readiness."
|
||
|
|
>
|
||
|
|
Handoffs between developers and operations lack visibility and
|
||
|
|
context. Vapora maintains unified deployment readiness.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<span data-en="How It Works" data-es="Cómo Funciona"
|
||
|
|
>How It Works</span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<div class="features-grid">
|
||
|
|
<div class="feature-box">
|
||
|
|
<div class="feature-icon">🤖</div>
|
||
|
|
<h3
|
||
|
|
class="feature-title"
|
||
|
|
data-en="Specialized Agents"
|
||
|
|
data-es="Agentes Especializados"
|
||
|
|
>
|
||
|
|
Specialized Agents
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
class="feature-text"
|
||
|
|
data-en="Customizable agents for every role: architecture, development, testing, documentation, deployment and more. Agents learn from execution history with recency bias for continuous improvement."
|
||
|
|
data-es="Agentes customizables para cada rol: arquitectura, desarrollo, testing, documentación, deployment y más. Los agentes aprenden del historial de ejecución con sesgo de recencia para mejora continua."
|
||
|
|
>
|
||
|
|
Customizable agents for every role: architecture, development,
|
||
|
|
testing, documentation, deployment and more. Agents learn from
|
||
|
|
execution history with recency bias for continuous improvement.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box" style="border-left-color: #a855f7">
|
||
|
|
<div class="feature-icon">🧠</div>
|
||
|
|
<h3
|
||
|
|
class="feature-title"
|
||
|
|
style="color: #a855f7"
|
||
|
|
data-en="Intelligent Orchestration"
|
||
|
|
data-es="Orquestación Inteligente"
|
||
|
|
>
|
||
|
|
Intelligent Orchestration
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
class="feature-text"
|
||
|
|
data-en="Agents coordinate automatically based on dependencies, context and expertise. Learning-based selection improves over time. Budget enforcement with automatic fallback ensures cost control."
|
||
|
|
data-es="Los agentes se coordinan automáticamente basados en dependencias, contexto y expertise. La selección basada en aprendizaje mejora con el tiempo. La aplicación de presupuestos con fallback automático garantiza el control de costos."
|
||
|
|
>
|
||
|
|
Agents coordinate automatically based on dependencies, context and
|
||
|
|
expertise. Learning-based selection improves over time. Budget
|
||
|
|
enforcement with automatic fallback ensures cost control.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box" style="border-left-color: #ec4899">
|
||
|
|
<div class="feature-icon">☸️</div>
|
||
|
|
<h3
|
||
|
|
class="feature-title"
|
||
|
|
style="color: #ec4899"
|
||
|
|
data-en="Cloud-Native & Self-Hosted"
|
||
|
|
data-es="Cloud-Native y Self-Hosted"
|
||
|
|
>
|
||
|
|
Cloud-Native & Self-Hosted
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
class="feature-text"
|
||
|
|
data-en="Deploy to any Kubernetes cluster (EKS, GKE, AKS, vanilla K8s). Local Docker Compose development. Zero vendor lock-in."
|
||
|
|
data-es="Despliega en cualquier cluster Kubernetes (EKS, GKE, AKS, vanilla K8s). Desarrollo local con Docker Compose. Sin vendor lock-in."
|
||
|
|
>
|
||
|
|
Deploy to any Kubernetes cluster (EKS, GKE, AKS, vanilla K8s).
|
||
|
|
Local Docker Compose development. Zero vendor lock-in.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<span data-en="Technology Stack" data-es="Stack Tecnológico"
|
||
|
|
>Technology Stack</span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">Rust</span>
|
||
|
|
<span class="tech-badge">Axum</span>
|
||
|
|
<span class="tech-badge">SurrealDB</span>
|
||
|
|
<span class="tech-badge">NATS JetStream</span>
|
||
|
|
<span class="tech-badge">Leptos WASM</span>
|
||
|
|
<span class="tech-badge">Kubernetes</span>
|
||
|
|
<span class="tech-badge">Prometheus</span>
|
||
|
|
<span class="tech-badge">Grafana</span>
|
||
|
|
<span class="tech-badge">Knowledge Graph</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<span data-en="Available Agents" data-es="Agentes Disponibles"
|
||
|
|
>Available Agents</span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<div class="agents-grid">
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Architect" data-es="Architect"
|
||
|
|
>Architect</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="System design"
|
||
|
|
data-es="Diseño de sistemas"
|
||
|
|
>System design</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Developer" data-es="Developer"
|
||
|
|
>Developer</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Code implementation"
|
||
|
|
data-es="Implementación de código"
|
||
|
|
>Code implementation</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span
|
||
|
|
class="agent-name"
|
||
|
|
data-en="CodeReviewer"
|
||
|
|
data-es="CodeReviewer"
|
||
|
|
>CodeReviewer</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Quality assurance"
|
||
|
|
data-es="Aseguramiento de calidad"
|
||
|
|
>Quality assurance</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Tester" data-es="Tester"
|
||
|
|
>Tester</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Tests & benchmarks"
|
||
|
|
data-es="Tests y benchmarks"
|
||
|
|
>Tests & benchmarks</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Documenter" data-es="Documenter"
|
||
|
|
>Documenter</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Documentation"
|
||
|
|
data-es="Documentación"
|
||
|
|
>Documentation</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Marketer" data-es="Marketer"
|
||
|
|
>Marketer</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Marketing content"
|
||
|
|
data-es="Contenido marketing"
|
||
|
|
>Marketing content</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Presenter" data-es="Presenter"
|
||
|
|
>Presenter</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Presentations"
|
||
|
|
data-es="Presentaciones"
|
||
|
|
>Presentations</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="DevOps" data-es="DevOps"
|
||
|
|
>DevOps</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="CI/CD deployment"
|
||
|
|
data-es="Despliegue CI/CD"
|
||
|
|
>CI/CD deployment</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Monitor" data-es="Monitor"
|
||
|
|
>Monitor</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Health & alerting"
|
||
|
|
data-es="Salud y alerting"
|
||
|
|
>Health & alerting</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span class="agent-name" data-en="Security" data-es="Security"
|
||
|
|
>Security</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Audit & compliance"
|
||
|
|
data-es="Auditoría y compliance"
|
||
|
|
>Audit & compliance</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span
|
||
|
|
class="agent-name"
|
||
|
|
data-en="ProjectManager"
|
||
|
|
data-es="ProjectManager"
|
||
|
|
>ProjectManager</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Roadmap tracking"
|
||
|
|
data-es="Tracking de roadmap"
|
||
|
|
>Roadmap tracking</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="agent-item">
|
||
|
|
<span
|
||
|
|
class="agent-name"
|
||
|
|
data-en="DecisionMaker"
|
||
|
|
data-es="DecisionMaker"
|
||
|
|
>DecisionMaker</span
|
||
|
|
><span
|
||
|
|
class="agent-role"
|
||
|
|
data-en="Conflict resolution"
|
||
|
|
data-es="Resolución de conflictos"
|
||
|
|
>Conflict resolution</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="cta-section">
|
||
|
|
<h2
|
||
|
|
class="cta-title"
|
||
|
|
data-en="Ready for intelligent orchestration?"
|
||
|
|
data-es="¿Listo para orquestación inteligente?"
|
||
|
|
>
|
||
|
|
Ready for intelligent orchestration?
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
style="color: #94a3b8; margin-bottom: 2rem; font-size: 1.05rem"
|
||
|
|
data-en="Built with Rust 🦀 | Open Source | Self-Hosted"
|
||
|
|
data-es="Construido con Rust 🦀 | Open Source | Self-Hosted"
|
||
|
|
>
|
||
|
|
Built with Rust 🦀 | Open Source | Self-Hosted
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="https://github.com/vapora-platform/vapora"
|
||
|
|
class="cta-button"
|
||
|
|
data-en="Explore on GitHub →"
|
||
|
|
data-es="Explorar en GitHub →"
|
||
|
|
>Explore on GitHub →</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p
|
||
|
|
data-en="Vapora v1.2.0"
|
||
|
|
data-es="Vapora v1.2.0"
|
||
|
|
>
|
||
|
|
Vapora v1.2.0
|
||
|
|
</p>
|
||
|
|
<p
|
||
|
|
data-en="Made with Vapora dreams and Rust reality ✨"
|
||
|
|
data-es="Hecho con sueños Vapora y realidad Rust ✨"
|
||
|
|
>
|
||
|
|
Made with Vapora dreams and Rust reality ✨
|
||
|
|
</p>
|
||
|
|
<p
|
||
|
|
style="margin-top: 1rem; font-size: 0.8rem"
|
||
|
|
data-en="Intelligent Development Orchestration | Multi-Agent Multi-IA Platform"
|
||
|
|
data-es="Orquestación Inteligente de Desarrollo | Plataforma Multi-Agente Multi-IA"
|
||
|
|
>
|
||
|
|
Intelligent Development Orchestration | Multi-Agent Multi-IA Platform
|
||
|
|
</p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Language management
|
||
|
|
const LANG_KEY = "vapora-lang";
|
||
|
|
|
||
|
|
function getCurrentLanguage() {
|
||
|
|
return localStorage.getItem(LANG_KEY) || "en";
|
||
|
|
}
|
||
|
|
|
||
|
|
function switchLanguage(lang) {
|
||
|
|
localStorage.setItem(LANG_KEY, lang);
|
||
|
|
|
||
|
|
// Update language buttons
|
||
|
|
document.querySelectorAll(".lang-btn").forEach((btn) => {
|
||
|
|
btn.classList.remove("active");
|
||
|
|
if (btn.dataset.lang === lang) {
|
||
|
|
btn.classList.add("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update all translatable elements
|
||
|
|
document.querySelectorAll("[data-en][data-es]").forEach((el) => {
|
||
|
|
const content = el.dataset[lang];
|
||
|
|
// Use innerHTML for headings that might contain <br>, textContent for others
|
||
|
|
if (
|
||
|
|
el.tagName === "H1" ||
|
||
|
|
el.tagName === "H2" ||
|
||
|
|
el.tagName === "H3"
|
||
|
|
) {
|
||
|
|
el.innerHTML = content;
|
||
|
|
} else {
|
||
|
|
el.textContent = content;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.documentElement.lang = lang;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize language on page load
|
||
|
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
|
const currentLang = getCurrentLanguage();
|
||
|
|
switchLanguage(currentLang);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|