Sobre este template
Esta é a rodapé da HAUL! publicada com o briefing que a produziu em vez de apenas uma captura de tela. O título da própria página é “`. Next to the logo block, add the text”, e a composição é construída em volta exatamente dessas palavras. O esquema de cores é branco #FFFFFF por baixo e laranja #BB420D carregando os destaques, e a página é composta em Inter. A stack é React e Tailwind CSS, então dá para levar rodapé para um projeto sem handoff de design. O orçamento de movimento é transições de 0.8s. Use quando a rodapé precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Cite uma moldura em 1832x1354 na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Feito para um fundador solo lançando uma rodapé para um produto de IA ou SaaS, sem nenhum design system atrás.
- Quem briefa um modelo para uma rodapé vai usar o prompt de 4.329 caracteres como ponto de partida.
O que está incluído
- O briefing nomeia os passos. O briefing declara os tamanhos na captura (seções de 50vh e transições de 0.8s), então dá para conferir uma reconstrução em vez de estimá-la. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Uma grade de cards segura o meio. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a rodapé fácil de varrer. Os painéis compartilham a família da interface em um tamanho só, o que impede a grade de virar um segundo layout.
- Saturação gasta em um lugar. A cor é racionada. Laranja #BB420D aparece só em controles e pequenos destaques, então o olho sempre sabe onde está a próxima ação. O contraste entre #BB420D e branco #FFFFFF é o que torna o destaque legível em tamanhos pequenos.
- Valores que dá para conferir. O espaçamento é declarado do mesmo jeito (seções de 50vh e transições de 0.8s), não como uma escala que cresce sozinha.
Movimento e interação
Uma superfície interativa pequena
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Os estados estão nomeados no briefing, então a página não depende de uma biblioteca de efeitos de hover.
A página se monta conforme você rola
Parallax roda enquanto a página se move, então a composição tem um estado de repouso definido. São algumas linhas de código, não uma biblioteca de scroll, o que mantém a reconstrução leve. O layout precisa funcionar com o efeito desligado.
O que mudar primeiro em HAUL!
A maioria começa pela cor de destaque. Comece pela promessa: reescreva a linha de display e teste de novo laranja #BB420D contra a sua própria mídia. A composição é a parte reaproveitável, e ela sobrevive a uma marca diferente.
Ler HAUL! como especificação
A maioria das referências mostra o resultado e guarda os números. Esta inverte isso: seções de 50vh e transições de 0.8s são publicados ao lado da página, para o resultado ser reproduzido em vez de aproximado. Nada nesta rodapé depende de um padrão.
Como a rodapé se reorganiza
Larga, a composição é densa; estreita, a seção fica presa a 50vh. Os dois estados estão descritos no briefing. O layout estreito é uma decisão de projeto, não um espremer, e a hierarquia sobrevive a ele.
Perguntas frequentes
Qual é o tamanho do prompt por trás de HAUL!?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1832x1354, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de HAUL! depende de React e Tailwind CSS?
HAUL! foi construído em React e Tailwind CSS, 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.
Posso usar HAUL! em um projeto de cliente?
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 1832x1354.
