Sobre este template
Wellness Companion é uma landing page de saúde construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta se reduz a azul profundo #1A1A1E por baixo, e a tipografia é Helvetica, Arial. A entrega é React e Tailwind CSS, capturada em 1440x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 0.5s, cubic-bezier(0.22, 1, 0.36, 1) e um loop de vídeo ao fundo. Se você está briefando uma landing page de saúde, parta desta composição e substitua o assunto.
Feito para
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de saúde aguenta 5,9s de vídeo em loop.
- Quem briefa um modelo para uma landing page vai usar o prompt de 4.095 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Wellness Companion.
O que está incluído
- Os tamanhos estão no briefing, não em uma escala. A tipografia e o espaçamento saem de uma lista só aqui: passos de espaçamento de 12px, transições de 0.5s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1). O menor e o maior valor dessa lista definem a faixa em que a composição trabalha. Verifique uma reconstrução contra os mesmos números.
- Um clipe faz todo o trabalho. O clipe roda 5,9s em 1440x1080 e faz loop sem corte visível, então lê como superfície e não como filmagem. Um frame de poster em 1440x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma grade, não um texto corrido. A grade é a estrutura: painéis do mesmo tamanho, compostos em Helvetica, Arial, arranjados para o olho andar na horizontal em vez de descer. Cada painel combina uma ideia com um ícone, então o caminho de leitura continua horizontal.
- Passos de espaçamento citados. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 12px, transições de 0.5s e curva de aceleração cubic-bezier(0.22, 1, 0.36, 1)), não como uma escala que cresce sozinha.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente vem do loop de 5,9s em 1440x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Mudanças de estado, cronometradas
Os tempos são curtos e consistentes (0.5s com cubic-bezier(0.22, 1, 0.36, 1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. A curva de aceleração é especificada junto com a duração (0.5s), então uma reconstrução não pode trocar a sensação sem aviso.
O que se move em Wellness Companion
Copie o padrão, não os valores: mantenha transições de 0.5s e um loop de mídia de 5,9s e deixe a sua própria marca definir as durações. Nada anima por si nesta landing page.
Ler Wellness Companion como especificação
A tipografia é o primeiro número: passos de espaçamento de 12px e transições de 0.5s. O espaçamento decorre dele, e todo o resto da página é posicionado contra esses dois valores. Nada nesta landing page depende de um padrão.
Por que esta composição funciona para saúde
A maioria das páginas de saúde acrescenta mais uma seção quando a primeira tela é fraca. Esta remove opções: o título, o selo de anúncio, a linha de estatísticas, a grade de cards e a contagem regressiva, nessa ordem, e nada que repita a oferta. Wellness Companion enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que o briefing por trás de Wellness Companion contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1440x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Wellness Companion 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.
Posso usar Wellness Companion em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 1440x1080.
