Sobre este template
Mind-Body Healing mostra uma forma de construir landing page para um produto de saúde ou bem-estar e publica as instruções que produziram o resultado. “Holistic wellness. Transformative results” é a linha que o layout foi construído para sustentar. A paleta se reduz a índigo suave #D1C4E9 por baixo e magenta #AD4A80 carregando os destaques, e a tipografia é Inter. A referência é construída com React e Tailwind CSS, e as decisões de layout estão declaradas independentemente dela. A página mantém o movimento em transições de 500ms e um loop de vídeo ao fundo. Tome emprestada a estrutura, não o assunto: a landing page e os números dela passam para a sua marca sem alteração.
Feito para
- Feito para agências que apresentam trabalho de saúde e precisam de uma moldura em 1468x1080 na primeira resposta ao cliente.
- Profissionais de marketing de produto que precisam que landing page continue legível com 6,8s de vídeo em loop atrás do texto.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Mind-Body Healing.
O que está incluído
- Navegação em uma só linha. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #AD4A80, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #AD4A80 é o único elemento da barra com peso. Não dê à marca mais espaço do que a tipografia dela precisa.
- Valores que dá para conferir. Os tamanhos foram lidos do render em 1468x1080: seções de 100vh e transições de 500ms. Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- Uma família, usada com disciplina. A tipografia é Inter, e o briefing dá uma função à família em vez de misturar por variedade. Peso, tracking e passos de tamanho estão todos especificados, então a hierarquia sobrevive a uma substituição. Trocar a família é seguro desde que tamanhos e pesos fiquem onde o briefing os colocou.
- Uma barra de navegação que sai do caminho. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #AD4A80, tudo isso no topo de landing page e sem fundo próprio.
Movimento e interação
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 6,8s em 1468x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução. Grave ou exporte em 1468x1080 ou mais largo.
Rápido o bastante para parecer intencional
Os tempos são curtos e consistentes (500ms), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Os valores são curtos o bastante para ler como feedback, não como animação.
Como a landing page se reorganiza
Enquanto um template colapsa para uma coluna e torce, este briefing declara o que acontece (a seção fica presa a 100vh e a navegação vira um menu compacto no celular) e mantém a ordem intacta. A reorganização mantém a ação alcançável em qualquer largura.
O que esta landing page acerta
A razão de isso funcionar para um produto de saúde ou bem-estar é que a página nunca pede ao leitor que monte a mensagem. A página diz isso em voz alta: “Holistic wellness. Transformative results”. Layout, tipografia e cor estão decididos (índigo suave #D1C4E9 e magenta #AD4A80, em Inter), então a primeira tela lê como um argumento pronto, não como uma pilha de peças. Dá ao leitor de saúde a rota honesta mais curta até a oferta.
Ler Mind-Body Healing como especificação
Desmonte a landing page e os valores ainda a descrevem: seções de 100vh e transições de 500ms para a moldura e o ritmo abaixo. Nada nesta landing page depende de um padrão.
Perguntas frequentes
O prompt de Mind-Body Healing é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 5.232 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.
Como esta entrada de Mind-Body Healing está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 5.232 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Posso reconstruir landing page do Mind-Body Healing em outra stack?
Mind-Body Healing 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.
