CTA de fechamento com foto

A última dobra antes do rodapé. Uma foto sangrada quase apagada, um gradiente de três paradas que fecha em preto sólido em cima e embaixo, grão por cima, e no centro só duas coisas: a frase que a marca assinaria, em itálico grande, e um botão.

É o eco do hero: mesma foto, mesmo escuro, mesma promessa — dita agora por quem já leu a página inteira. Não tem olho, não tem título de seção, não tem lista, não tem formulário. Essa pobreza é o componente: se ele tivesse mais uma coisa, seria mais uma seção, e a página não precisa de mais uma seção nesse ponto.

Sem script. Três tokens. É a peça mais barata da biblioteca e provavelmente a mais reutilizável: toda página institucional precisa acabar, e quase toda acaba desta forma.

Este ou o cta-formulario-lead?

A categoria conversão tem duas peças de dobra inteira, e elas não competem: fazem trabalhos diferentes em momentos diferentes da página.

A regra prática: se a página tem um momento de conversão, ele é o cta-formulario-lead, e este aqui não substitui. Se a página tem um momento de conversão e ainda continua — FAQ, prova social, mais um bloco editorial —, este componente é o que fecha a conta no fim.

Os dois na mesma página é o uso certo, não o excesso. O botão daqui aponta para a âncora do formulário (href="#contato"), então o fechamento não é um segundo pedido: é o mesmo pedido, repetido a quem chegou até o fim. Foi assim na origem.

Ponha pelo menos uma dobra entre os dois. Formulário e fechamento colados leem como insistência, e o segundo cancela o primeiro. Na origem havia o FAQ inteiro no meio.

Quando usar

• Fim de home, de landing ou de página institucional — sempre como última seção antes do rodapé.
• Quando a página já pediu a conversão em algum lugar acima e você quer fechar com a promessa, não com mais um argumento.
• Quando existe uma foto de atmosfera boa: horizonte, cidade, mar, paisagem. Ela entra quase apagada, então serve para dar volume ao preto, não para mostrar nada.
• Como respiro antes do rodapé em página densa. Depois de quatro dobras de texto e número, uma frase só, centralizada, no escuro, é o que devolve o fôlego.

Quando não usar

• Como CTA principal da página. Ele não captura nada. Se o objetivo é lead, a peça é o cta-formulario-lead.
• No meio da página. As duas pontas do gradiente fecham em preto sólido para emendar com rodapé e com a seção anterior. No meio de uma página clara, isso vira uma faixa preta sem motivo.
• Em seção clara. O componente é escuro por definição (veja os gotchas).
• Sem foto de atmosfera. Sem .end-media ele ainda funciona, mas aí é uma faixa de texto centralizado — considere se vale uma dobra inteira de --sec-gap.
• Logo depois de outro CTA. Dois pedidos colados não somam, se anulam.
• Quando a marca não tem uma frase própria. Este componente é 90% frase; sem ela, é uma foto escura com um botão.

Padrão editorial

Não use <em> na assinatura. A linha inteira já é itálico; o <em> do h2.sec-title existe para destacar uma palavra dentro de um título reto, e aqui não há reto contra o qual destacar. Se precisar de ênfase, ela vem da quebra de linha.

A frase não repete o título do hero, mas rima com ele. Se o hero diz "Segurança no presente, liberdade no futuro", o fechamento pode fechar o mesmo par por outro lado. Repetir literalmente lê como falta de assunto.

Especificação da imagem

O teste: se, no preview, você consegue dizer o que está na foto, ela está clara demais para este componente. A foto certa aqui parece um vinco de luz no preto.

loading="lazy" e decoding="async" estão no markup de propósito — é a última imagem da página e ela é puramente decorativa. Se o seu público chega por scroll rápido até o rodapé e você vê a foto entrando, tire o lazy: o custo é um request adiantado, o ganho é não piscar.

Como usar

<link rel="stylesheet" href="componentes/conversao/cta-fechamento-foto/estilo.css">

Só isso. Não há script.js — o movimento inteiro vem do core/motion.js, que a página já carrega.

Ganchos

Variações

O .end-cta é flex com justify-content:center e flex-wrap:wrap — o segundo botão entra e quebra no mobile sem nenhuma regra a mais.

Gotchas

