feat: landing page inicial do n8ngo
All checks were successful
Deploy n8ngo Landing Page / build-and-deploy (push) Successful in 3m54s
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.
This commit is contained in:
commit
719ffbaecd
7
.claude/settings.local.json
Normal file
7
.claude/settings.local.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(ssh:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
81
.gitea/workflows/deploy.yml
Normal file
81
.gitea/workflows/deploy.yml
Normal file
@ -0,0 +1,81 @@
|
||||
name: Deploy n8ngo Landing Page
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v2
|
||||
|
||||
- name: Cache Docker layers
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: /tmp/.buildx-cache
|
||||
key: ${{ runner.os }}-buildx-${{ github.sha }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-buildx-
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@v4
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
platforms: linux/arm64
|
||||
push: true
|
||||
tags: |
|
||||
registry.redecarneir.us/n8ngo-landing:latest
|
||||
registry.redecarneir.us/n8ngo-landing:${{ github.sha }}
|
||||
cache-from: type=local,src=/tmp/.buildx-cache
|
||||
cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
|
||||
build-args: BUILDKIT_INLINE_CACHE=1
|
||||
|
||||
- name: Move cache
|
||||
run: |
|
||||
rm -rf /tmp/.buildx-cache
|
||||
mv /tmp/.buildx-cache-new /tmp/.buildx-cache
|
||||
|
||||
- name: Deploy to Production
|
||||
uses: appleboy/ssh-action@v1.0.3
|
||||
with:
|
||||
host: 129.146.116.218
|
||||
username: ${{ secrets.SSH_USERNAME }}
|
||||
key: ${{ secrets.SSH_PRIVATE_KEY }}
|
||||
port: 22
|
||||
timeout: 60s
|
||||
script: |
|
||||
docker stop n8ngo-landing || true
|
||||
docker rm n8ngo-landing || true
|
||||
docker rmi registry.redecarneir.us/n8ngo-landing:latest || true
|
||||
docker pull registry.redecarneir.us/n8ngo-landing:latest
|
||||
docker run -d \
|
||||
--name n8ngo-landing \
|
||||
--restart unless-stopped \
|
||||
--network host \
|
||||
--memory=256m \
|
||||
--cpus=0.5 \
|
||||
-e NGINX_PORT=8070 \
|
||||
registry.redecarneir.us/n8ngo-landing:latest
|
||||
docker image prune -f
|
||||
sleep 5
|
||||
curl -f http://localhost:8070 || echo "Container ainda inicializando..."
|
||||
|
||||
- name: Verify deployment
|
||||
uses: appleboy/ssh-action@v1.0.3
|
||||
with:
|
||||
host: 129.146.116.218
|
||||
username: ${{ secrets.SSH_USERNAME }}
|
||||
key: ${{ secrets.SSH_PRIVATE_KEY }}
|
||||
port: 22
|
||||
script: |
|
||||
echo "=== Status ==="
|
||||
docker ps | grep n8ngo-landing
|
||||
echo "=== Últimos logs ==="
|
||||
docker logs n8ngo-landing --tail 10
|
||||
16
Dockerfile
Normal file
16
Dockerfile
Normal file
@ -0,0 +1,16 @@
|
||||
FROM nginx:alpine
|
||||
|
||||
# Remove default config
|
||||
RUN rm /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copy custom nginx config
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copy static files
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY style.css /usr/share/nginx/html/style.css
|
||||
|
||||
EXPOSE 8070
|
||||
|
||||
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
|
||||
CMD wget -qO- http://localhost/ || exit 1
|
||||
471
index.html
Normal file
471
index.html
Normal file
@ -0,0 +1,471 @@
|
||||
<!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>
|
||||
21
nginx.conf
Normal file
21
nginx.conf
Normal file
@ -0,0 +1,21 @@
|
||||
server {
|
||||
listen 8070;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip
|
||||
gzip on;
|
||||
gzip_types text/html text/css application/javascript;
|
||||
gzip_min_length 256;
|
||||
|
||||
# Cache estático
|
||||
location ~* \.(css|js|png|jpg|svg|ico|woff2?)$ {
|
||||
expires 30d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
713
style.css
Normal file
713
style.css
Normal file
@ -0,0 +1,713 @@
|
||||
/* =============================================
|
||||
n8ngo — Managed n8n Hosting
|
||||
style.css
|
||||
============================================= */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
/* ─── Reset & Base ─────────────────────────── */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-base: #0f172a;
|
||||
--bg-surface: #1e293b;
|
||||
--bg-elevated: #263248;
|
||||
--border: #334155;
|
||||
--border-light: #475569;
|
||||
|
||||
--green: #10b981;
|
||||
--green-dim: #059669;
|
||||
--cyan: #06b6d4;
|
||||
--cyan-dim: #0891b2;
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
|
||||
--transition: 0.2s ease;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--cyan);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
a:hover { color: var(--green); }
|
||||
|
||||
img { max-width: 100%; display: block; }
|
||||
|
||||
/* ─── Utilities ─────────────────────────────── */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cyan);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
font-size: 1.0625rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* ─── Fade-in on scroll ─────────────────────── */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ─── Nav ───────────────────────────────────── */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.nav-logo span { color: var(--green); }
|
||||
|
||||
.nav-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: var(--green);
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition), transform var(--transition);
|
||||
}
|
||||
.nav-cta:hover {
|
||||
background: var(--green-dim);
|
||||
color: #0f172a;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ─── Hero ──────────────────────────────────── */
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 6rem 0 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Grid background */
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(6, 182, 212, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.06) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Glow orb */
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
color: var(--green);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 1.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.hero-eyebrow .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.25rem, 6vw, 3.75rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-title .highlight {
|
||||
background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(1rem, 2.5vw, 1.1875rem);
|
||||
color: var(--text-secondary);
|
||||
max-width: 620px;
|
||||
margin: 0 auto 2.25rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
padding: 0.8rem 1.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
|
||||
box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
color: #0f172a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 36px rgba(16, 185, 129, 0.45);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
transition: border-color var(--transition), color var(--transition);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--border-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Domain pill */
|
||||
.hero-domain {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-primary);
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
.hero-domain .domain-part { color: var(--cyan); }
|
||||
.hero-domain .lock-icon {
|
||||
color: var(--green);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
/* ─── How it works ──────────────────────────── */
|
||||
.how {
|
||||
background: var(--bg-surface);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.how-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
position: relative;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.75rem;
|
||||
transition: border-color var(--transition), transform var(--transition);
|
||||
}
|
||||
.step-card:hover {
|
||||
border-color: var(--border-light);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--green), var(--cyan));
|
||||
color: #0f172a;
|
||||
font-weight: 800;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* Connector line between steps (desktop) */
|
||||
@media (min-width: 768px) {
|
||||
.how-grid {
|
||||
position: relative;
|
||||
}
|
||||
.how-grid::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: calc(33.3% - 0px);
|
||||
right: calc(33.3% - 0px);
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--green), var(--cyan));
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Features / Included ───────────────────── */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem 1.75rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.feature-card:hover {
|
||||
border-color: rgba(16, 185, 129, 0.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.feature-body h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.feature-body p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ─── Comparison Table ──────────────────────── */
|
||||
.comparison {
|
||||
background: var(--bg-surface);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-top: 3rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 600px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 1rem 1.25rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
th:first-child { text-align: left; }
|
||||
|
||||
th.col-highlight {
|
||||
color: var(--text-primary);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
th.col-highlight::after {
|
||||
content: '★ Recomendado';
|
||||
display: block;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: var(--green);
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.875rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td:first-child {
|
||||
text-align: left;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
tr:last-child td { border-bottom: none; }
|
||||
|
||||
td.col-highlight {
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.check { color: var(--green); font-size: 1.05rem; }
|
||||
.cross { color: var(--text-muted); }
|
||||
.partial { color: #f59e0b; }
|
||||
|
||||
/* ─── Free section ──────────────────────────── */
|
||||
.free-box {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--cyan);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 2rem 2.25rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.free-box p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.steps-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.steps-list .step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(6, 182, 212, 0.15);
|
||||
border: 1px solid rgba(6, 182, 212, 0.3);
|
||||
color: var(--cyan);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
display: inline-block;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--cyan);
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.free-box .tagline {
|
||||
font-style: italic;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1.25rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ─── Promo banner — hero ───────────────────── */
|
||||
.promo-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(6,182,212,0.12));
|
||||
border: 1px solid rgba(16,185,129,0.4);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 680px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.promo-fire { font-size: 1.1rem; flex-shrink: 0; }
|
||||
|
||||
.promo-cta-link {
|
||||
display: inline-block;
|
||||
background: var(--green);
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: var(--radius-sm);
|
||||
white-space: nowrap;
|
||||
transition: background var(--transition), transform var(--transition);
|
||||
}
|
||||
.promo-cta-link:hover {
|
||||
background: var(--green-dim);
|
||||
color: #0f172a;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ─── Promo banner — before form ───────────── */
|
||||
.promo-form-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.1rem;
|
||||
max-width: 680px;
|
||||
margin: 2rem auto 0;
|
||||
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.07));
|
||||
border: 1.5px solid rgba(16,185,129,0.45);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.promo-form-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.promo-form-banner strong { color: var(--text-primary); }
|
||||
|
||||
|
||||
/* ─── Pre-registration ──────────────────────── */
|
||||
.precadastro {
|
||||
background: var(--bg-surface);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
max-width: 680px;
|
||||
margin: 2.5rem auto 0;
|
||||
background: #ffffff;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem 2.5rem 1.5rem;
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
/* ─── Footer ────────────────────────────────── */
|
||||
.footer {
|
||||
background: var(--bg-base);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.footer-logo span { color: var(--green); }
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.footer-links a:hover { color: var(--text-secondary); }
|
||||
|
||||
.footer-disclaimer {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ─── Responsive ────────────────────────────── */
|
||||
@media (max-width: 640px) {
|
||||
.section { padding: 3.5rem 0; }
|
||||
|
||||
.hero { padding: 4rem 0 3rem; }
|
||||
|
||||
.how-grid,
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
padding: 1.25rem 1rem 0.75rem;
|
||||
}
|
||||
|
||||
.step-card { padding: 1.25rem; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-inner {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user