Sobre este template
Cortexa FAQ foi capturada em 1826x1302 e guardada como especificação, não como imagem de galeria. “How do I start the process of buying a home?” é a linha que o layout foi construído para sustentar. A stack é React e Tailwind CSS, então dá para levar seção de FAQ para um projeto sem handoff de design. A página mantém o movimento em transições de 400ms e um loop de vídeo ao fundo. Se você está briefando uma seção de FAQ de SaaS, parta desta composição e substitua o assunto.
Feito para
- Feito para product managers que precisam da seção de FAQ limitada a uma sprint e sem novos assets.
- Esta seção de FAQ serve fundadores que precisam de uma tela de prova de que o texto de SaaS aguenta 0,1s de vídeo em loop.
- Times de produto que escrevem o texto da Seção de FAQ e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
O que está incluído
- Tamanhos fixados no briefing. Nada aqui é feito no olho. A especificação fixa passos de espaçamento de 15px e transições de 400ms, e o resto do layout deriva desses valores. A tipografia e o layout compartilham os mesmos passos, então nada sai do lugar quando um dos dois é substituído.
- O vídeo é o fundo, não um painel. A composição é construída sobre o clipe em 1826x1302, não ao lado dele, então a mídia nunca ganha painel nem borda. O loop é curto o bastante (0,1s) para o olho ler como textura e não como linha do tempo.
- Um campo, uma ação. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. Os campos se empilham em uma coluna, então a ordem de tabulação acompanha a ordem de leitura.
- Números, não impressões. O espaçamento é declarado do mesmo jeito (passos de espaçamento de 15px e transições de 400ms), não como uma escala que cresce sozinha.
Movimento e interação
Tempos curtos e combinados
O movimento nos controles é curto e repetível: 400ms a cada mudança de estado. Um mesmo valor se repete nos controles, então o tempo deles não pode divergir.
Movimento ambiente sem biblioteca de scroll
O clipe de fundo roda 0,1s em 1826x1302 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico.
Os números por trás da seção de FAQ
Enquanto um moodboard deixa a escala em aberto, este briefing a fecha: passos de espaçamento de 15px e transições de 400ms, com os valores ao redor derivados dessa decisão. Nada nesta seção de FAQ depende de um padrão.
A ordem por trás da seção de FAQ
A seção de FAQ tem uma rota de leitura declarada. A partir daí o olho percorre o formulário 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 Cortexa FAQ
Uma linha, uma fonte, um destaque: essas três substituições são as que mais mudam o design. passos de espaçamento de 15px e transições de 400ms são os valores que não devem se mover. O assunto é a parte que deve mudar.
Perguntas frequentes
Como esta entrada de Cortexa FAQ está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 4.955 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 Cortexa FAQ?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1826x1302, 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?
Cortexa FAQ 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.
