Sobre este template
Email Landing Page resolve o problema de landing page para um produto de IA ou SaaS com um único briefing capturado. A paleta se reduz a azul profundo #091020 por baixo, verde-água suave #A4F4FD para a tipografia e verde-água vivo #00D2FF carregando os destaques, e a tipografia é Inter. A entrada nomeia a stack que produziu a página (React e Tailwind CSS) em vez de escondê-la. O briefing gasta o orçamento de movimento em transições de 0.3s e cubic-bezier(.22,1.36,1). Deixe aberto enquanto escreve: o briefing de 19.431 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Times de growth que redesenham um produto de IA ou SaaS landing page e querem a moldura em 640x478 mantida enquanto o texto da oferta muda.
- Times de estúdio que estão briefando uma construção e procuram um breakpoint de 1024px para reagir.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Email Landing Page.
O que está incluído
- Linha de cima: marca, links, uma ação. A fileira gasta o contraste em um lugar só: a ação #00D2FF, com a marca e os links recuados na cor do texto. Abaixo de 1024px os links colapsam em uma sobreposição de tela cheia. Abaixo de 1024px os links colapsam em vez de quebrar para uma segunda linha.
- Uma família, dois papéis. A tipografia é o sistema de estilo aqui: Inter no tamanho de display, a mesma família em toda a interface e nenhuma segunda cor de destaque fazendo o trabalho. O texto de interface fica em uma família só, então a página nunca mistura duas vozes no mesmo tamanho.
- Estrutura em uma tela. A composição está completa em 640x478: texto, mídia e controles estão todos nomeados no briefing. A página é uma composição só em 640x478, e é por isso que ela se sustenta quando o texto muda.
- Uma barra de navegação que sai do caminho. Os rótulos são curtos o bastante para caber em uma linha a 1024px, e o item ativo é marcado por peso, não por uma pílula.
Movimento e interação
Durações curtas e nomeadas
O movimento aqui é medido em milissegundos: 0.3s com cubic-bezier(.22,1.36,1). Esse é todo o orçamento de animação, gasto em mudanças de estado, não em uma linha do tempo de scroll. A curva de aceleração é especificada junto com a duração (0.3s), então uma reconstrução não pode trocar a sensação sem aviso.
Uma superfície interativa pequena
A interação é local a cada controle aqui (estados de hover nos botões e links, não em todos os cards e abas ou um acordeão que troca o conteúdo no lugar), então nada na página se move por efeito colateral. Cada estado muda uma única propriedade, o que mantém o feedback legível.
Como a landing page se reorganiza
Enquanto um template colapsa para uma coluna e torce, este briefing declara o que acontece (o layout muda em 1024px) e mantém a ordem intacta. Os dois estados estão descritos no mesmo briefing.
O que mudar primeiro em Email Landing Page
Você não precisa reconstruir a landing page para deixá-la com a sua cara. Substitua o título e a mídia, mantenha a escala (passos de espaçamento de 20px e transições de 0.3s), e o layout continua lendo como foi desenhado. O assunto é a parte que deve mudar.
A ordem por trás da landing page
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 faixa de clientes são uma sequência, e uma grade de 3 colunas e cantos de 44px só funcionam nessa ordem. O leitor de SaaS recebe a oferta antes das opções.
Perguntas frequentes
O que o briefing por trás de Email Landing Page contém de fato?
O briefing capturado tem 19.431 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.
Posso reconstruir landing page do Email Landing Page em outra stack?
Email Landing Page 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.
Quanto de Email Landing Page é animado?
As entradas e as mudanças de estado ficam na faixa de 0.3s com cubic-bezier(.22,1.36,1). Elas são disparadas por mudanças de estado, não por uma biblioteca de scroll, e nunca seguram o texto.
