Sobre este template
Prosthetics Hero é uma hero de saúde construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta é branco #FDFCFC por baixo. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. O briefing gasta o orçamento de movimento em transições de 200ms. É a referência certa para hero para um produto de saúde ou bem-estar que precisa parecer intencional já na primeira tela.
Feito para
- Tome a estrutura da hero inteira e substitua o texto linha por linha contra uma moldura em 640x464.
- Se o seu time tiver de cortar o movimento, a hero continua legível, com tipografia de 12px a 14px e passos de espaçamento de 13px fazendo o trabalho de hierarquia.
- Quem briefa um modelo para uma hero vai usar o prompt de 3.421 caracteres como ponto de partida.
O que está incluído
- Topo com uma única ação. A navegação é uma fileira só, sem um segundo nível embaixo dela. Os estados de hover e de foco estão especificados para cada link, e é isso que impede uma barra fina de parecer inerte.
- Passos de espaçamento citados. A tipografia e o espaçamento saem de uma lista só aqui: tipografia de 12px a 14px, passos de espaçamento de 13px e transições de 200ms. A lista é curta o bastante para um revisor conferir elemento por elemento.
- Texto primeiro, decoração depois. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x464 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x464, e é por isso que ela se sustenta quando o texto muda.
- Links colapsam em uma largura. A barra fica sobre a hero em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Mudanças de estado, cronometradas
Hover, clique e foco resolvem todos em 200ms, e é isso que faz a interface parecer imediata. Se a curva de aceleração mudar, a duração precisa ser revista junto.
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 640x464 conduzir a página, com estados de hover e de clique como únicas mudanças. Não há biblioteca de animação no briefing, o que mantém a reconstrução enxuta.
Os números por trás da hero
Um briefing de 3.421 caracteres produz uma especificação completa. A parte estrutural é curta: tipografia de 12px a 14px, passos de espaçamento de 13px e transições de 200ms. Nada nesta hero depende de um padrão.
Por que esta composição funciona para saúde
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um frame estático em 640x464. A moldura fica silenciosa e tipografia de 12px a 14px e passos de espaçamento de 13px mantêm o leitor no texto. Dá ao leitor de saúde a rota honesta mais curta até a oferta.
A ordem por trás da hero
Compare o topo desta página com uma tela de landing page típica de saúde. As duas trazem um título e uma ação; aqui a navegação, o título, o selo de anúncio e o clipe de fundo ficam em ordem fixa em vez de competir com o mesmo peso. O leitor de saúde recebe a oferta antes das opções.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Prosthetics Hero?
O briefing capturado tem 3.421 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?
Prosthetics Hero 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.
Quanto de Prosthetics Hero é animado?
As entradas e as mudanças de estado ficam na faixa de 200ms. Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
