Sobre este template
Lumina resolve o problema de hero para uma agência ou estúdio com um único briefing capturado. A página inteira é construída sobre vermelho #EC4899 por baixo e azul vivo #3B82F6 carregando os destaques. A referência é construída com um único componente, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a um loop de vídeo ao fundo. Use quando a hero precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Tome a estrutura da hero inteira e substitua o texto linha por linha contra uma moldura em 2056x1478.
- Times internos que estendem esta hero e precisam de passos de espaçamento de 70px levado para os novos blocos sem alteração.
- Estúdios que entregam esta hero a um cliente e precisam conferir #3B82F6 contra #EC4899 antes de aplicar a pele da marca.
O que está incluído
- Navegação sem fundo próprio. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #3B82F6, dimensionada para ficar discreta diante do resto da página. Os links são compostos abaixo da marca em tamanho, e a ação #3B82F6 é o único elemento da barra com peso.
- Uma escala para tipo e moldura. O briefing fixa passos de espaçamento de 70px e deixa o resto para o arranjo, o oposto de uma escala que cresce sozinha. O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- O frame de poster importa. O fundo é um único loop de 6s em 2056x1478, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Exporte em 2056x1478 ou mais largo e o recorte cover continua funcionando.
- Links colapsam em uma largura. O espaçamento entre links vem de padding, não de divisores, então a fileira lê como um objeto só. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Um loop, não uma linha do tempo
Um único clipe de 6s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
Movimento horizontal contínuo
A faixa horizontal é o elemento mais chamativo depois do título: movimento contínuo, #3B82F6 no item ativo, e nunca pede interação ao leitor. O item ativo é marcado com #3B82F6, não com uma mudança de tamanho.
Os números por trás da hero
Um briefing de 2.677 caracteres produz uma especificação completa. A parte estrutural é curta: passos de espaçamento de 70px. Nada nesta hero depende de um padrão.
O tempo por trás da hero
O briefing amarra cada transição a um valor (estados de hover e de clique, um loop de mídia de 6s e um marquee em loop). É isso que impede a página de parecer um template com um preset de animação jogado por cima. Nada anima por si nesta hero.
O que mudar primeiro em Lumina
Repintar a paleta primeiro é o erro de sempre. Isso muda o clima sem tocar na composição, e passos de espaçamento de 70px continuam sustentando o layout; faça o texto e a mídia primeiro e a paleta por último. A moldura e a escala são o que deixar em paz.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Lumina?
O briefing capturado tem 2.677 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.
Preciso de um único componente para reconstruir Lumina?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para um único componente, mas a mesma composição se reconstrói no que você já usa. A stack é nomeada para você saber como a referência foi feita.
Por que o prompt do Lumina não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 2.677 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
