Sobre este template
Subscription Agency é uma referência prática para uma agência ou estúdio: hero com layout definido, medidas tiradas e tudo pronto para reconstruir. O esquema de cores é #FFFFFF por baixo, #0A0A0A para a tipografia e verde #17C964 carregando os destaques, e a página é composta em 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.4s e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 6.172 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Esta hero é feita para agências que precisam da moldura em 1476x1080 sobrevivendo a três rodadas de edições do cliente.
- Feito para agências que cobram por rodada e querem um tamanho de display fixo de 82px e passos de espaçamento de 14px acordado antes da primeira.
- Profissionais de marketing de produto que precisam que hero continue legível com 6,3s de vídeo em loop atrás do texto.
O que está incluído
- Uma linha, sem gaveta. A linha de cima reúne a marca, quatro ou cinco links e uma única ação tingida de #17C964, dimensionada para ficar discreta diante do resto da página. Os links são compostos abaixo da marca em tamanho, e a ação #17C964 é o único elemento da barra com peso.
- Números levados para a construção. O layout é resolvido sobre valores fixos (um tamanho de display fixo de 82px, passos de espaçamento de 14px e transições de 0.4s), e é isso que mantém a primeira tela composta em qualquer largura. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada. Onde o briefing se cala, ele se cala de propósito.
- Mídia sem sobreposição. O vídeo em 1476x1080 roda 6,3s em loop atrás do texto, mudo e inline, sem camada de tingimento entre os dois. Exporte em 1476x1080 ou mais largo e o recorte cover continua funcionando.
- Links antes da ação. Não dê à marca mais espaço do que a tipografia dela precisa. A referência tem captura em 1476x1080.
Movimento e interação
O loop faz o trabalho ambiente
O movimento ambiente vem do loop de 6,3s em 1476x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. Como é mudo, o loop pode rodar sob o texto sem disputar som nem foco.
Durações vindas do briefing
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 0.4s. Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. A curva de aceleração é especificada junto com a duração (0.4s), então uma reconstrução não pode trocar a sensação sem aviso. Uma duração por comportamento.
Ler Subscription Agency como especificação
O custo de uma escala fixa é menos espaço para improvisar. um tamanho de display fixo de 82px e passos de espaçamento de 14px mantêm a composição coerente, mas um elemento novo precisa ser encaixado, não apenas colocado. Nada nesta hero depende de um padrão.
A ordem por trás da hero
A página tem uma ordem deliberada. A navegação apresenta o produto e dá a quem volta um caminho familiar. O título ocupa o tamanho de display, a linha de apoio explica a oferta e o destaque verde #17C964 marca a ação principal, então o próximo passo nunca fica em dúvida. Nada mais compete: não existe grade de cards antes da primeira decisão, e é isso que tira o peso de hero em trabalho de agência. O leitor de agência recebe a oferta antes das opções.
O que se move em Subscription Agency
Um pacote de animações prontas teria sido mais rápido de publicar. O briefing especifica transições de 0.4s, um loop de mídia de 6,3s e estados de hover e de clique, e é por isso que a página lê como autoral, não como montada. Nada anima por si nesta hero.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Subscription Agency?
O briefing capturado tem 6.172 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.
Por que a entrada cita React e Tailwind CSS?
Subscription Agency 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 Subscription Agency é animado?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 0.4s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
