Sobre este template
Pet Diagnostics entrega a um produto de saúde ou bem-estar uma primeira tela pronta e os números que a produziram. A paleta é #101010 por baixo e creme #EEF0D0 para a tipografia, com tipografia Inter. A entrega é um único arquivo HTML autocontido, capturada em 2336x1080 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em um loop de vídeo ao fundo. Esta referência é para um produto de saúde ou bem-estar que quer a primeira tela resolvida antes de a construção começar.
Feito para
- Feito para estúdios que precisam explicar o comportamento em 820px a um cliente sem antes construir um protótipo.
- A página serve desenvolvedores front-end que reconstroem um produto de saúde ou bem-estar landing page em um único arquivo HTML autocontido e procuram os números por trás da aparência.
- Times que reconstroem a landing page de saúde de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Uma barra sem excesso. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Inter, para a composição ler conteúdo primeiro e moldura depois. Abaixo de 820px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 820px, e o item ativo é marcado por peso, não por uma pílula.
- O vídeo é o fundo, não um painel. O vídeo em 2336x1080 roda 7,1s em loop atrás do texto, mudo e inline, sem camada de tingimento entre os dois. O loop é curto o bastante (7,1s) para o olho ler como textura e não como linha do tempo.
- O comportamento é definido por largura. O briefing usa um clamp entre 12px e 16px no título, e é isso que impede uma linha longa de quebrar em um ponto ruim. O menu mobile faz parte do mesmo briefing, então o estado colapsado também foi desenhado.
- Topo com uma única ação. Abaixo de 820px os links colapsam em vez de quebrar para uma segunda linha.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
Um único clipe de 7,1s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Interação mantida local
A interação é local a cada controle aqui (estados de hover nos botões e links, não em todos os cards), então nada na página se move por efeito colateral. Os estados de pressão estão especificados junto com o hover, então tocar confirma o mesmo que clicar. Menos estados, todos especificados.
O que mudar primeiro em Pet Diagnostics
Repintar a paleta primeiro é o erro de sempre. Isso muda o clima sem tocar na composição, e tipografia de 12px a 16px e seções de 92vh continuam sustentando o layout; faça o texto e a mídia primeiro e a paleta por último. Reescreva a linha de display antes de tocar na cor.
O argumento que esta landing page faz
Um hero de estoque e esta landing page usam as mesmas peças. Aqui elas são ordenadas por a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards e medidas com tipografia de 12px a 16px, seções de 92vh, cantos de 999px e passos de espaçamento de 18px, então a tela lê como sequência, não como contêiner. Dá ao leitor de saúde a rota honesta mais curta até a oferta.
O que se move em Pet Diagnostics
O tempo é explícito: estados de hover e de clique e um loop de mídia de 7,1s, tudo escrito no briefing em vez de ajustado no olho. Nada anima por si nesta landing page.
Perguntas frequentes
Preciso de um único arquivo HTML autocontido para reconstruir Pet Diagnostics?
Pet Diagnostics 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 que posso fazer com o briefing de Pet Diagnostics depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 18.711 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O prompt de Pet Diagnostics é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 2336x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
