Ricardo Carneiro
719ffbaecd
All checks were successful
Deploy n8ngo Landing Page / build-and-deploy (push) Successful in 3m54s
HTML/CSS estático com dark mode, seções hero, como funciona, features, comparação, free tier e pré-cadastro via Tally.so. Inclui Dockerfile (nginx:alpine na porta 8070) e pipeline Gitea para deploy automático em n8ngo.convert-it.online.
472 lines
19 KiB
HTML
472 lines
19 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>n8ngo — Hospedagem Managed de n8n</title>
|
||
<meta name="description" content="Seu n8n no ar em 60 segundos. Hospedagem managed com subdomínio próprio, backup automático e monitoramento 24/7. Você cria os fluxos, nós cuidamos do resto." />
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="n8ngo — Hospedagem Managed de n8n" />
|
||
<meta property="og:description" content="Seu n8n no ar em 60 segundos. Subdomínio, backup e monitoramento inclusos." />
|
||
<meta property="og:type" content="website" />
|
||
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%230f172a'/><text x='4' y='24' font-size='22' font-family='monospace' font-weight='bold' fill='%2310b981'>n</text></svg>" />
|
||
|
||
<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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
NAV
|
||
══════════════════════════════════════════ -->
|
||
<nav class="nav" role="navigation" aria-label="Navegação principal">
|
||
<div class="container nav-inner">
|
||
<a href="#" class="nav-logo" aria-label="n8ngo início">n8n<span>go</span></a>
|
||
<a href="#precadastro" class="nav-cta">
|
||
Quero meu n8n →
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
HERO
|
||
══════════════════════════════════════════ -->
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="container">
|
||
|
||
<div class="promo-banner fade-in" role="alert" aria-live="polite">
|
||
<span class="promo-fire" aria-hidden="true">🎁</span>
|
||
<span>
|
||
<strong>Promoção de lançamento:</strong>
|
||
os <strong>10 primeiros</strong> cadastros completos ganham
|
||
<strong>6 meses grátis</strong> no plano básico.
|
||
</span>
|
||
<a href="#precadastro" class="promo-cta-link">Garantir vaga →</a>
|
||
</div>
|
||
|
||
<div class="hero-eyebrow fade-in">
|
||
<span class="dot" aria-hidden="true"></span>
|
||
Em fase de validação — vagas limitadas
|
||
</div>
|
||
|
||
<h1 class="hero-title fade-in" id="hero-title">
|
||
Seu n8n no ar em<br class="br-desktop" />
|
||
<span class="highlight">60 segundos</span>
|
||
</h1>
|
||
|
||
<p class="hero-sub fade-in">
|
||
Hospedagem managed de n8n com backup automático, monitoramento 24/7
|
||
e subdomínio pronto. Você cria os fluxos, nós cuidamos do resto.
|
||
</p>
|
||
|
||
<div class="hero-actions fade-in">
|
||
<a href="#precadastro" class="btn-primary">
|
||
Quero meu n8n agora
|
||
</a>
|
||
<a href="#como-funciona" class="btn-secondary">
|
||
Como funciona ↓
|
||
</a>
|
||
</div>
|
||
|
||
<div class="fade-in">
|
||
<div class="hero-domain" aria-label="Exemplo de subdomínio: seudominio.n8ngo.host">
|
||
<span class="lock-icon" aria-hidden="true">🔒</span>
|
||
<span class="domain-part">seudominio</span><span>.n8ngo.host</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
COMO FUNCIONA
|
||
══════════════════════════════════════════ -->
|
||
<section class="section how" id="como-funciona" aria-labelledby="how-title">
|
||
<div class="container">
|
||
|
||
<span class="section-label fade-in">Como funciona</span>
|
||
<h2 class="section-title fade-in" id="how-title">Simples assim</h2>
|
||
<p class="section-sub fade-in">
|
||
Do zero ao n8n rodando em produção em três passos. Sem linha de comando, sem dor de cabeça.
|
||
</p>
|
||
|
||
<div class="how-grid" role="list">
|
||
|
||
<article class="step-card fade-in" role="listitem">
|
||
<div class="step-number" aria-label="Passo 1">1</div>
|
||
<h3 class="step-title">Escolha seu nome</h3>
|
||
<p class="step-desc">
|
||
Indique o subdomínio que quer usar — por exemplo,
|
||
<strong>minha-empresa</strong>.n8ngo.host.
|
||
É o seu espaço, com sua identidade.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="step-card fade-in" role="listitem">
|
||
<div class="step-number" aria-label="Passo 2">2</div>
|
||
<h3 class="step-title">Nós configuramos tudo</h3>
|
||
<p class="step-desc">
|
||
Subimos o n8n, configuramos banco de dados, SSL, DNS, Uptime Kuma
|
||
e os backups automáticos. Você não precisa tocar em nada.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="step-card fade-in" role="listitem">
|
||
<div class="step-number" aria-label="Passo 3">3</div>
|
||
<h3 class="step-title">Comece a automatizar</h3>
|
||
<p class="step-desc">
|
||
Acesse seu painel n8n, crie seus fluxos e deixe a automação
|
||
trabalhar por você. 24 horas por dia, 7 dias por semana.
|
||
</p>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
O QUE ESTÁ INCLUSO
|
||
══════════════════════════════════════════ -->
|
||
<section class="section" id="incluso" aria-labelledby="incluso-title">
|
||
<div class="container">
|
||
|
||
<span class="section-label fade-in">O que está incluso</span>
|
||
<h2 class="section-title fade-in" id="incluso-title">Tudo que você precisa.<br />Nada que você não precisa.</h2>
|
||
<p class="section-sub fade-in">
|
||
Cada instância n8ngo vem com uma stack completa pronta para produção.
|
||
</p>
|
||
|
||
<div class="features-grid" role="list">
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">🚀</div>
|
||
<div class="feature-body">
|
||
<h3>n8n pronto pra uso</h3>
|
||
<p>Última versão estável do n8n, configurado e otimizado para performance. Atualizações gerenciadas por nós.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">🌐</div>
|
||
<div class="feature-body">
|
||
<h3>Subdomínio exclusivo</h3>
|
||
<p><em>seudominio</em>.n8ngo.host com SSL/TLS configurado. Agências podem ter sub-subdomínios para cada cliente.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">💾</div>
|
||
<div class="feature-body">
|
||
<h3>Backup automático</h3>
|
||
<p>Backup diário dos fluxos + backup completo semanal. Painel de acesso para restauração quando precisar.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">📊</div>
|
||
<div class="feature-body">
|
||
<h3>Monitoramento 24/7</h3>
|
||
<p>Uptime Kuma integrado monitorando sua instância continuamente. Alertas por email em caso de queda.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">🏢</div>
|
||
<div class="feature-body">
|
||
<h3>Modelo Agência</h3>
|
||
<p>Gerencie múltiplos clientes com sub-subdomínios dedicados: <em>cliente.agencia</em>.n8ngo.host.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card fade-in" role="listitem">
|
||
<div class="feature-icon" aria-hidden="true">🔒</div>
|
||
<div class="feature-body">
|
||
<h3>Dados no Brasil</h3>
|
||
<p>Servidores em São Paulo. Conformidade com a LGPD. Seus dados e os dos seus clientes ficam aqui.</p>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
COMPARAÇÃO
|
||
══════════════════════════════════════════ -->
|
||
<section class="section comparison" id="comparacao" aria-labelledby="comparacao-title">
|
||
<div class="container">
|
||
|
||
<span class="section-label fade-in">Comparação</span>
|
||
<h2 class="section-title fade-in" id="comparacao-title">n8ngo vs as outras opções</h2>
|
||
<p class="section-sub fade-in">
|
||
Você pode configurar tudo sozinho. Mas será que faz sentido?
|
||
</p>
|
||
|
||
<div class="table-wrapper fade-in">
|
||
<table aria-label="Comparação entre opções de hospedagem de n8n">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Recurso</th>
|
||
<th scope="col">VPS + n8n manual</th>
|
||
<th scope="col">n8n Cloud</th>
|
||
<th scope="col" class="col-highlight">n8ngo</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Setup inicial</td>
|
||
<td>Você configura tudo</td>
|
||
<td>Automático</td>
|
||
<td class="col-highlight">Automático</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Subdomínio próprio</td>
|
||
<td class="partial">Você configura DNS</td>
|
||
<td><span class="cross" aria-label="Não disponível">✕ Não disponível</span></td>
|
||
<td class="col-highlight"><span class="check" aria-label="Incluso">✓ Incluso</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Backup de fluxos</td>
|
||
<td class="partial">Você configura</td>
|
||
<td class="partial">Limitado</td>
|
||
<td class="col-highlight"><span class="check" aria-label="Diário + semanal">✓ Diário + semanal</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Monitoramento</td>
|
||
<td class="partial">Você instala</td>
|
||
<td class="partial">Básico</td>
|
||
<td class="col-highlight"><span class="check" aria-label="Uptime Kuma integrado">✓ Uptime Kuma integrado</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Alertas de queda</td>
|
||
<td class="partial">Você configura</td>
|
||
<td class="partial">Email</td>
|
||
<td class="col-highlight"><span class="check" aria-label="Email automático">✓ Email automático</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Modelo Agência</td>
|
||
<td><span class="cross" aria-label="Não">✕ Não</span></td>
|
||
<td><span class="cross" aria-label="Não">✕ Não</span></td>
|
||
<td class="col-highlight"><span class="check" aria-label="Sub-subdomínios">✓ Sub-subdomínios</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Execuções</td>
|
||
<td>Ilimitadas</td>
|
||
<td class="partial">Por plano</td>
|
||
<td class="col-highlight"><span class="check" aria-label="Ilimitadas">✓ Ilimitadas</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Dados no Brasil</td>
|
||
<td class="partial">Depende do servidor</td>
|
||
<td><span class="cross" aria-label="Não">✕ Não</span></td>
|
||
<td class="col-highlight"><span class="check" aria-label="São Paulo, LGPD">✓ São Paulo, LGPD</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Preço</td>
|
||
<td>R$20–80/mês + seu tempo</td>
|
||
<td>A partir de €24/mês</td>
|
||
<td class="col-highlight">A definir*</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p style="margin-top:0.75rem; font-size:0.8125rem; color:var(--text-muted);">
|
||
* Estamos em fase de validação. Você pode influenciar o preço final no formulário de pré-cadastro.
|
||
</p>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
NÃO QUER PAGAR?
|
||
══════════════════════════════════════════ -->
|
||
<section class="section" id="gratis" aria-labelledby="gratis-title">
|
||
<div class="container">
|
||
|
||
<span class="section-label fade-in">Transparência</span>
|
||
<h2 class="section-title fade-in" id="gratis-title">Não quer pagar? Sem problema.</h2>
|
||
<p class="section-sub fade-in">
|
||
O n8n é open source e você pode rodá-lo gratuitamente no seu computador.
|
||
Aqui está como fazer isso agora mesmo.
|
||
</p>
|
||
|
||
<div class="free-box fade-in">
|
||
<p>
|
||
O n8n pertence à n8n GmbH e é distribuído gratuitamente com código aberto.
|
||
Se você só quer explorar a ferramenta ou automatizar processos locais, não
|
||
precisa pagar nada — use o Docker e rode em qualquer máquina:
|
||
</p>
|
||
|
||
<ol class="steps-list" aria-label="Passos para rodar o n8n localmente">
|
||
<li>
|
||
<span class="step-num" aria-hidden="true">1</span>
|
||
<span>
|
||
Instale o
|
||
<a href="https://docs.docker.com/get-docker/" target="_blank" rel="noopener noreferrer">Docker</a>
|
||
na sua máquina (Windows, Mac ou Linux — tudo funciona).
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span class="step-num" aria-hidden="true">2</span>
|
||
<span>
|
||
Abra o terminal e rode:<br />
|
||
<code class="code-block">docker run -it --rm -p 5678:5678 n8nio/n8n</code>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span class="step-num" aria-hidden="true">3</span>
|
||
<span>
|
||
Acesse
|
||
<code class="code-block">localhost:5678</code>
|
||
no navegador. Pronto — n8n funcionando.
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span class="step-num" aria-hidden="true">4</span>
|
||
<span>
|
||
Quando quiser salvar seus fluxos, exporte-os como JSON via
|
||
<strong>Menu → Download</strong>. É a sua propriedade, leve para onde quiser.
|
||
</span>
|
||
</li>
|
||
</ol>
|
||
|
||
<p>
|
||
Documentação oficial do n8n:
|
||
<a href="https://docs.n8n.io" target="_blank" rel="noopener noreferrer">docs.n8n.io →</a>
|
||
</p>
|
||
|
||
<p class="tagline">
|
||
Quando quiser colocar em produção 24/7 com backup automático e monitoramento real,
|
||
estaremos aqui — sem julgamentos. 😉
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
PRÉ-CADASTRO
|
||
══════════════════════════════════════════ -->
|
||
<section class="section precadastro" id="precadastro" aria-labelledby="form-title">
|
||
<div class="container">
|
||
|
||
<div style="text-align:center;">
|
||
<span class="section-label fade-in">Pré-cadastro</span>
|
||
<h2 class="section-title fade-in" id="form-title">Quer ser um dos primeiros?</h2>
|
||
<p class="section-sub fade-in" style="margin:0 auto;">
|
||
Estamos em fase de validação. Cadastre-se e ajude a moldar o n8ngo —
|
||
sua opinião define o preço e as funcionalidades do produto final.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="promo-form-banner fade-in" role="note">
|
||
<div class="promo-form-icon" aria-hidden="true">🎁</div>
|
||
<div>
|
||
<strong>Promoção de lançamento</strong><br />
|
||
Os <strong>10 primeiros cadastros validados</strong> ganham 6 meses grátis no plano básico.
|
||
Para valer, preencha o formulário abaixo e clique em <strong>Submit</strong> — só conta quem
|
||
concluir o envio pelo Tally. Em até <strong>30 dias</strong> entraremos em contato pelo email
|
||
informado para confirmar os ganhadores — use um email que você acompanha de verdade.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-wrapper fade-in">
|
||
<!-- Tally.so embed -->
|
||
<iframe
|
||
data-tally-src="https://tally.so/embed/EkDM6X?alignLeft=1&hideTitle=1&dynamicHeight=1"
|
||
loading="lazy"
|
||
width="100%"
|
||
height="782"
|
||
frameborder="0"
|
||
marginheight="0"
|
||
marginwidth="0"
|
||
title="N8N Go! — Formulário de Pré-cadastro"
|
||
aria-label="Formulário de pré-cadastro n8ngo"
|
||
></iframe>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
FOOTER
|
||
══════════════════════════════════════════ -->
|
||
<footer class="footer" role="contentinfo">
|
||
<div class="container footer-inner">
|
||
|
||
<div class="footer-logo">
|
||
n8n<span>go</span> — Hospedagem managed de n8n
|
||
</div>
|
||
|
||
<nav class="footer-links" aria-label="Links do rodapé">
|
||
<a href="/termos" aria-label="Termos de uso (em breve)">Termos de Uso</a>
|
||
<a href="/privacidade" aria-label="Política de privacidade (em breve)">Privacidade</a>
|
||
<a href="mailto:ola@n8ngo.com.br">Contato</a>
|
||
</nav>
|
||
|
||
<p class="footer-disclaimer">
|
||
n8ngo não é afiliado ao n8n GmbH.
|
||
</p>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
SCRIPTS
|
||
══════════════════════════════════════════ -->
|
||
|
||
<!-- Tally embed loader -->
|
||
<script>
|
||
var d = document,
|
||
w = "https://tally.so/widgets/embed.js",
|
||
v = function () {
|
||
if (typeof Tally !== "undefined") {
|
||
Tally.loadEmbeds();
|
||
} else {
|
||
d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach(function (e) {
|
||
e.src = e.dataset.tallySrc;
|
||
});
|
||
}
|
||
};
|
||
if (typeof Tally !== "undefined") {
|
||
v();
|
||
} else if (d.querySelector('script[src="' + w + '"]') == null) {
|
||
var s = d.createElement("script");
|
||
s.src = w;
|
||
s.onload = v;
|
||
s.onerror = v;
|
||
d.body.appendChild(s);
|
||
}
|
||
</script>
|
||
|
||
<!-- Fade-in on scroll -->
|
||
<script>
|
||
(function () {
|
||
var els = document.querySelectorAll('.fade-in');
|
||
|
||
if (!('IntersectionObserver' in window)) {
|
||
els.forEach(function (el) { el.classList.add('visible'); });
|
||
return;
|
||
}
|
||
|
||
var observer = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
||
|
||
els.forEach(function (el) { observer.observe(el); });
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|