Sobre este template
Talent Collective entrega a uma agência ou estúdio uma primeira tela pronta e os números que a produziram. A cor se limita a cinza #BAB8B5 por baixo, composta em Geist. A entrega é React e Tailwind CSS, capturada em 1904x1080 para a moldura estar fixada antes de qualquer linha de código. O movimento fica restrito a transições de 700ms e um loop de vídeo ao fundo. É mais útil quando a landing page de Agências e estúdios precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Profissionais de marketing de produto que precisam que landing page continue legível com 6,5s de vídeo em loop atrás do texto.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Talent Collective.
- Quem briefa um modelo para uma landing page vai usar o prompt de 9.583 caracteres como ponto de partida.
O que está incluído
- Navegação sem fundo próprio. A marca segura a borda esquerda e os links correm à direita dela, tudo composto em Geist, para a barra pertencer à página abaixo e não a um sistema separado. A fileira é dimensionada pela própria tipografia, não por uma altura de cabeçalho fixa.
- Toda medida está escrita. Nada aqui é feito no olho. A especificação fixa passos de espaçamento de 40px e transições de 700ms, e o resto do layout deriva desses valores. Não existe valor intermediário inventado entre os nomeados; a lista de medidas é o sistema inteiro.
- Vídeo na camada de baixo. A mídia faz trabalho de atmosfera, não de narrativa: um loop de 6,5s em 1904x1080 atrás de tudo. Um frame de poster em 1904x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Números no tamanho de display. Uma faixa compacta de estatísticas carrega as afirmações que de outro modo pediriam um parágrafo, o que impede a composição de landing page de virar uma lista de recursos. O destaque é gasto nos números que fazem uma afirmação, não na fileira inteira.
Movimento e interação
Tempos curtos e combinados
Uma única duração cobre as interações (700ms), e é isso que mantém hover e clique lendo como um sistema só. Os estados de foco usam o mesmo valor do hover, então teclado e ponteiro recebem o mesmo feedback. Os tempos fazem parte do design, não são um acabamento final.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 6,5s em 1904x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O loop é recortado para cover, o que significa que a composição não depende de um tamanho de frame específico. Grave ou exporte em 1904x1080 ou mais largo.
A ordem por trás da landing page
Coloque o seu próprio texto nesta landing page e a sequência continua de pé, porque os elementos não são intercambiáveis: cada um de a navegação, o título, a linha de estatísticas, a lista de recursos e o rodapé carrega uma função. O leitor de agência recebe a oferta antes das opções.
A landing page com a sua cara
A composição é a parte reaproveitável e o assunto é seu. Mantenha passos de espaçamento de 40px e transições de 700ms e substitua as palavras, a mídia e as marcas. O assunto é a parte que deve mudar.
Como a landing page se reorganiza
Não dá para resolver uma tela estreita encolhendo-a. Este briefing trata a mudança na tipografia e na navegação: a escala é fluida, não em degraus. Os dois estados estão descritos no mesmo briefing.
Perguntas frequentes
O que o briefing por trás de Talent Collective contém de fato?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1904x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Posso reconstruir landing page do Talent Collective em outra stack?
Talent Collective 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 Talent Collective 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 1904x1080.
