Conteúdo da página de destino e sobreposições de marca

Público

Este artigo é para operadores da plataforma GCM. Administradores de igreja devem ver o artigo de marca do Website Builder — aquela página é para o site público deles, esta é para o site de marketing do GCM em geniuschurchmanager.com.

As abas Landing e Marca juntas controlam como a plataforma aparece para um visitante totalmente novo: a página de destino de marketing, a tela de login, o favicon na aba do navegador deles, o logo na barra lateral de cada espaço de trabalho logado, a imagem Open Graph quando alguém compartilha um link no Slack. Tudo isso vive em duas tabelas, é editado em duas abas, e se aplica em toda a plataforma no instante em que você salva.

Duas abas, um propósito

• Landing (/platform/landing) edita o texto e as imagens por locale que renderizam na página de marketing. Armazenados como sobreposições em landing_page_content; recai aos padrões i18n compilados no bundle quando não existe sobreposição.
• Marca (/platform/branding) edita todo o resto: nome da plataforma, slogan, logo, favicon, empresa do rodapé, e-mail de suporte, cores do tema, links sociais, o interruptor do Tour Guiado. Armazenados na tabela chave-valor plana platform_settings.

As duas abas compartilham uma biblioteca de mídia, com escopo no caminho do Supabase storage uploads/platform/. Imagens enviadas para a landing page (platform/landing/) também ficam visíveis na aba Marca (platform/branding/) e na aba PWA (platform/pwa/), e vice-versa — escolha uma vez, reutilize em qualquer lugar.

Sobreposições de conteúdo da página de destino

A aba Landing lista nove seções da página de marketing, cada uma como um acordeão:

1. Seção Herói — primeira dobra. Badge, headline, subheadline, CTA, link "ver preços", ilustração opcional.
2. Barra de Prova Social — faixa abaixo do herói ("Confiado por 200+ igrejas").
3. Seção Problema — bloco narrativo. Headline, descrição, citação, autor da citação, ilustração.
4. Grade de Recursos — seis capacidades de produto com título + descrição cada.
5. Interlúdio Escritural — versículo + referência.
6. Como Funciona — explicação em três passos.
7. Mais Recursos — lista com marcadores. O campo items é um item por linha.
8. Prévia de Preços — bloco de chamada.
9. CTA Final — faixa de encerramento.

Um dropdown de locale no cabeçalho do cartão alterna entre English, Español, Français, Português. Cada locale é um conjunto separado de sobreposições; alternar não perde edições não salvas no locale original (o estado por locale é independente).

Como o preenchimento prévio funciona

Cada input de texto é pré-preenchido com o texto efetivo atual, não com a sobreposição. Isso significa:

• Se não existir sobreposição, o input mostra o padrão i18n de src/i18n/locales/{en,es,fr,pt}.json.
• Se uma sobreposição existir, o input mostra o valor da sobreposição.
• O badge de status te diz qual: sobreposto (roxo) ou não salvo (âmbar).

Dessa forma, quando você ajusta o headline de "Know Your Flock" para "Know Your Flock Better", não precisa digitar a string inteira de novo — você edita o texto visível e o sistema detecta o diff. Apagar o campo e salvar é a forma canônica de resetar ao padrão i18n; a linha é excluída de landing_page_content para que o texto do bundle apareça.

Salvando

Três escopos de salvamento:

• Salvar no nível do campo — aparece ao lado de um campo quando você tem edições. Persiste só esse campo.
• Salvar no nível da seção — aparece no topo de uma seção de acordeão quando qualquer um dos seus campos está sujo. Persiste todos os campos sujos dessa seção em um único upsert.
• Resetar no nível da seção — aparece quando qualquer um dos campos da seção está sobreposto. Exclui essas linhas para que os padrões i18n voltem.

Salvar invalida dois caches de query: landing-content-admin (esta aba) e landing-content (a página de marketing ao vivo). A mudança aparece em geniuschurchmanager.com no próximo render.

Campos de imagem

Os campos de imagem (hero_image, problem_image, cta_image) usam o StorageMediaLibraryDialog compartilhado. Clique em Escolher / enviar para abrir o seletor, que permite enviar um novo arquivo ou escolher entre arquivos existentes em uploads/platform/landing/, uploads/platform/branding/ ou uploads/platform/pwa/.

O seletor armazena o caminho, não a URL — resolveStorageUrl o transforma em uma URL pública no momento do render, então se você mover o bucket depois, as referências continuam funcionando. Uma pequena miniatura de pré-visualização e um link "Ver tamanho real" ficam ao lado do input.

Caminhos de storage, não URLs

Colar uma URL completa https://... em um campo de imagem funciona para a pré-visualização, mas burla o resolvedor de URL em toda a plataforma. Futuras migrações de bucket vão quebrar. Sempre escolha pela biblioteca.

Aba Marca

A aba Marca está organizada em cinco seções:

1. Identidade da plataforma

• Nome da plataforma — mostrado na página de login e no título da aba do navegador.
• Slogan / Subtítulo — mostrado abaixo do nome da plataforma na página de login.
• Logo — quadrado. Recomendado 512x512 PNG ou SVG. Seletor com escopo em uploads/platform/branding/.
• Favicon — pequeno quadrado. Recomendado 32x32 ou 64x64 ICO/PNG.
• Empresa do rodapé / URL / e-mail de suporte / ano de copyright — usados no rodapé de marketing e em e-mails transacionais.

2. Cores e tema

Três seletores de cor (primária, secundária, accent), cada um com um input hex ao vivo e uma fileira de amostra de Pré-visualização Ao Vivo no fim do cartão. Mudanças se aplicam globalmente via variáveis CSS — afetam o site de marketing e a camada logada.

3. Marketing e SEO

Título do herói / subtítulo / CTA / link CTA, mais a URL da imagem OG e a meta description (limitada a 160 caracteres com um contador ao vivo). Esses são os padrões em toda a plataforma; a sobreposição de herói da aba Landing os supera quando presente.

4. Links sociais

URLs de Facebook, Instagram, Twitter / X, YouTube, TikTok. Campos vazios ficam ocultos no rodapé renderizado.

5. Interruptores de recursos

Atualmente um: Tour Guiado. Quando ligado, novos usuários recebem um assistente de tour passo a passo no primeiro login. O interruptor grava em ambos platform_settings.guided_tour_enabled e platform_config.guided_tour_enabled para manter as duas fontes de verdade alinhadas; se a gravação espelho falhar, o interruptor reverte e um toast te avisa.

O botão "Salvar tudo"

Edições de marca não salvam por campo — elas se acumulam no estado local até você apertar Salvar todas as configurações de marca embaixo. Salvar:

1. Upsert cada linha alterada em platform_settings com o novo valor e um updated_at fresco.
2. Invalida o cache platform_branding_settings.
3. Chama refetchBranding() no BrandingContext para que a barra lateral, o cabeçalho e as cores do tema da página recarreguem sem um refresh duro.

Se o salvamento falhar no meio, o estado local é preservado para que você possa tentar novamente — a página não reseta.

Quais mudanças são auditadas

Edições de marca e landing escrevem em platform_audit_log com as ações branding_settings_saved e landing_content_updated respectivamente. Os valores antes / depois são capturados nos metadados, então uma futura pergunta "quem mudou o texto do herói três semanas atrás" tem uma resposta limpa no Log de auditoria.