From 719ffbaecd0004b31bff91f87d7d5c9de4256fbb Mon Sep 17 00:00:00 2001 From: Ricardo Carneiro Date: Fri, 3 Apr 2026 20:50:03 -0300 Subject: [PATCH] feat: landing page inicial do n8ngo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .claude/settings.local.json | 7 + .gitea/workflows/deploy.yml | 81 ++++ Dockerfile | 16 + index.html | 471 ++++++++++++++++++++++++ nginx.conf | 21 ++ style.css | 713 ++++++++++++++++++++++++++++++++++++ 6 files changed, 1309 insertions(+) create mode 100644 .claude/settings.local.json create mode 100644 .gitea/workflows/deploy.yml create mode 100644 Dockerfile create mode 100644 index.html create mode 100644 nginx.conf create mode 100644 style.css diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..138e5a1 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,7 @@ +{ + "permissions": { + "allow": [ + "Bash(ssh:*)" + ] + } +} diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml new file mode 100644 index 0000000..6f619ff --- /dev/null +++ b/.gitea/workflows/deploy.yml @@ -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 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..ec0ac20 --- /dev/null +++ b/Dockerfile @@ -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 diff --git a/index.html b/index.html new file mode 100644 index 0000000..0daf505 --- /dev/null +++ b/index.html @@ -0,0 +1,471 @@ + + + + + + n8ngo — Hospedagem Managed de n8n + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + Em fase de validação — vagas limitadas +
+ +

+ Seu n8n no ar em
+ 60 segundos +

+ +

+ Hospedagem managed de n8n com backup automático, monitoramento 24/7 + e subdomínio pronto. Você cria os fluxos, nós cuidamos do resto. +

+ +
+ + Quero meu n8n agora + + + Como funciona ↓ + +
+ +
+
+ + seudominio.n8ngo.host +
+
+ +
+
+ + +
+
+ + Como funciona +

Simples assim

+

+ Do zero ao n8n rodando em produção em três passos. Sem linha de comando, sem dor de cabeça. +

+ +
+ +
+
1
+

Escolha seu nome

+

+ Indique o subdomínio que quer usar — por exemplo, + minha-empresa.n8ngo.host. + É o seu espaço, com sua identidade. +

+
+ +
+
2
+

Nós configuramos tudo

+

+ Subimos o n8n, configuramos banco de dados, SSL, DNS, Uptime Kuma + e os backups automáticos. Você não precisa tocar em nada. +

+
+ +
+
3
+

Comece a automatizar

+

+ Acesse seu painel n8n, crie seus fluxos e deixe a automação + trabalhar por você. 24 horas por dia, 7 dias por semana. +

+
+ +
+
+
+ + +
+
+ + O que está incluso +

Tudo que você precisa.
Nada que você não precisa.

+

+ Cada instância n8ngo vem com uma stack completa pronta para produção. +

+ +
+ +
+ +
+

n8n pronto pra uso

+

Última versão estável do n8n, configurado e otimizado para performance. Atualizações gerenciadas por nós.

+
+
+ +
+ +
+

Subdomínio exclusivo

+

seudominio.n8ngo.host com SSL/TLS configurado. Agências podem ter sub-subdomínios para cada cliente.

+
+
+ +
+ +
+

Backup automático

+

Backup diário dos fluxos + backup completo semanal. Painel de acesso para restauração quando precisar.

+
+
+ +
+ +
+

Monitoramento 24/7

+

Uptime Kuma integrado monitorando sua instância continuamente. Alertas por email em caso de queda.

+
+
+ +
+ +
+

Modelo Agência

+

Gerencie múltiplos clientes com sub-subdomínios dedicados: cliente.agencia.n8ngo.host.

+
+
+ +
+ +
+

Dados no Brasil

+

Servidores em São Paulo. Conformidade com a LGPD. Seus dados e os dos seus clientes ficam aqui.

+
+
+ +
+
+
+ + +
+
+ + Comparação +

n8ngo vs as outras opções

+

+ Você pode configurar tudo sozinho. Mas será que faz sentido? +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecursoVPS + n8n manualn8n Cloudn8ngo
Setup inicialVocê configura tudoAutomáticoAutomático
Subdomínio próprioVocê configura DNS✕ Não disponível✓ Incluso
Backup de fluxosVocê configuraLimitado✓ Diário + semanal
MonitoramentoVocê instalaBásico✓ Uptime Kuma integrado
Alertas de quedaVocê configuraEmail✓ Email automático
Modelo Agência✕ Não✕ Não✓ Sub-subdomínios
ExecuçõesIlimitadasPor plano✓ Ilimitadas
Dados no BrasilDepende do servidor✕ Não✓ São Paulo, LGPD
PreçoR$20–80/mês + seu tempoA partir de €24/mêsA definir*
+
+

+ * Estamos em fase de validação. Você pode influenciar o preço final no formulário de pré-cadastro. +

+ +
+
+ + +
+
+ + Transparência +

Não quer pagar? Sem problema.

+

+ O n8n é open source e você pode rodá-lo gratuitamente no seu computador. + Aqui está como fazer isso agora mesmo. +

+ +
+

+ 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: +

+ +
    +
  1. + + + Instale o + Docker + na sua máquina (Windows, Mac ou Linux — tudo funciona). + +
    2. +
  2. + + + Abra o terminal e rode:
    + docker run -it --rm -p 5678:5678 n8nio/n8n +     +
    3. +
  3. + + + Acesse + localhost:5678 + no navegador. Pronto — n8n funcionando. + +
    4. +
  4. + + + Quando quiser salvar seus fluxos, exporte-os como JSON via + Menu → Download. É a sua propriedade, leve para onde quiser. + +
    5. +
+ +

+ Documentação oficial do n8n: + docs.n8n.io → +

+ +

+ Quando quiser colocar em produção 24/7 com backup automático e monitoramento real, + estaremos aqui — sem julgamentos. 😉 +

+
+ +
+
+ + +
+
+ +
+ Pré-cadastro +

Quer ser um dos primeiros?

+

+ 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. +

+
+ +
+ +
+ Promoção de lançamento
+ Os 10 primeiros cadastros validados ganham 6 meses grátis no plano básico. + Para valer, preencha o formulário abaixo e clique em Submit — só conta quem + concluir o envio pelo Tally. Em até 30 dias entraremos em contato pelo email + informado para confirmar os ganhadores — use um email que você acompanha de verdade. +
+
+ +
+ + +
+ +
+
+ + + + + + + + + + + + + + diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..cffd100 --- /dev/null +++ b/nginx.conf @@ -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; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..29f6d3a --- /dev/null +++ b/style.css @@ -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; + } +}