Sobre este template
Wellness Hero entrega a um produto de saúde ou bem-estar uma primeira tela pronta e os números que a produziram. A tipografia é Inter, e o briefing fixa os tamanhos em vez de deixá-los a cargo de uma escala. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. É mais útil quando a hero de Saúde precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Se o seu time tiver de cortar o movimento, a hero continua legível, com 640x468 fazendo o trabalho de hierarquia.
- Feito para um fundador solo lançando uma hero para um produto de saúde ou bem-estar, sem nenhum design system atrás.
- Times de produto que escrevem o texto da Hero e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Navegação em uma só linha. 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. Cada link traz estados de foco e de hover próprios, não os do navegador. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Uma família, usada com disciplina. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. Os passos de tamanho são valores fixos, e é isso que permite trocar a família mantendo a mesma hierarquia.
- Texto primeiro, decoração depois. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x468 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x468, e é por isso que ela se sustenta quando o texto muda.
- Linha de cima: marca, links, uma ação. A ação é o único elemento da fileira com preenchimento, o que mantém os links lendo como texto. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
Movimento e interação
Estático por decisão
O briefing deixa a animação de fora e deixa o layout em 640x468 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.
Movimento que sai da frente
Não há biblioteca de scroll aqui: a composição em 640x468 fica parada e só se movem os elementos que respondem a você.
Os números por trás da hero
Se você vai entregar isso a um desenvolvedor, o briefing é o artefato útil. Ele declara uma moldura em 640x468 e não deixa nada para vocês dois interpretarem. Nada nesta hero depende de um padrão.
A ordem por trás da hero
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo não podem ser mal interpretados. O leitor de saúde recebe a oferta antes das opções.
O que mudar primeiro em Wellness Hero
Um template pede que você aceite o layout dele; esta referência pede que você o mantenha e mude tudo por dentro. A diferença é que uma moldura em 640x468 ficam fixas enquanto o assunto se move. O seu destaque precisa passar pelo mesmo teste de contraste que o destaque da referência.
Perguntas frequentes
Como esta entrada de Wellness Hero está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 4.719 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que o briefing por trás de Wellness Hero contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 640x468, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir hero do Wellness Hero em outra stack?
Não. O briefing é uma especificação, não uma lista de dependências. Ele foi escrito para React e Tailwind CSS, 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.
