1411c750e4
- Landing page profissional com hero, features, pricing (Starter/Pro/Enterprise), FAQ - Animações no scroll, parallax, contadores animados, glassmorphism - Dashboard movido para /app.html, landing page agora é a página inicial - CTAs direcionam para /app.html
545 lines
26 KiB
HTML
545 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>AgentFlow — Orquestre Agentes IA</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
:root{
|
|
--bg:#09090b;--bg2:#111118;--bg3:#1a1a2e;
|
|
--text:#e4e4e7;--text2:#a1a1aa;--text3:#71717a;
|
|
--indigo:#6366f1;--violet:#8b5cf6;--cyan:#06b6d4;
|
|
--pink:#ec4899;--green:#10b981;
|
|
--glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.08);
|
|
--radius:16px;--radius-sm:10px;
|
|
}
|
|
html{scroll-behavior:smooth;scroll-padding-top:80px}
|
|
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
|
|
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
|
|
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
|
|
h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:700;line-height:1.2}
|
|
code,.mono{font-family:'JetBrains Mono',monospace}
|
|
a{color:inherit;text-decoration:none}
|
|
.container{max-width:1200px;margin:0 auto;padding:0 24px}
|
|
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:all .3s ease}
|
|
.btn-primary{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 4px 24px rgba(99,102,241,.3)}
|
|
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.45)}
|
|
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--glass-border)}
|
|
.btn-outline:hover{border-color:var(--indigo);color:var(--indigo)}
|
|
.badge{display:inline-block;padding:6px 16px;border-radius:50px;font-size:.8rem;font-weight:600;background:rgba(99,102,241,.12);color:var(--indigo);border:1px solid rgba(99,102,241,.2)}
|
|
.section-label{text-align:center;margin-bottom:12px}
|
|
.section-title{text-align:center;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px}
|
|
.section-sub{text-align:center;color:var(--text2);max-width:600px;margin:0 auto 56px;font-size:1.05rem}
|
|
|
|
/* Animations */
|
|
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
|
|
.reveal.visible{opacity:1;transform:translateY(0)}
|
|
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
|
|
.reveal-left.visible{opacity:1;transform:translateX(0)}
|
|
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
|
|
.reveal-right.visible{opacity:1;transform:translateX(0)}
|
|
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .7s ease,transform .7s ease}
|
|
.reveal-scale.visible{opacity:1;transform:scale(1)}
|
|
|
|
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
|
|
@keyframes pulse-glow{0%,100%{opacity:.4}50%{opacity:.8}}
|
|
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
|
|
|
|
/* NAV */
|
|
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all .3s ease}
|
|
nav.scrolled{background:rgba(9,9,11,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);padding:10px 0}
|
|
nav .container{display:flex;align-items:center;justify-content:space-between}
|
|
.nav-logo{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--indigo),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.nav-links{display:flex;gap:32px;align-items:center}
|
|
.nav-links a{font-size:.9rem;color:var(--text2);transition:color .2s}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.nav-cta{padding:10px 24px;font-size:.85rem}
|
|
.nav-menu-btn{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
|
|
|
|
/* HERO */
|
|
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
|
|
.hero-bg{position:absolute;inset:0;z-index:0}
|
|
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(99,102,241,.15) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 20%,transparent 70%)}
|
|
.hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.3}
|
|
.hero-glow-1{top:-10%;left:20%;background:var(--indigo)}
|
|
.hero-glow-2{bottom:-10%;right:15%;background:var(--violet)}
|
|
.hero-glow-3{top:40%;left:60%;background:var(--cyan);width:400px;height:400px;opacity:.15}
|
|
.hero-content{position:relative;z-index:1;max-width:800px}
|
|
.hero h1{font-size:clamp(2.2rem,5.5vw,4rem);margin:20px 0 24px;letter-spacing:-.02em}
|
|
.hero h1 span{background:linear-gradient(135deg,var(--indigo),var(--cyan),var(--violet));background-size:200% 200%;animation:gradient-shift 5s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.hero p{font-size:1.15rem;color:var(--text2);max-width:580px;margin-bottom:36px}
|
|
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
|
|
.hero-metrics{display:flex;gap:48px;flex-wrap:wrap}
|
|
.hero-metric .num{font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--indigo));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
.hero-metric .label{font-size:.85rem;color:var(--text3)}
|
|
|
|
/* FEATURES */
|
|
.features{padding:100px 0;position:relative}
|
|
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
|
.feature-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:36px 28px;transition:all .4s ease;position:relative;overflow:hidden}
|
|
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--indigo),transparent);opacity:0;transition:opacity .4s}
|
|
.feature-card:hover{transform:translateY(-8px);border-color:rgba(99,102,241,.25);box-shadow:0 20px 40px rgba(0,0,0,.3)}
|
|
.feature-card:hover::before{opacity:1}
|
|
.feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:1.3rem}
|
|
.feature-icon.indigo{background:rgba(99,102,241,.12);color:var(--indigo)}
|
|
.feature-icon.cyan{background:rgba(6,182,212,.12);color:var(--cyan)}
|
|
.feature-icon.violet{background:rgba(139,92,246,.12);color:var(--violet)}
|
|
.feature-icon.pink{background:rgba(236,72,153,.12);color:var(--pink)}
|
|
.feature-icon.green{background:rgba(16,185,129,.12);color:var(--green)}
|
|
.feature-card h3{font-size:1.15rem;margin-bottom:10px}
|
|
.feature-card p{color:var(--text2);font-size:.92rem;line-height:1.7}
|
|
|
|
/* HOW IT WORKS */
|
|
.how{padding:100px 0;background:var(--bg2)}
|
|
.steps{display:flex;gap:32px;position:relative;margin-top:16px}
|
|
.steps::before{content:'';position:absolute;top:40px;left:80px;right:80px;height:2px;background:linear-gradient(90deg,var(--indigo),var(--violet),var(--cyan))}
|
|
.step{flex:1;text-align:center;position:relative}
|
|
.step-num{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;margin:0 auto 24px;position:relative;z-index:1}
|
|
.step:nth-child(1) .step-num{background:linear-gradient(135deg,var(--indigo),var(--violet));box-shadow:0 0 40px rgba(99,102,241,.3)}
|
|
.step:nth-child(2) .step-num{background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 0 40px rgba(139,92,246,.3)}
|
|
.step:nth-child(3) .step-num{background:linear-gradient(135deg,var(--cyan),var(--green));box-shadow:0 0 40px rgba(6,182,212,.3)}
|
|
.step h3{font-size:1.1rem;margin-bottom:10px}
|
|
.step p{color:var(--text2);font-size:.9rem;max-width:280px;margin:0 auto}
|
|
|
|
/* PRICING */
|
|
.pricing{padding:100px 0}
|
|
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
|
|
.price-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:40px 32px;transition:all .4s ease;position:relative}
|
|
.price-card:hover{transform:translateY(-4px)}
|
|
.price-card.popular{border-color:var(--indigo);background:rgba(99,102,241,.06);transform:scale(1.04)}
|
|
.price-card.popular:hover{transform:scale(1.04) translateY(-4px)}
|
|
.popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 20px;border-radius:50px;font-size:.75rem;font-weight:700;background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff}
|
|
.price-card h3{font-size:1.2rem;margin-bottom:8px}
|
|
.price-card .desc{color:var(--text3);font-size:.85rem;margin-bottom:24px}
|
|
.price-val{font-family:'Sora',sans-serif;font-size:2.8rem;font-weight:800;margin-bottom:4px}
|
|
.price-val span{font-size:.95rem;font-weight:400;color:var(--text3)}
|
|
.price-card .period{color:var(--text3);font-size:.85rem;margin-bottom:28px}
|
|
.price-features{list-style:none;margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
|
|
.price-features li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text2)}
|
|
.price-features li::before{content:'✓';color:var(--green);font-weight:700;font-size:.85rem}
|
|
.price-card .btn{width:100%;justify-content:center}
|
|
|
|
/* FAQ */
|
|
.faq{padding:100px 0;background:var(--bg2)}
|
|
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
|
|
.faq-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .3s}
|
|
.faq-item.open{border-color:rgba(99,102,241,.3)}
|
|
.faq-q{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:.95rem;transition:color .2s}
|
|
.faq-q:hover{color:var(--indigo)}
|
|
.faq-q .arrow{transition:transform .3s;font-size:1.2rem;color:var(--text3)}
|
|
.faq-item.open .faq-q .arrow{transform:rotate(180deg)}
|
|
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
|
|
.faq-item.open .faq-a{max-height:200px}
|
|
.faq-a-inner{padding:0 24px 20px;color:var(--text2);font-size:.9rem;line-height:1.8}
|
|
|
|
/* CTA */
|
|
.cta-section{padding:100px 0;position:relative;text-align:center;overflow:hidden}
|
|
.cta-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.08),rgba(6,182,212,.08));z-index:0}
|
|
.cta-section .container{position:relative;z-index:1}
|
|
.cta-section h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px}
|
|
.cta-section p{color:var(--text2);max-width:500px;margin:0 auto 36px;font-size:1.05rem}
|
|
|
|
/* FOOTER */
|
|
footer{padding:48px 0 32px;border-top:1px solid var(--glass-border)}
|
|
.footer-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:40px;flex-wrap:wrap;gap:32px}
|
|
.footer-brand .nav-logo{margin-bottom:12px;display:block}
|
|
.footer-brand p{color:var(--text3);font-size:.85rem;max-width:280px}
|
|
.footer-links{display:flex;gap:56px}
|
|
.footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:14px}
|
|
.footer-col a{display:block;font-size:.88rem;color:var(--text2);margin-bottom:8px;transition:color .2s}
|
|
.footer-col a:hover{color:var(--text)}
|
|
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid var(--glass-border);color:var(--text3);font-size:.8rem}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:900px){
|
|
.features-grid,.pricing-grid{grid-template-columns:1fr}
|
|
.steps{flex-direction:column;gap:40px}
|
|
.steps::before{display:none}
|
|
.nav-links{display:none}
|
|
.nav-menu-btn{display:block}
|
|
.hero-metrics{gap:24px}
|
|
.footer-links{gap:32px}
|
|
.price-card.popular{transform:none}
|
|
.price-card.popular:hover{transform:translateY(-4px)}
|
|
}
|
|
@media(max-width:600px){
|
|
.hero h1{font-size:2rem}
|
|
.hero-btns{flex-direction:column}
|
|
.hero-btns .btn{width:100%;justify-content:center}
|
|
.footer-top{flex-direction:column}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav id="nav">
|
|
<div class="container">
|
|
<a href="#" class="nav-logo">⬡ AgentFlow</a>
|
|
<div class="nav-links">
|
|
<a href="#features">Features</a>
|
|
<a href="#how">Como Funciona</a>
|
|
<a href="#pricing">Preços</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a href="/app.html" class="btn btn-primary nav-cta" style="color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);font-weight:700">Começar Agora</a>
|
|
</div>
|
|
<button class="nav-menu-btn" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero" id="hero">
|
|
<div class="hero-bg">
|
|
<div class="hero-grid"></div>
|
|
<div class="hero-glow hero-glow-1"></div>
|
|
<div class="hero-glow hero-glow-2"></div>
|
|
<div class="hero-glow hero-glow-3"></div>
|
|
</div>
|
|
<div class="container hero-content">
|
|
<div class="badge reveal">🚀 Plataforma #1 de Orquestração de Agentes IA</div>
|
|
<h1 class="reveal">Orquestre Agentes IA<br>com <span>Precisão Cirúrgica</span></h1>
|
|
<p class="reveal">Transforme o Claude Code em uma plataforma de automação completa. Pipelines visuais, execução em tempo real e controle total — sem escrever uma linha de código.</p>
|
|
<div class="hero-btns reveal">
|
|
<a href="/app.html" class="btn btn-primary">Começar Gratuitamente →</a>
|
|
<a href="#how" class="btn btn-outline">▶ Ver Demo</a>
|
|
</div>
|
|
<div class="hero-metrics reveal">
|
|
<div class="hero-metric"><div class="num" data-target="10000000" data-suffix="+">0</div><div class="label">Execuções</div></div>
|
|
<div class="hero-metric"><div class="num" data-target="99.9" data-suffix="%" data-decimal="1">0</div><div class="label">Uptime</div></div>
|
|
<div class="hero-metric"><div class="num" data-target="2.5" data-suffix="s" data-decimal="1">0</div><div class="label">Tempo Médio</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-label"><span class="badge reveal">Funcionalidades</span></div>
|
|
<h2 class="section-title reveal">Tudo que você precisa para<br>orquestrar agentes IA</h2>
|
|
<p class="section-sub reveal">Uma plataforma completa para criar, executar e monitorar agentes inteligentes com controle total.</p>
|
|
<div class="features-grid">
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon indigo">⬡</div>
|
|
<h3>Pipelines Visuais</h3>
|
|
<p>Editor drag-and-drop com canvas HTML5. Monte fluxos complexos conectando agentes em sequência, com sumarização automática entre steps.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon cyan">⚡</div>
|
|
<h3>Execução em Tempo Real</h3>
|
|
<p>Streaming via WebSocket com terminal integrado. Veja cada token sendo gerado, chamadas de ferramenta e custos ao vivo.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon violet">⏱</div>
|
|
<h3>Agendamento Inteligente</h3>
|
|
<p>Cron scheduling com retry automático e backoff exponencial. Agende execuções recorrentes e nunca mais esqueça uma tarefa.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon pink">👤</div>
|
|
<h3>Human-in-the-Loop</h3>
|
|
<p>Aprovação manual entre steps do pipeline. Defina pontos de controle onde um humano valida antes de prosseguir.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon green">↩</div>
|
|
<h3>Versionamento</h3>
|
|
<p>Histórico completo de alterações com rollback instantâneo. Cada edição gera uma versão que pode ser restaurada.</p>
|
|
</div>
|
|
|
|
<div class="feature-card reveal">
|
|
<div class="feature-icon indigo">🔗</div>
|
|
<h3>Webhooks & Integrações</h3>
|
|
<p>Conecte com GitHub, CI/CD ou qualquer endpoint HTTP. Assinatura HMAC-SHA256 compatível com GitHub Webhooks.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section class="how" id="how">
|
|
<div class="container">
|
|
<div class="section-label"><span class="badge reveal">Como Funciona</span></div>
|
|
<h2 class="section-title reveal">Três passos para a automação</h2>
|
|
<p class="section-sub reveal">Do zero à produção em minutos. Configure, conecte e execute.</p>
|
|
<div class="steps">
|
|
<div class="step reveal">
|
|
<div class="step-num">1</div>
|
|
<h3>Configure seus Agentes</h3>
|
|
<p>Defina modelos, system prompts, permissões, diretórios de trabalho e secrets. Cada agente é um especialista.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="step-num">2</div>
|
|
<h3>Monte Pipelines Visuais</h3>
|
|
<p>Arraste e conecte agentes em sequência. Adicione aprovações humanas nos pontos críticos do fluxo.</p>
|
|
</div>
|
|
<div class="step reveal">
|
|
<div class="step-num">3</div>
|
|
<h3>Execute e Monitore</h3>
|
|
<p>Acompanhe tudo em tempo real. Terminal ao vivo, métricas de custo, relatórios automáticos e histórico completo.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING -->
|
|
<section class="pricing" id="pricing">
|
|
<div class="container">
|
|
<div class="section-label"><span class="badge reveal">Preços</span></div>
|
|
<h2 class="section-title reveal">Planos para cada necessidade</h2>
|
|
<p class="section-sub reveal">Comece pequeno e escale conforme sua operação cresce. Sem surpresas.</p>
|
|
<div class="pricing-grid">
|
|
|
|
<div class="price-card reveal">
|
|
<h3>Starter</h3>
|
|
<p class="desc">Para desenvolvedores individuais</p>
|
|
<div class="price-val">R$197<span>/mês</span></div>
|
|
<p class="period">Cobrado mensalmente</p>
|
|
<ul class="price-features">
|
|
<li>3 agentes configuráveis</li>
|
|
<li>5 pipelines</li>
|
|
<li>500 execuções/mês</li>
|
|
<li>1 usuário</li>
|
|
<li>Suporte por email</li>
|
|
<li>Dashboard e métricas</li>
|
|
</ul>
|
|
<a href="/app.html" class="btn btn-outline">Escolher Starter</a>
|
|
</div>
|
|
|
|
<div class="price-card popular reveal-scale">
|
|
<div class="popular-badge">Mais Popular</div>
|
|
<h3>Pro</h3>
|
|
<p class="desc">Para equipes de engenharia</p>
|
|
<div class="price-val">R$497<span>/mês</span></div>
|
|
<p class="period">Cobrado mensalmente</p>
|
|
<ul class="price-features">
|
|
<li>15 agentes configuráveis</li>
|
|
<li>Pipelines ilimitados</li>
|
|
<li>5.000 execuções/mês</li>
|
|
<li>5 usuários</li>
|
|
<li>Webhooks ilimitados</li>
|
|
<li>Aprovação humana</li>
|
|
<li>Relatórios avançados</li>
|
|
<li>Suporte prioritário</li>
|
|
</ul>
|
|
<a href="/app.html" class="btn btn-primary">Escolher Pro</a>
|
|
</div>
|
|
|
|
<div class="price-card reveal">
|
|
<h3>Enterprise</h3>
|
|
<p class="desc">Para operações em escala</p>
|
|
<div class="price-val">R$1.297<span>/mês</span></div>
|
|
<p class="period">Cobrado mensalmente</p>
|
|
<ul class="price-features">
|
|
<li>Agentes ilimitados</li>
|
|
<li>Pipelines ilimitados</li>
|
|
<li>Execuções ilimitadas</li>
|
|
<li>Usuários ilimitados</li>
|
|
<li>Suporte 24/7 prioritário</li>
|
|
<li>SLA 99.9% garantido</li>
|
|
<li>Deploy on-premise</li>
|
|
<li>SSO / SAML</li>
|
|
</ul>
|
|
<a href="/app.html" class="btn btn-outline">Falar com Vendas</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section class="faq" id="faq">
|
|
<div class="container">
|
|
<div class="section-label"><span class="badge reveal">FAQ</span></div>
|
|
<h2 class="section-title reveal">Perguntas Frequentes</h2>
|
|
<p class="section-sub reveal">Tudo o que você precisa saber antes de começar.</p>
|
|
<div class="faq-list">
|
|
|
|
<div class="faq-item reveal">
|
|
<div class="faq-q" onclick="this.parentElement.classList.toggle('open')">
|
|
O que é o AgentFlow?
|
|
<span class="arrow">▾</span>
|
|
</div>
|
|
<div class="faq-a"><div class="faq-a-inner">AgentFlow é uma plataforma web que transforma o Claude Code CLI em um sistema completo de orquestração de agentes IA. Você pode criar agentes especializados, conectá-los em pipelines visuais, agendar execuções automáticas e monitorar tudo em tempo real — sem precisar usar a linha de comando.</div></div>
|
|
</div>
|
|
|
|
<div class="faq-item reveal">
|
|
<div class="faq-q" onclick="this.parentElement.classList.toggle('open')">
|
|
Preciso saber programar para usar?
|
|
<span class="arrow">▾</span>
|
|
</div>
|
|
<div class="faq-a"><div class="faq-a-inner">Não. A interface é totalmente visual. Você configura agentes por formulários, monta pipelines com drag-and-drop e acompanha execuções no terminal integrado. Desenvolvedores avançados podem usar webhooks e a API REST para integrações customizadas.</div></div>
|
|
</div>
|
|
|
|
<div class="faq-item reveal">
|
|
<div class="faq-q" onclick="this.parentElement.classList.toggle('open')">
|
|
Como funciona a integração com Claude Code?
|
|
<span class="arrow">▾</span>
|
|
</div>
|
|
<div class="faq-a"><div class="faq-a-inner">O AgentFlow executa o CLI do Claude Code como subprocesso, herdando todas as suas capacidades — ferramentas, permissões, sessões. O output é parseado em tempo real e transmitido via WebSocket para seu navegador. Isso significa que qualquer coisa que o Claude Code faz no terminal, o AgentFlow faz na interface web.</div></div>
|
|
</div>
|
|
|
|
<div class="faq-item reveal">
|
|
<div class="faq-q" onclick="this.parentElement.classList.toggle('open')">
|
|
Posso cancelar a qualquer momento?
|
|
<span class="arrow">▾</span>
|
|
</div>
|
|
<div class="faq-a"><div class="faq-a-inner">Sim. Todos os planos são mensais sem fidelidade. Você pode fazer upgrade, downgrade ou cancelar quando quiser. Seus dados ficam disponíveis por 30 dias após o cancelamento.</div></div>
|
|
</div>
|
|
|
|
<div class="faq-item reveal">
|
|
<div class="faq-q" onclick="this.parentElement.classList.toggle('open')">
|
|
Vocês oferecem teste gratuito?
|
|
<span class="arrow">▾</span>
|
|
</div>
|
|
<div class="faq-a"><div class="faq-a-inner">Sim! Oferecemos 14 dias de teste gratuito no plano Pro, sem precisar de cartão de crédito. Você pode explorar todas as funcionalidades e decidir com calma qual plano faz mais sentido para sua operação.</div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA FINAL -->
|
|
<section class="cta-section">
|
|
<div class="cta-bg"></div>
|
|
<div class="container">
|
|
<h2 class="reveal">Pronto para Automatizar<br>seus Agentes IA?</h2>
|
|
<p class="reveal">Junte-se a milhares de equipes que já usam AgentFlow para escalar suas operações com inteligência artificial.</p>
|
|
<div class="reveal">
|
|
<a href="/app.html" class="btn btn-primary" style="padding:18px 44px;font-size:1.05rem">Começar Gratuitamente →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<span class="nav-logo">⬡ AgentFlow</span>
|
|
<p>A plataforma definitiva para orquestração de agentes IA. Do CLI à interface visual.</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<div class="footer-col">
|
|
<h4>Produto</h4>
|
|
<a href="#features">Features</a>
|
|
<a href="#pricing">Preços</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a href="#">Changelog</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Empresa</h4>
|
|
<a href="#">Sobre</a>
|
|
<a href="#">Blog</a>
|
|
<a href="#">Carreiras</a>
|
|
<a href="#">Contato</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Legal</h4>
|
|
<a href="#">Termos de Uso</a>
|
|
<a href="#">Privacidade</a>
|
|
<a href="#">SLA</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">© 2026 AgentFlow. Todos os direitos reservados.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Intersection Observer for scroll animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
if (entry.target.querySelector('[data-target]')) {
|
|
entry.target.querySelectorAll('[data-target]').forEach(animateCounter);
|
|
}
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
document.querySelectorAll('.reveal,.reveal-left,.reveal-right,.reveal-scale').forEach(el => observer.observe(el));
|
|
|
|
// Staggered delays for grid items
|
|
document.querySelectorAll('.features-grid .feature-card, .pricing-grid .price-card, .steps .step').forEach((el, i) => {
|
|
el.style.transitionDelay = `${i * 0.1}s`;
|
|
});
|
|
|
|
// Counter animation
|
|
function animateCounter(el) {
|
|
if (el.dataset.animated) return;
|
|
el.dataset.animated = '1';
|
|
const target = parseFloat(el.dataset.target);
|
|
const suffix = el.dataset.suffix || '';
|
|
const decimal = parseInt(el.dataset.decimal) || 0;
|
|
const duration = 2000;
|
|
const start = performance.now();
|
|
|
|
function format(n) {
|
|
if (target >= 1000000) return (n / 1000000).toFixed(n >= target ? 0 : 0) + 'M';
|
|
if (target >= 1000) return (n / 1000).toFixed(0) + 'K';
|
|
return decimal ? n.toFixed(decimal) : Math.floor(n).toString();
|
|
}
|
|
|
|
function update(now) {
|
|
const elapsed = now - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const ease = 1 - Math.pow(1 - progress, 3);
|
|
const current = ease * target;
|
|
el.textContent = format(current) + suffix;
|
|
if (progress < 1) requestAnimationFrame(update);
|
|
}
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
// Also trigger counters in hero-metrics
|
|
document.querySelectorAll('.hero-metrics .num').forEach(el => {
|
|
const heroObs = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) { animateCounter(entry.target); heroObs.unobserve(entry.target); }
|
|
});
|
|
}, { threshold: 0.5 });
|
|
heroObs.observe(el);
|
|
});
|
|
|
|
// Nav scroll effect
|
|
let lastScroll = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.getElementById('nav');
|
|
nav.classList.toggle('scrolled', window.scrollY > 40);
|
|
lastScroll = window.scrollY;
|
|
}, { passive: true });
|
|
|
|
// Parallax on hero glows
|
|
window.addEventListener('scroll', () => {
|
|
requestAnimationFrame(() => {
|
|
const s = window.scrollY;
|
|
const glows = document.querySelectorAll('.hero-glow');
|
|
glows.forEach((g, i) => {
|
|
const speed = [0.15, 0.1, 0.2][i] || 0.1;
|
|
g.style.transform = `translateY(${s * speed}px)`;
|
|
});
|
|
const grid = document.querySelector('.hero-grid');
|
|
if (grid) grid.style.transform = `translateY(${s * 0.05}px)`;
|
|
});
|
|
}, { passive: true });
|
|
|
|
// Mobile nav
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@media(max-width:900px){
|
|
.nav-links.show{display:flex!important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(9,9,11,.95);backdrop-filter:blur(20px);padding:24px;gap:16px;border-bottom:1px solid var(--glass-border)}
|
|
}`;
|
|
document.head.appendChild(style);
|
|
</script>
|
|
</body>
|
|
</html>
|