• A foto precisa de luz, e o véu tem de ser calibrado nela. --end-veu sai de fábrica em .5. O valor certo depende do brilho médio da imagem: com foto clara, .3 já basta; com fotografia escura — que é a regra em site de fundo preto — .3 some por completo e a dobra vira um retângulo preto com texto.

Como medir antes de calibrar:

python from PIL import Image, ImageStat print(ImageStat.Stat(Image.open("foto.jpg").convert("L")).mean[0])

Abaixo de ~90 (numa escala de 0 a 255) a foto é escura: suba --end-veu para .5–.6. Acima de ~140, desça para .3, senão a imagem briga com a assinatura. Este gotcha foi descoberto no próprio preview: a primeira foto escolhida tinha média 78 e a dobra ficou indistinguível de um fundo liso.

• O componente é escuro por definição. Use .sec-dark. O gradiente fecha em --dark-rgb nas duas pontas, e a assinatura é --fg clara sobre foto escurecida — em .sec-paper você teria um gradiente preto sob texto escuro, ou seja, nada legível.

• Em .sec-deep aparece uma emenda. .sec-deep tem --bg:var(--dark-2) (#131313), mas o gradiente só sabe fechar em rgb(var(--dark-rgb)) (#0a0a0a): não existe --dark-2-rgb. Sobra um degrau de um tom nas duas pontas. Pela regra do tom vizinho (contrato §3) é quase imperceptível, mas é real. Não conserte inventando token — token novo é decisão de arquitetura, e a saída certa é usar .sec-dark, que é onde esta peça vive.

• As duas pontas do gradiente são sólidas, e é isso que costura a seção. Um overlay de opacidade única no lugar dele devolve duas linhas retas: uma na emenda com a seção anterior, outra na emenda com o rodapé. Se a foto parecer "colada" na página, é porque alguém achatou o gradiente.

• O .grain é irmão da .end-media, não filho. O gradiente é o ::after da .end-media, e pseudo-elemento pinta depois dos filhos: um .grain lá dentro sumiria por baixo do gradiente. Fora, ele pega o z-index:1 do core e fica acima da foto e abaixo do texto (.end-body é z-index:2).

• .end-body é uma segunda classe no .wrap, e só mexe em empilhamento e alinhamento. Não toca em padding-inline nem em max-width — a coluna continua sendo assunto do core (contrato §4). Se precisar da assinatura mais estreita, o controle é o max-width:20ch da .end-sign.

• text-align:center mora na .end-body, não na seção. Na origem estava na seção inteira, e qualquer coisa colada dentro dela herdava centralização sem pedir.

• A assinatura é h2, não p. É o cabeçalho da última seção da página e vale como marco de navegação para leitor de tela. Não a rebaixe para parágrafo só porque não parece um título.

• Sem .ttl na assinatura. .ttl e [data-split] são dois reveals concorrentes; com os dois no mesmo elemento a frase pisca antes de se montar. Escolha um, e aqui o certo é o data-split — palavra a palavra é exatamente o ritmo de quem assina.

• A seção não tem id. Ninguém navega até um fechamento. Se você puser um, ele vai aparecer em índice automático e em sumário de leitor de tela como se fosse destino.

Histórico

Normalizações aplicadas na extração:

Status externo, e o motivo exige nota. A §11 usa externo para duas coisas que aqui não coincidem: (a) nunca rodou em produção e (b) veio de fora, sob licença de terceiro. Este componente é só o caso (a). O código é da própria Liberta Wealth, não há autor externo nem licença a creditar.

O que acontece é que a pasta do projeto tem duas cópias do site: github-repo/, que é a versão confirmada e de onde saíram os 18 componentes da varredura, e site/, uma composição cuja ida ao ar não está confirmada. A seção .close-sec existe somente na site/ — ela não aparece em lugar nenhum da github-repo/. Sem confirmação de produção, não dá para chamar de estavel sem mentir, e experimental diria "só rodou uma vez", que também não se sabe.

Rodando num site de verdade, vira estavel e esta seção ganha a linha do projeto. É o único caminho de saída.

O que esperar no primeiro uso real: o opacity:.3 da foto e o .62 do meio do gradiente foram calibrados numa foto específica, escura e de horizonte. Foto mais clara vai pedir .22/.55; foto muito escura, .4/.7. Ajuste os dois juntos — mexer só num deixa a foto ou chapada ou fantasma.