Sobre este template
LaunchEx About resolve o problema de página sobre para uma agência ou estúdio com um único briefing capturado. A cor se limita a branco #F0F5F7 por baixo, verde-água #154359 para a tipografia e verde-água #4BBDF0 carregando os destaques, composta em Inter. A entrega é React e Tailwind CSS: uma página só, sem plugin e sem ferramenta de build entre você e o design. Use como referência quando estiver construindo página sobre para uma agência ou estúdio e quiser uma composição pronta em vez de um ponto de partida.
Feito para
- Pegue a moldura em 640x464 e tipografia de 14px a 54px e seções de 100vh desta página sobre antes de pegar qualquer outra coisa.
- Quem briefa um modelo para uma página sobre vai usar o prompt de 6.908 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma página sobre cujo título precisa continuar tão longo quanto o da LaunchEx About.
O que está incluído
- Passos de espaçamento citados. O layout trabalha com valores absolutos, não com proporções: tipografia de 14px a 54px, seções de 100vh e passos de espaçamento de 14px. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
- Prova em uma fileira. As estatísticas são tratadas como tipografia: números no tamanho de display, rótulos no menor passo do briefing, tudo em #4BBDF0 ou na cor do texto, não em um card colorido. Os números carregam o destaque #4BBDF0 enquanto tudo em volta fica na cor do texto. Mantenha os números em uma linha.
- A grade define a ordem. A grade é a estrutura: painéis do mesmo tamanho, compostos em Inter, arranjados para o olho andar na horizontal em vez de descer. Os painéis se separam por espaçamento, não por bordas, o que mantém a grade discreta.
- Números levados para a construção. O espaçamento é declarado do mesmo jeito (tipografia de 14px a 54px, seções de 100vh e passos de espaçamento de 14px), não como uma escala que cresce sozinha.
Movimento e interação
A interação está nos controles
A camada interativa é deliberadamente pequena: estados de hover nos botões e links, não em todos os cards. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento.
Estático por decisão
Não há biblioteca de scroll aqui: a composição em 640x464 fica parada e só se movem os elementos que respondem a você. O movimento é tratado como feedback, não como decoração.
A ordem por trás da página sobre
O preço é a paciência: a página retém o detalhe que uma grade escaneável entregaria de imediato. O que ela compra é uma primeira tela em que a linha de estatísticas e a grade de cards não podem ser mal interpretados. O leitor de agência recebe a oferta antes das opções.
Os números por trás da página sobre
É isso que torna a referência reaproveitável: tipografia de 14px a 54px, seções de 100vh e passos de espaçamento de 14px. Nada fica a cargo do padrão, então uma substituição que mantém esses números mantém a composição. Nada nesta página sobre depende de um padrão.
A página sobre com a sua cara
A composição é a parte reaproveitável e o assunto é seu. Mantenha tipografia de 14px a 54px e seções de 100vh e substitua as palavras, a mídia e as marcas. Substituir é mais barato que compor, e é esse o ponto.
Perguntas frequentes
O prompt de LaunchEx About é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 6.908 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.
Quanto de LaunchEx About depende de React e Tailwind CSS?
LaunchEx About 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 manter as transições de LaunchEx About e mudar os tempos?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de menos de 1s. Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé. A referência tem captura em 640x464.
