Sobre este template
Mindloop Landing foi capturada em 455x800 e guardada como especificação, não como imagem de galeria. A paleta se reduz a azul profundo #010713 por baixo, e a tipografia é Inter. A entrega é React e Tailwind CSS, capturada em 455x800 para a moldura estar fixada antes de qualquer linha de código. Parta do briefing capturado e depois edite a landing page em vez de reconstruí-la do zero.
Feito para
- Times que constroem landing page para um produto de IA ou SaaS e querem o detalhe medido (passos de espaçamento de 100px) em vez de uma captura de tela para copiar.
- Quem briefa um modelo para uma landing page vai usar o prompt de 7.242 caracteres como ponto de partida.
- Feito para um fundador solo lançando uma landing page para um produto de IA ou SaaS, sem nenhum design system atrás.
O que está incluído
- Links colapsam em uma largura. A barra fica sobre a landing page em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa. Copie este padrão quando precisar de uma navegação que sobreviva a uma primeira tela barulhenta.
- Valores que dá para conferir. O layout trabalha com valores absolutos, não com proporções: passos de espaçamento de 100px. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição.
- Números onde a prova deve ficar. A fileira fica no alto da landing page como prova, não como decoração. Os números usam a mesma família da interface, então pertencem à página em vez de interrompê-la. Mantenha os números em uma linha.
- Texto primeiro, decoração depois. Tudo acima da dobra justifica o lugar. O briefing nomeia o texto, a moldura em 455x800 e os tamanhos de tipo, e não deixa nada decorativo competir com eles. A página é uma composição só em 455x800, e é por isso que ela se sustenta quando o texto muda.
Movimento e interação
Hover, mas com parcimônia
O feedback se limita a estados de hover nos botões e links, não em todos os cards e um elemento sticky que segura a posição enquanto o conteúdo passa por baixo, e é isso que impede uma primeira tela densa de parecer carregada. Os alvos interativos são grandes o bastante para o toque e o tratamento do ponteiro é consistente entre eles.
Movimento que sai da frente
O briefing deixa a animação de fora e deixa o layout em 455x800 conduzir a página, com estados de hover e de clique como únicas mudanças. A composição fica parada, então a hierarquia precisa sustentar a página, e sustenta.
O que mudar primeiro em Mindloop Landing
Compare com começar de uma página em branco. Aqui a moldura (455x800) e passos de espaçamento de 100px já estão decididas, então o trabalho é de substituição, não de composição. Se um elemento novo não explica a oferta nem o próximo passo, o lugar dele é abaixo da dobra.
A ordem por trás da landing page
A atenção é conduzida, não deixada ao acaso. A sequência corre por a navegação, o título, a linha de estatísticas, a grade de cards e o clipe de fundo, e cada parada é dimensionada contra passos de espaçamento de 100px para que nada chegue fora de ordem. O leitor de SaaS recebe a oferta antes das opções.
Por que esta composição funciona para SaaS
Conte as decisões desta landing page e todas voltam a um único documento: 7.242 caracteres que nomeiam a moldura em 455x800, a tipografia e o ritmo. Mindloop Landing enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Perguntas frequentes
O prompt de Mindloop Landing é uma especificação pronta ou um ponto de partida?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 455x800, 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 Mindloop Landing?
Mindloop Landing 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 Mindloop Landing 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 455x800.
