Sobre este template
Transform Data preserva o rastro das decisões: o briefing que produziu esta hero tem 3.605 caracteres. O título diz “Transform Data Quickly”, e o resto da hero se organiza em volta disso. A paleta se reduz a cinza #505050 por baixo e branco #F8F8F8 para a tipografia, e a tipografia é Inter. A entrega é um único componente, capturada em 800x592 para a moldura estar fixada antes de qualquer linha de código. O movimento cabe todo em transições de 250ms. Deixe aberto enquanto escreve: o briefing de 3.605 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times que constroem um produto de IA ou SaaS hero e precisam de um único componente registrado antes de o orçamento sair.
- Times que reconstroem a hero de SaaS de um concorrente e querem um único componente nomeada antes de escolher um framework.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Transform Data.
O que está incluído
- Uma linha, sem gaveta. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 16px e transições de 250ms, para ler como faixa e não como bloco. Os rótulos são curtos o bastante para caber em uma linha em qualquer largura que o briefing cubra. Desenhe o estado colapsado antes de acrescentar um sexto link.
- A tipografia define a hierarquia. Os passos de tamanho e o tracking do briefing são o que dá o tom: Inter em um tamanho de display apertado, depois uma queda clara para o texto de apoio. A família vem acompanhada de tamanhos fixos, e é isso que mantém a linha de display e o texto de interface relacionados. Mantenha os passos de tamanho mesmo trocando a família.
- Números em vez de promessa. A fileira fica no alto da hero como prova, não como decoração. Os números ficam na mesma linha de base do texto em volta, então a fileira lê como um objeto só. A referência tem captura em 800x592.
- Links colapsam em uma largura. A navegação é uma fileira só, sem um segundo nível embaixo dela. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela.
Movimento e interação
Rápido o bastante para parecer intencional
O briefing fixa o valor da transição em 250ms, então uma reconstrução não pode cair em um padrão mais lento. Nada espera por uma posição de scroll, então a página responde no instante em que você a toca. Uma duração por comportamento.
Quase nenhum movimento
O briefing deixa a animação de fora e deixa o layout em 800x592 conduzir a página, com estados de hover e de clique como únicas mudanças. O movimento é tratado como feedback, não como decoração.
Como a hero se reorganiza
Não dá para resolver uma tela estreita encolhendo-a. Este briefing trata a mudança na tipografia e na navegação: a escala é fluida, não em degraus. A reprodução automática e o movimento são tratados com honestidade, então a página continua comunicando quando eles não estão disponíveis.
O que se sustenta para IA e SaaS
Comparado a um hero de template, a diferença está no que falta. Não há grade de cards, nem carrossel, nem segunda chamada para ação: só a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo, dimensionados contra passos de espaçamento de 16px e transições de 250ms. Dá ao leitor de SaaS a rota honesta mais curta até a oferta.
Os números por trás da hero
Desmonte a hero e os valores ainda a descrevem: passos de espaçamento de 16px e transições de 250ms para a moldura e o ritmo abaixo. Nada nesta hero depende de um padrão.
Perguntas frequentes
Por que a entrada cita um único componente?
Transform Data foi construído em um único componente, 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.
Qual é o tamanho do prompt por trás de Transform Data?
O briefing capturado tem 3.605 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 Transform Data é animado?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 250ms. O briefing registra os valores para que quem for portar a página não precise adivinhar.
