Sobre este template
Church Community é uma landing page de educação construída a partir de um único briefing escrito, e esta página documenta esse briefing. O título da própria página é “Take a step toward the light”, e a composição é construída em volta exatamente dessas palavras. A cor se limita a laranja suave #5A4C41 por baixo, branco #FFFFFF para a tipografia e laranja suave #F1E5C6 carregando os destaques, composta em Manrope. A entrega é React e Framer Motion: uma página só, sem plugin e sem ferramenta de build entre você e o design. O movimento cabe todo em um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 5.380 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Fundadores que briefam uma agência vão usar a moldura em 1448x1080 como teste de aceite da primeira rodada.
- Comece por passos de espaçamento de 36px e deixe a paleta vir depois, porque é o espaçamento que faz esta landing page ler.
- Profissionais de marketing de produto que precisam que landing page continue legível com 5,5s de vídeo em loop atrás do texto.
O que está incluído
- A navegação é fina de propósito. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #F1E5C6, tudo isso no topo de landing page e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #F1E5C6 é o único elemento da barra com peso.
- O briefing nomeia os passos. Os tamanhos são declarados, não herdados: passos de espaçamento de 36px. Troque a família tipográfica ou o texto e essas relações continuam valendo. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Mídia sem sobreposição. O briefing especifica o vídeo em 1448x1080 com um loop de 5,5s, e cada elemento de texto é posicionado contra essa moldura. Um frame de poster em 1448x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma família, usada com disciplina. A linha de display é composta em Manrope em um tamanho que o briefing fixa, o que faz do título um elemento de composição e não um parágrafo. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página. Uma família, papéis claros.
Movimento e interação
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 5,5s em 1448x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O clipe é mudo e inline, então o primeiro frame está disponível sem interação. Grave ou exporte em 1448x1080 ou mais largo.
Quase nenhum movimento
Não há biblioteca de scroll aqui: a composição em 1448x1080 fica parada e só se movem os elementos que respondem a você. Só se movem os elementos que respondem ao ponteiro. Nenhuma linha do tempo de scroll é necessária.
Os números por trás da landing page
Não dá para acertar uma composição no olho quando duas pessoas a estão reconstruindo. O briefing elimina a discussão: passos de espaçamento de 36px, declaradas uma vez. Nada nesta landing page depende de um padrão.
A landing page com a sua cara
Um template pede que você aceite o layout dele; esta referência pede que você o mantenha e mude tudo por dentro. A diferença é que passos de espaçamento de 36px ficam fixas enquanto o assunto se move. A moldura e a escala são o que deixar em paz.
O tempo por trás da landing page
O movimento se limita a uma passada de máquina de escrever e um loop de mídia de 5,5s; ele roda uma vez na entrada e depois sai da frente, que é o orçamento certo para landing page continuar legível. Nada anima por si nesta landing page.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Church Community?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1448x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Framer Motion?
A referência foi construída em React e Framer Motion por circunstância de produção. Nada no layout depende dessa escolha: os valores de espaçamento, tipografia e movimento passam para o que você já usa.
Posso publicar uma página reconstruída a partir de Church Community sem dar os créditos?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 1448x1080.
