Sobre este template
Esta é a rodapé da Heritage Grove, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “Heritage Grove — Footer” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta se reduz a creme #EAE3DE por baixo, verde-água #0F454F para a tipografia e tom escuro #2A707C carregando os destaques, e a tipografia é Poppins. A entrega é um único arquivo HTML autocontido, capturada em 1920x1424 para a moldura estar fixada antes de qualquer linha de código. O movimento se resume a transições de 2s, cubic-bezier(.22,1.36,1) e um loop de vídeo ao fundo, mantido discreto o bastante para o texto continuar conduzindo. É mais útil quando a rodapé de E-commerce precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Se você é fundador e vai briefar um modelo em vez de um designer, parta da rodapé e deixe o prompt segurar curva de aceleração cubic-bezier(.22,1.36,1).
- Tome a estrutura da rodapé inteira e substitua o texto linha por linha contra um único arquivo HTML autocontido.
- Times que constroem uma marca de e-commerce rodapé e precisam de um breakpoint de 359px registrado antes de o orçamento sair.
O que está incluído
- Uma barra de navegação que sai do caminho. A barra carrega a marca, os links de seção e um botão #2A707C, tudo medido em um tamanho de display fixo de 16px e seções de 100vh para nunca virar um segundo cabeçalho. Os rótulos são curtos o bastante para caber em uma linha a 359px, e o item ativo é marcado por peso, não por uma pílula. Não dê à marca mais espaço do que a tipografia dela precisa.
- Mídia atrás da tipografia. A composição é construída sobre o clipe em 1920x1424, não ao lado dele, então a mídia nunca ganha painel nem borda. Exporte em 1920x1424 ou mais largo e o recorte cover continua funcionando.
- Links antes da ação. Abaixo de 359px os links colapsam em vez de quebrar para uma segunda linha.
- O briefing nomeia os passos. O layout é resolvido sobre valores fixos (um tamanho de display fixo de 16px, seções de 100vh, passos de espaçamento de 52px e transições de 2s), e é isso que mantém a primeira tela composta em qualquer largura. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
Movimento e interação
Um loop, não uma linha do tempo
O movimento ambiente é um clipe de 9,6s em 1920x1424, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Mudanças de estado, cronometradas
As mudanças de estado estão especificadas em 2s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (2s), então uma reconstrução não pode trocar a sensação sem aviso.
A ordem por trás da rodapé
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a navegação, a linha de estatísticas, a lista de recursos, o formulário e o clipe de fundo no lugar e gasta um tamanho de display fixo de 16px e seções de 100vh para tornar a rota óbvia. O leitor de e-commerce recebe a oferta antes das opções.
Como a rodapé se reorganiza
Uma escala fluida e uma escalonada parecem iguais em tela larga. Estreite a viewport e a diferença aparece: um clamp entre 240px e 52px contra saltos fixos. Um espremer teria sido mais barato e não se sustentaria.
O que uma marca de e-commerce ganha aqui
Heritage Grove é a referência de rodapé para uma marca de e-commerce e responde ao problema que esse público realmente tem. “Heritage Grove — Footer” já faz esse trabalho desde o primeiro frame. A paleta se mantém disciplinada (creme #EAE3DE e tom escuro #2A707C) e a tipografia é Poppins, então nada na composição depende de uma tendência emprestada. Na hora de briefar uma construção, é esta a parte que vale copiar: uma promessa no tamanho de display, com o detalhe de apoio mantido abaixo dela. Heritage Grove enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
Heritage Grove foi construído em um único arquivo HTML autocontido, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
O briefing de Heritage Grove é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 12.893 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de Heritage Grove?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1920x1424, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
