Sobre este template
Leia IntelligentX como especificação de hero: os valores foram escritos antes de a página ser construída. A paleta é branco #EDEEF5 por baixo, preto #1A1A1A para a tipografia e lima vivo #9FFF00 carregando os destaques, com tipografia Inter. A entrega é React e Tailwind CSS, capturada em 640x462 para a moldura estar fixada antes de qualquer linha de código. Deixe aberto enquanto escreve: o briefing de 4.182 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se o seu time tiver de cortar o movimento, a hero continua legível, com seções de 110vh e passos de espaçamento de 16px fazendo o trabalho de hierarquia.
- Feito para quem cuida do conteúdo e reescreve uma hero cujo título precisa continuar tão longo quanto o da IntelligentX.
- Feito para um time que já tem Inter carregada, um export em 640x462 esperando e uma janela de build nesta semana.
O que está incluído
- Uma linha, sem gaveta. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #9FFF00, 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 #9FFF00 é o único elemento da barra com peso.
- O briefing nomeia os passos. Nada aqui é feito no olho. A especificação fixa seções de 110vh e passos de espaçamento de 16px, e o resto do layout deriva desses valores. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Pesos nomeados por papel. Com Inter fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. Substituir a família é possível, mas as proporções precisam sobreviver à troca. Componha a linha de display por último.
- A composição é o conteúdo. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 640x462 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 640x462, e é por isso que ela se sustenta quando o texto muda. Mantenha a moldura; troque o assunto.
Movimento e interação
Movimento que sai da frente
Não há biblioteca de scroll aqui: a composição em 640x462 fica parada e só se movem os elementos que respondem a você. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
Estático por decisão
Esta é entregue como composição estática em 640x462, então a hierarquia precisa funcionar sem movimento, e funciona. Nenhuma linha do tempo de scroll é necessária.
Como IntelligentX ordena a primeira leitura
A hero 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 selo de anúncio, a linha de estatísticas, o formulário e o clipe de fundo em sequência, e é isso que impede uma tela única de ler como lista. O leitor de SaaS recebe a oferta antes das opções.
O que mudar primeiro em IntelligentX
A maioria começa pela cor de destaque. Comece pela promessa: reescreva a linha de display e teste de novo lima vivo #9FFF00 contra a sua própria mídia. O assunto é a parte que deve mudar.
Por que o briefing de SaaS se sustenta
Conte as decisões desta hero e todas voltam a um único documento: 4.182 caracteres que nomeiam a moldura em 640x462, a tipografia e o ritmo. IntelligentX enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O que o briefing por trás de IntelligentX contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 640x462, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
IntelligentX 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.
Posso usar IntelligentX 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 640x462.
