Sobre este template
Leia Nexora Automation como especificação de hero: os valores foram escritos antes de a página ser construída. “Now with GPT-5 support ✨” é a linha que o layout foi construído para sustentar. O esquema de cores é branco #FFFFFF por baixo e verde-água profundo #092128 para a tipografia, e a página é composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 800x552 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 0.6s. Deixe aberto enquanto escreve: o briefing de 5.344 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Agências que apresentam um produto de IA ou SaaS hero e querem seções de 100vh e passos de espaçamento de 25px citado no deck, para o orçamento ainda valer depois do kickoff.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da Nexora Automation.
- Substitua o texto da hero antes de tocar em Instrument Serif, porque os tamanhos estão definidos para os comprimentos de linha atuais.
O que está incluído
- Navegação em uma só linha. A navegação é uma fileira só, sem um segundo nível embaixo dela. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Tamanhos fixados no briefing. A tipografia e o espaçamento saem de uma lista só aqui: seções de 100vh, passos de espaçamento de 25px e transições de 0.6s. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição.
- O tracking aperta ao crescer. As famílias recebem papéis em vez de serem misturadas: Instrument Serif carrega o display e a interface juntos. A família de display é usada em um tamanho só, então ela nunca compete consigo mesma. Confira a escala em tons de cinza.
- Texto primeiro, decoração depois. A composição está completa em 800x552: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 800x552, e é por isso que ela se sustenta quando o texto muda. O briefing é a especificação.
Movimento e interação
Tempos em milissegundos
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 0.6s. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A curva de aceleração é especificada junto com a duração (0.6s), então uma reconstrução não pode trocar a sensação sem aviso.
A interação está nos controles
Só os controles respondem ao ponteiro (estados de hover nos botões e links, não em todos os cards), então a página parece responsiva sem transformar cada elemento em um alvo. Os alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles.
Como Nexora Automation ordena a primeira leitura
Dá para embaralhar esses blocos e a página continuaria carregando. Mas deixaria de ler como argumento: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards são uma sequência, e seções de 100vh e passos de espaçamento de 25px só funcionam nessa ordem. O leitor de SaaS recebe a oferta antes das opções.
Como a hero se reorganiza
Um layout estreito desenhado exige mais decisões que um espremer. O briefing paga por elas: a seção fica presa a 100vh, declarado em vez de descoberto na hora de construir. Nada importante é descartado em larguras estreitas.
O que se move em Nexora Automation
O movimento aqui é um conjunto de decisões, não uma biblioteca: transições de 0.6s e estados de hover e de clique, e nada anima no scroll. O resultado é uma página que parece autoral: durações curtas, uma entrada e mudanças de estado que confirmam uma ação em vez de decorá-la. Nada anima por si nesta hero.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Nexora Automation?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 800x552, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Preciso de React e Tailwind CSS para reconstruir Nexora Automation?
Nexora Automation 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.
Como devo tratar a mídia de Nexora Automation em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 800x552.
