Sobre este template
Health Portal resolve o problema de landing page para um produto de saúde ou bem-estar com um único briefing capturado. O título diz “Trusted Dentist in West New York”, e o resto da landing page se organiza em volta disso. A paleta é branco #F9F8F9 por baixo, laranja profundo #1D110C para a tipografia e vermelho #990A09 carregando os destaques. A stack é React e Tailwind CSS; cada medida está registrada, e é isso que a torna reaproveitável. O orçamento de movimento é transições de 2000ms e cubic-bezier(0.16,1,0.3,1). Trate como o briefing de uma landing page para um produto de saúde ou bem-estar que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Product managers que precisam estimar a construção vão ler um breakpoint de 767px como o escopo do trabalho.
- Times terceirizados que assumem esta landing page e precisam de uma moldura em 640x472 fixado no repositório antes do primeiro commit.
- Feito para um fundador solo lançando uma landing page para um produto de saúde ou bem-estar, sem nenhum design system atrás.
O que está incluído
- A navegação é fina de propósito. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #990A09, tudo isso no topo de landing page e sem fundo próprio. Os rótulos são curtos o bastante para caber em uma linha a 767px, e o item ativo é marcado por peso, não por uma pílula.
- Uma ideia por painel. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. Os títulos dentro dos painéis ficam um passo acima do próprio texto, não um passo abaixo do título da página.
- Fluido onde precisa ser. A tipografia é dimensionada com um clamp entre 180px e 200px em vez de passos fixos, então a linha de display mantém a proporção entre breakpoints em vez de dar saltos. A tipografia muda de tamanho, não de papel, conforme a viewport estreita. Mantenha a hierarquia; mude a escala.
- Texto primeiro, decoração depois. A composição de landing page é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 640x472 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 640x472, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Mudanças de estado, cronometradas
Os tempos são curtos e consistentes (2000ms com cubic-bezier(0.16,1,0.3,1)), então os estados de hover e de clique leem como um sistema só, não como um conjunto de efeitos separados. Um mesmo valor se repete nos controles, então o tempo deles não pode divergir. Cronometre o feedback com exatidão.
Estados de ponteiro, nada mais
A página responde só onde dá para agir: estados de hover nos botões e links, não em todos os cards. O feedback se limita aos controles, então a composição fica parada em volta deles.
Ler Health Portal como especificação
A landing page é medida, não avaliada no olho. passos de espaçamento de 200px e transições de 2000ms vêm do briefing, e o layout é organizado nesses degraus em vez de ajustado no improviso. Nada nesta landing page depende de um padrão.
Como Health Portal ordena a primeira leitura
Leia na ordem: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards. Cada elemento tem uma função, e o destaque vermelho #990A09 é gasto só no elemento que você deve pressionar. O leitor de saúde recebe a oferta antes das opções.
O que esta landing page acerta
A maioria das páginas de saúde falha por acréscimo: mais seções, mais gradientes, mais promessas. Health Portal vai pelo caminho oposto. A página diz isso em voz alta: “Trusted Dentist in West New York”. A composição fica em branco #F9F8F9 com vermelho #990A09 nas ações, e isso basta para parecer intencional. Health Portal enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Health Portal?
O briefing capturado tem 16.908 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.
O briefing de Health Portal é o mesmo que o prompt que eu escreveria?
Tudo o que é citado nesta página vem do briefing capturado de 16.908 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Por que a entrada cita React e Tailwind CSS?
Health Portal 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.
