Sobre este template
Wellness Devicex foi capturada em 1460x1080 e guardada como especificação, não como imagem de galeria. A cor se limita a preto #0A0A0A por baixo e azul suave #64748B carregando os destaques, composta em 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 60ms, cubic-bezier(0.77, 0, 0.18, 1) e um loop de vídeo ao fundo. Use como referência quando estiver construindo landing page para um produto de saúde ou bem-estar e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Designers que precisam dos números antes de tudo: seções de 100vh e passos de espaçamento de 24px, tudo citado do briefing.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de saúde aguenta 4,4s de vídeo em loop.
- Quem briefa um modelo para uma landing page vai usar o prompt de 6.903 caracteres como ponto de partida.
O que está incluído
- Uma barra sem excesso. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #64748B, dimensionada para ficar discreta diante do resto da página. Uma sobreposição mobile assume abaixo do breakpoint de tablet. Os links são compostos abaixo da marca em tamanho, e a ação #64748B é o único elemento da barra com peso.
- Uma escala para tipo e moldura. Os tamanhos foram lidos do render em 1460x1080: seções de 100vh, passos de espaçamento de 24px, transições de 60ms e curva de aceleração cubic-bezier(0.77, 0, 0.18, 1). Como os valores são fixos, uma substituição muda o visual sem mudar o ritmo.
- A tipografia carrega o tom. 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. A altura de linha segue os passos de tamanho, não um valor global único. Componha a linha de display por último.
- Uma barra de navegação que sai do caminho. Desenhe o estado colapsado antes de acrescentar um sexto link. A referência tem captura em 1460x1080.
Movimento e interação
Durações curtas e nomeadas
Hover, clique e foco resolvem todos em 60ms, e é isso que faz a interface parecer imediata. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback. Uma duração por comportamento.
Um só comportamento de scroll
Parallax é o único comportamento de scroll da página, então o efeito tem um lugar definido na composição. A composição não depende de o efeito disparar, então rolar rápido por ele não custa nada. Não empilhe um segundo efeito de scroll.
Como a landing page se reorganiza
Responsivo aqui significa que a escala muda e a sequência não. a seção fica presa a 100vh e a navegação vira um menu compacto no celular, e a ordem de leitura fica onde o briefing a colocou. A reorganização mantém a ação alcançável em qualquer largura.
A landing page com a sua cara
Mude o conteúdo primeiro e confira a moldura depois. seções de 100vh, passos de espaçamento de 24px, transições de 60ms e curva de aceleração cubic-bezier(0.77, 0, 0.18, 1) são os valores a proteger enquanto você troca o texto. Reescreva o texto e a mídia antes de repintar qualquer coisa.
Como Wellness Devicex ordena a primeira leitura
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque azul suave #64748B marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de landing page em trabalho de saúde. O leitor de saúde recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Wellness Devicex contém de fato?
O briefing capturado tem 6.903 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.
Quanto de Wellness Devicex depende de React e Tailwind CSS?
Wellness Devicex 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.
O que comanda o movimento em Wellness Devicex?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 60ms usando cubic-bezier(0.77, 0, 0.18, 1). Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
