--- name: landing-pages-independentes description: > Especifica a estrutura padrão de landing pages independentes para clientes: seções de conteúdo, header, footer, banner rotativo e painel admin para edição de dados. Use ao criar ou revisar LP de cliente com domínio próprio. --- # Padronização — Landing pages independentes ## Quando usar este guia - Criar **landing page nova** para cliente com domínio próprio - Revisar PR ou entrega de LP existente - Definir escopo do **painel admin** de uma LP - Alinhar estrutura entre projetos de clientes diferentes Este documento define o **mínimo obrigatório** de uma LP independente. Adaptações visuais são permitidas; as **seções, navegação e capacidade de edição via admin** devem ser mantidas. --- ## Visão geral da página Uma LP independente é uma página única (one-page) com rolagem vertical. A estrutura fixa é: ``` ┌─────────────────────────────────────────┐ │ HEADER — navegação fixa ou sticky │ ├─────────────────────────────────────────┤ │ BANNER (opcional) — carrossel rotativo │ ├─────────────────────────────────────────┤ │ QUEM SOMOS │ ├─────────────────────────────────────────┤ │ NOSSOS SERVIÇOS │ ├─────────────────────────────────────────┤ │ GALERIAS │ ├─────────────────────────────────────────┤ │ FOOTER — contato, mapa, links legais │ └─────────────────────────────────────────┘ ``` Cada bloco de conteúdo deve ter um **`id` de âncora** estável para o header conseguir rolar até a seção correta. --- ## Três divisões principais de conteúdo ### 1. Quem somos | | | |---|---| | **Objetivo** | Apresentar a empresa, história e proposta de valor | | **Conteúdo mínimo** | Título da seção, texto descritivo (1–3 parágrafos), imagem ou foto da equipe/local | | **Âncora sugerida** | `#quem-somos` | | **Editável no admin** | Texto, título e imagem principal | ### 2. Nossos serviços | | | |---|---| | **Objetivo** | Listar o que a empresa oferece | | **Conteúdo mínimo** | Cards ou lista com nome do serviço, descrição curta e ícone ou imagem opcional | | **Âncora sugerida** | `#servicos` | | **Editável no admin** | Adicionar, editar, reordenar e remover serviços; trocar ícones/imagens | ### 3. Galerias | | | |---|---| | **Objetivo** | Mostrar trabalhos, produtos, ambiente ou portfólio visual | | **Conteúdo mínimo** | Grid ou carrossel de fotos com legendas opcionais | | **Âncora sugerida** | `#galeria` | | **Editável no admin** | Upload, exclusão e reordenação de fotos; legenda por imagem | **Não fazer:** substituir uma seção principal por conteúdo genérico sem equivalente (ex.: remover “Galerias” e colocar só um banner estático no lugar). --- ## Header O header fica visível no topo da página e acompanha a rolagem (**sticky** ou **fixed**). ### Itens obrigatórios de navegação | Link no header | Destino | |----------------|---------| | Quem somos | `#quem-somos` | | Nossos serviços | `#servicos` | | Galeria | `#galeria` | | Contato | `#contato` (âncora no footer ou bloco de contato) | Itens adicionais (ex.: “Início” → topo da página) são opcionais. ### Comportamento - **Desktop:** links visíveis em linha; logo à esquerda (clique leva ao topo) - **Mobile:** menu hambúrguer que abre drawer ou dropdown com os mesmos links - Clique em link de seção faz **scroll suave** até a âncora - Header com contraste legível sobre o banner (fundo sólido ou overlay quando sobre imagem) ### O que não entra no header - Dados de contato completos (ficam no footer) - Links de redes sociais (ficam no footer) - Formulários --- ## Footer O footer concentra **contato, localização e informações legais**. Deve ser a última área da página. ### Dados obrigatórios | Campo | Descrição | |-------|-----------| | **E-mail** | Endereço de contato; link `mailto:` | | **Telefone** | Número com link `tel:`; máscara conforme padrão BR | | **Horário de funcionamento** | Dias e horários (ex.: Seg–Sex 8h–18h, Sáb 8h–12h) | | **Política de privacidade** | Link para página ou modal com o texto legal | | **Redes sociais** | Ícones com link externo (Instagram, Facebook, WhatsApp, etc.) | | **Onde estamos** | Mapa do Google Maps embutido | | **Traçar rota** | Botão ou link que abre Google Maps/Waze com destino já definido | ### Mapa e rota ``` ┌──────────────────────────────────┐ │ Endereço formatado (texto) │ │ ┌────────────────────────────┐ │ │ │ Google Maps (iframe/embed)│ │ │ └────────────────────────────┘ │ │ [ Traçar rota ] │ └──────────────────────────────────┘ ``` - **Embed:** usar iframe do Google Maps com coordenadas ou Place ID configurável - **Traçar rota:** link para `https://www.google.com/maps/dir/?api=1&destination=LAT,LNG` (ou endereço codificado) - Coordenadas e endereço devem vir do **admin**, não hardcoded no front ### Âncora de contato A seção de contato no footer (ou bloco imediatamente acima) deve usar **`id="contato"`** para o link “Contato” do header. ### Editável no admin - E-mail, telefone, horário - Endereço, latitude/longitude (ou Place ID) para o mapa - URLs das redes sociais - Texto ou URL da política de privacidade --- ## Banner rotativo (opcional) A LP **pode** ter um banner/carrossel no topo, abaixo do header, com imagens que alternam automaticamente. | | | |---|---| | **Quando usar** | Cliente quer destaque visual, promoções ou fotos do negócio na dobra inicial | | **Comportamento** | Transição automática a cada X segundos (intervalo configurável); indicadores (dots) e setas opcionais | | **Conteúdo por slide** | Imagem de fundo; título e subtítulo opcionais; CTA opcional (ex.: “Fale conosco” → `#contato`) | | **Editável no admin** | Adicionar/remover slides, trocar imagens, editar textos, definir ordem e intervalo de rotação | **Performance:** otimizar imagens do banner (ver [guia-performance-carregamento-e-consultas.md](../Performance/guia-performance-carregamento-e-consultas.md)). Lazy load nas galerias; banner above-the-fold pode usar preload da primeira imagem. --- ## Painel admin Cada domínio de LP independente deve ter um **admin restrito** para o cliente alterar conteúdo sem deploy. ### Princípios - URL separada (ex.: `/admin`), protegida por **login** - Alterações refletem na LP pública após salvar (sem rebuild manual, quando possível) - Upload de imagens com validação de tipo e tamanho - Preview ou confirmação antes de publicar mudanças críticas (opcional, recomendado) ### Módulos do admin | Módulo | O que o cliente edita | |--------|-------------------------| | **Empresa / Quem somos** | Título, texto, imagem da seção | | **Serviços** | CRUD de serviços (nome, descrição, ícone/imagem, ordem) | | **Galeria** | Upload, exclusão, ordem e legenda das fotos | | **Banner** | Slides do carrossel (imagem, textos, ordem, intervalo) | | **Contato e footer** | E-mail, telefone, horário, endereço, coordenadas do mapa | | **Redes sociais** | URLs por rede | | **Política de privacidade** | Texto rich text ou URL externa | | **Configurações gerais** | Nome do site, logo, favicon (opcional) | ### Segurança mínima - Autenticação com senha hasheada (ver [guia-seguranca-hash-senhas.md](../Seguranca/guia-seguranca-hash-senhas.md)) - Sessão em cookie HttpOnly (ver [guia-seguranca-secrets-e-armazenamento.md](../Seguranca/guia-seguranca-secrets-e-armazenamento.md)) - Rate limit no login (ver [guia-seguranca-rate-limiting.md](../Seguranca/guia-seguranca-rate-limiting.md)) - Upload apenas de formatos permitidos (JPEG, PNG, WebP); sanitizar nomes de arquivo --- ## Checklist de entrega Use na revisão de PR ou aceite com o cliente. ### Estrutura - [ ] Header com links para Quem somos, Serviços, Galeria e Contato - [ ] Seção **Quem somos** com texto e imagem - [ ] Seção **Nossos serviços** com lista/cards - [ ] Seção **Galerias** com fotos - [ ] Footer com e-mail, telefone, horário, política de privacidade e redes sociais - [ ] Google Maps embutido com endereço correto - [ ] Botão/link **Traçar rota** funcionando ### Admin - [ ] Login protegido - [ ] Edição de textos e imagens das três seções principais - [ ] Edição de dados do footer e localização do mapa - [ ] Gerenciamento de banner rotativo (se a LP tiver banner) - [ ] Gerenciamento de galeria (upload e ordem) ### UX e responsivo - [ ] Layout responsivo (mobile e desktop) - [ ] Scroll suave nas âncoras do header - [ ] Menu mobile funcional - [ ] Imagens otimizadas --- ## Diagrama: LP ↔ Admin ↔ Banco ``` ┌─────────────┐ lê ┌─────────────┐ │ LP pública │ ◄────────── │ Banco / │ │ (visitante)│ │ CMS API │ └─────────────┘ └──────▲──────┘ │ escreve ┌──────┴──────┐ │ Admin │ │ (cliente) │ └─────────────┘ ``` Conteúdo estático demais (HTML fixo sem API) **não atende** este guia: o cliente precisa conseguir atualizar fotos, localização e footer pelo admin. --- ## Ver também | Contexto | Guia | |----------|------| | Consistência de navegação e mobile | [guia-ux-padronizacoes-e-jakobs-law.md](../Front-end/guia-ux-padronizacoes-e-jakobs-law.md) | | Formulário de contato (se houver) | [guia-ux-formularios.md](../Front-end/guia-ux-formularios.md) | | Imagens e performance | [guia-performance-carregamento-e-consultas.md](../Performance/guia-performance-carregamento-e-consultas.md) | | Métricas no site do cliente | [guia-metricas-interacao-sites.md](../Metricas/guia-metricas-interacao-sites.md) | | Auth do admin | [hash-senhas](../Seguranca/guia-seguranca-hash-senhas.md), [secrets](../Seguranca/guia-seguranca-secrets-e-armazenamento.md), [rate limiting](../Seguranca/guia-seguranca-rate-limiting.md) | [← Voltar ao índice Padronização](./README.md)