Visual Landing Pages Builder

1. Visão Geral do Construtor de Landing Pages

O construtor de Landing Pages do DevCod Agency permite gerar páginas de marketing estruturadas em blocos funcionais pré-configurados. O editor visual opera de forma isolada por tenant e publica layouts instantaneamente, suportando domínios personalizados e integrações analíticas.

[!NOTE] Este módulo é dedicado exclusivamente à criação de landing pages individuais de funil. Para a criação de portais institucionais e páginas corporativas complexas com árvores de navegação livre, consulte a seção do Visual Site Builder.

2. Nosso Construtor Visual de Landing Pages

O editor fornece uma interface visual limpa para que equipes de marketing construam páginas de forma independente do time de desenvolvimento:

• Arrastar e Soltar: Posicionamento vertical simples e intuitivo de seções e blocos funcionais pré-desenhados.
• Assistente de Geração por IA: Painel lateral onde o usuário descreve a oferta e o assistente de inteligência de escrita gera os títulos e o escopo de blocos ideais.
• Variáveis de Ingestão: Associação direta de botões e links de checkout aos parâmetros de vendas do CRM.

3. Tipos de Páginas Suportados

O sistema categoriza cada página criada no banco de dados para auxiliar os fluxos automáticos do CRM:

• sales: Páginas de vendas focadas na oferta de infoprodutos ou serviços com botões de checkout.
• lead_capture: Páginas de captura de leads com formulários embutidos para troca de material gratuito.
• webinar: Páginas destinadas ao cadastro de leads em eventos ao vivo ou transmissões.
• waitlist: Listas de espera para lançamentos de produtos futuros.
• launch: Páginas de lançamento que agrupam sequências de vídeos e ofertas temporárias.

4. Blocos Disponíveis no Editor Visual

Os principais componentes prontos para construção de layouts no canvas:

• Hero Block: Banner principal de impacto com suporte a título grande, descrição, imagem/vídeo de fundo com overlay escuro e botões primários.
• Features Grid: Grade responsiva para expor benefícios de produtos com ícones vetoriais.
• Form Block: Bloco inteligente para acoplar qualquer formulário criado no módulo Smart Forms do painel.
• Pricing Block: Tabelas de preços integradas para ligar botões de compra ao checkout Hotmart.
• Testimonials (Social Proof): Depoimentos estruturados com foto, nome, cargo e texto de avaliação.
• Custom Code Block: Bloco de código HTML/JS livre para injectar pixels de conversão ou widgets de terceiros de forma isolada.

5. Renderização e Publicação Pública

As Landing Pages publicadas ficam acessíveis na rota pública /lp/[slug] do tenant. O Next.js resolve dinamicamente o siteId através do subdomínio ou domínio personalizado e carrega a estrutura JSON contida no modelo LandingPagePuckData (estrutura de dados interna da página).

{`
Fluxo de Exposição Pública:
┌────────────────────────┐      ┌────────────────────────┐      ┌────────────────────────┐
│ Requisição do Lead     │─────▶│ Middleware/Router      │─────▶│ DevCod ORM DB              │
│ /lp/curso-producao     │      │ Resolve siteId & slug  │      │ Query LandingPage +    │
│                        │      │                        │      │ LandingPagePuckData    │
└────────────────────────┘      └────────────────────────┘      └────────────────────────┘
                                                                             │
┌────────────────────────┐      ┌────────────────────────┐                   │
│ Renderização SSR       │◀─────│ Canvas Engine Render   │◀──────────────────┘
│ HTML estático na tela  │      │ Resgata componentes    │
└────────────────────────┘      └────────────────────────┘
          `}

6. Suporte a Domínio Personalizado (Custom Domain)

Cada tenant pode vincular um domínio ou subdomínio exclusivo para expor suas páginas (Ex: campanha.meusite.com/curso-producao).

• Mapeamento: O campo customDomain na tabela LandingPage ou Tenant armazena o domínio mapeado.
• Roteamento: O middleware de segurança e roteamento intercepta os cabeçalhos Host das requisições HTTP e serve a página correspondente de forma transparente.

7. Modelo de Dados (DevCod ORM Schema)

Abaixo está o modelo real de banco de dados que define a estrutura de dados de uma Landing Page:

{`
model LandingPage {
  id           String               @id @default(cuid())
  siteId       String
  name         String
  slug         String
  type         String               @default("lead_capture") // sales, lead_capture, waitlist
  customDomain String?
  customCode   String?
  seoTitle     String?
  seoDesc      String?
  published    Boolean              @default(false)
  puckData     LandingPagePuckData? // Dados da estrutura de blocos do canvas
  createdAt    DateTime             @default(now())
  updatedAt    DateTime             @updatedAt
}
          `}