Sobre este template
Esta é a rodapé da Lumina, publicada com o briefing que a produziu em vez de apenas uma captura de tela. Ela abre com “Lumina provides premium clarity on global events and cosmic wonders - shared with all for free” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. O esquema de cores é azul #2F4458 por baixo e cinza #CFC2B7 para a tipografia, e a página é composta em Helvetica. A entrega é React e Tailwind CSS, capturada em 800x585 para a moldura estar fixada antes de qualquer linha de código. Parta do briefing capturado e depois edite a rodapé em vez de reconstruí-la do zero.
Feito para
- Comece por seções de 115vh e passos de espaçamento de 10px e deixe a paleta vir depois, porque é o espaçamento que faz esta rodapé ler.
- Feito para product managers que precisam da rodapé limitada a uma sprint e sem novos assets.
- Times de produto que escrevem o texto da Rodapé e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Tamanhos fixados no briefing. Nada aqui é feito no olho. A especificação fixa seções de 115vh e passos de espaçamento de 10px, e o resto do layout deriva desses valores. A lista é curta o bastante para um revisor conferir elemento por elemento.
- Cada família com uma função. Com Helvetica fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. A família de display é usada em um tamanho só, então ela nunca compete consigo mesma.
- A composição é o conteúdo. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 800x585 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 800x585, e é por isso que ela se sustenta quando o texto muda.
- Medido contra a viewport. O espaçamento é declarado do mesmo jeito (seções de 115vh e passos de espaçamento de 10px), não como uma escala que cresce sozinha.
Movimento e interação
Quase nenhum movimento
Não há biblioteca de scroll aqui: a composição em 800x585 fica parada e só se movem os elementos que respondem a você. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 800x585 conduzir a página, com estados de hover e de clique como únicas mudanças.
Os números por trás da rodapé
Uma reconstrução normalmente começa com uma captura de tela e uma suposição. Aqui ela começa com 5.113 caracteres de especificação: a moldura, o espaçamento e o movimento estão escritos antes da primeira linha de código. Nada nesta rodapé depende de um padrão.
A ordem por trás da rodapé
Assumir uma única rota de leitura significa fechar as outras. O briefing aceita isso, fixa a linha de estatísticas, o clipe de fundo e o rodapé no lugar e gasta seções de 115vh e passos de espaçamento de 10px para tornar a rota óbvia. O leitor de educação recebe a oferta antes das opções.
O que se sustenta para Educação e comunidade
Enquanto um template enche a dobra de módulos, esta rodapé usa a linha de estatísticas, o clipe de fundo e o rodapé e para. A diferença aparece em seções de 115vh e passos de espaçamento de 10px: nada é inflado para preencher espaço. Dá ao leitor de educação a rota honesta mais curta até a oferta.
Perguntas frequentes
Por que o prompt do Lumina não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 5.113 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Lumina?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x585, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Lumina depende de React e Tailwind CSS?
Lumina 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.
