Sobre este template
Designy Footer preserva o rastro das decisões: o briefing que produziu esta rodapé tem 3.029 caracteres. A paleta é branco #FAFAFA por baixo e preto #0A0A0A para a tipografia. A entrega é React e Tailwind CSS, capturada em 1922x1394 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em um loop de vídeo ao fundo. É mais útil quando a rodapé de IA e SaaS precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Esta rodapé responde a quem constrói e quer saber o que tipografia de 13px a 14px e passos de espaçamento de 13px controla de fato no layout.
- Profissionais de marketing de produto que precisam que rodapé continue legível com 2,9s de vídeo em loop atrás do texto.
- Times que reconstroem a rodapé de SaaS de um concorrente e querem React e Tailwind CSS nomeada antes de escolher um framework.
O que está incluído
- Links antes da ação. A barra é uma linha de texto e uma ação, medida em tipografia de 13px a 14px e passos de espaçamento de 13px, para ler como faixa e não como bloco. O menu mobile faz parte do briefing, então o estado colapsado foi desenhado, não improvisado. Não dê à marca mais espaço do que a tipografia dela precisa.
- Mídia atrás da tipografia. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 2,9s em 1922x1394 atrás de tudo. Exporte em 1922x1394 ou mais largo e o recorte cover continua funcionando.
- Painéis, não parágrafos. O meio da página é uma grade de cards, não um bloco de texto: cada painel carrega uma ideia com um ícone e uma linha curta, o que mantém o caminho de leitura horizontal e curto. A altura dos painéis é ditada pelo texto, então uma linha mais longa não quebra o alinhamento da fileira.
- Navegação em uma só linha. Nada na barra anima com o scroll; ela está presente desde o primeiro frame e depois sai do caminho. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 2,9s em 1922x1394, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Interação mantida local
O feedback se limita a estados de hover nos botões e links, não em todos os cards, então o resto do layout é uma composição fixa. O feedback se limita aos controles, então a composição fica parada em volta deles. Não anime o layout no hover.
O que se sustenta para IA e SaaS
A contenção custa espaço para prova acima da dobra. Este briefing aceita esse custo e gasta a primeira tela com a oferta, com tipografia de 13px a 14px e passos de espaçamento de 13px fixadas para que uma seção de prova seja acrescentada abaixo sem retrabalho. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
A ordem por trás da rodapé
Coloque o seu próprio texto nesta rodapé e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a navegação, a linha de estatísticas, a grade de cards e o rodapé carrega uma função. O leitor de SaaS recebe a oferta antes das opções.
Os números por trás da rodapé
Toda relação nesta página é um valor que dá para conferir: tipografia de 13px a 14px e passos de espaçamento de 13px. É isso que torna Designy Footer reconstruível, e não apenas reproduzível. Nada nesta rodapé depende de um padrão.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Designy Footer?
O briefing capturado tem 3.029 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Por que a entrada cita React e Tailwind CSS?
Designy Footer 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.
Como devo tratar a mídia de Designy Footer 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 1922x1394.
