Sobre este template
ADHD Planner mostra uma forma de construir seção de preços para um produto de saúde ou bem-estar e publica as instruções que produziram o resultado. A paleta se reduz a laranja suave #F6E4CF por baixo, laranja profundo #321C04 para a tipografia e laranja suave #D9C4AA carregando os destaques, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 1458x1080 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 300ms, cubic-bezier(0.77,0,0.175,1) e um loop de vídeo ao fundo. Use quando a seção de preços precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Se três pessoas vão editar esta seção de preços, dê a quem cuida do conteúdo tipografia de 42px a 96px e passos de espaçamento de 25px em vez de uma captura de tela.
- Feito para product managers que precisam da seção de preços limitada a uma sprint e sem novos assets.
- Times de produto que escrevem o texto da Seção de preços e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Uma barra de navegação que sai do caminho. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #D9C4AA, tudo no menor passo tipográfico do briefing. Os links são compostos abaixo da marca em tamanho, e a ação #D9C4AA é o único elemento da barra com peso. Uma ação por barra.
- O briefing nomeia os passos. A tipografia e o espaçamento saem de uma lista só aqui: tipografia de 42px a 96px, passos de espaçamento de 25px, transições de 300ms e curva de aceleração cubic-bezier(0.77,0,0.175,1). O espaçamento é citado nas mesmas unidades da tipografia, então os dois podem ser comparados direto.
- Vídeo na camada de baixo. Um clipe de 7,3s em 1458x1080 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Um frame de poster em 1458x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Uma grade de cards segura o meio. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a seção de preços fácil de varrer. Os painéis compartilham a família da interface em um tamanho só, o que impede a grade de virar um segundo layout. Mantenha a ordem de leitura igual à ordem dos painéis.
Movimento e interação
O loop faz o trabalho ambiente
Um único clipe de 7,3s é toda a camada ambiente: toca atrás do texto, faz loop sem corte visível e nunca reage ao ponteiro. O clipe é mudo e inline, então o primeiro frame está disponível sem interação.
O tempo definido no briefing
O movimento aqui é medido em milissegundos: 300ms com cubic-bezier(0.77,0,0.175,1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. Um mesmo valor se repete nos controles, então o tempo deles não pode divergir.
Como ADHD Planner ordena a primeira leitura
A seção de preços tem uma rota de leitura declarada. A navegação apresenta o produto e dá a quem volta um caminho familiar. A partir daí o olho percorre a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards em sequência, e é isso que impede uma tela única de ler como lista. O leitor de saúde recebe a oferta antes das opções.
O que se move em ADHD Planner
O movimento é uma lista curta, não um sistema. O briefing nomeia transições de 300ms, um loop de mídia de 7,3s e uma revelação por scroll, e o resto da página fica parado. Nada anima por si nesta seção de preços.
A seção de preços com a sua cara
A parte reaproveitável é a composição; o assunto é seu. Troque o título, mantenha a escala tipográfica (tipografia de 42px a 96px) e teste de novo o destaque #D9C4AA sobre a sua própria mídia. Se um elemento novo não ajuda a explicar a oferta ou o próximo passo, ele pertence abaixo da dobra. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
Perguntas frequentes
Como esta entrada de ADHD Planner está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 8.810 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
Qual é o tamanho do prompt por trás de ADHD Planner?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1458x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir seção de preços do ADHD Planner em outra stack?
ADHD Planner 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.
