Sobre este template
Aurex Finance é uma landing page de fintech construída a partir de um único briefing escrito, e esta página documenta esse briefing. A paleta é preto #000000 por baixo, branco #FFFFFF para a tipografia e azul suave #AFDDFF carregando os destaques, com tipografia Manrope. A entrega é React e Tailwind CSS, capturada em 1920x1410 para a moldura estar fixada antes de qualquer linha de código. Tudo o que se move cabe em transições de 900ms, cubic-bezier(0.16, 1, 0.3, 1) e um loop de vídeo ao fundo. É mais útil quando a landing page de Fintech precisa sobreviver a uma troca de texto sem um novo design.
Feito para
- Esta landing page responde a quem constrói e quer saber o que tipografia de 12px a 68px e passos de espaçamento de 20px controla de fato no layout.
- Esta landing page serve fundadores que precisam de uma tela de prova de que o texto de fintech aguenta 6,5s de vídeo em loop.
- Quem briefa um modelo para uma landing page vai usar o prompt de 29.337 caracteres como ponto de partida.
O que está incluído
- Topo com uma única ação. A barra carrega a marca, os links de seção e um botão #AFDDFF, tudo medido em tipografia de 12px a 68px e passos de espaçamento de 20px para nunca virar um segundo cabeçalho. Os links são compostos abaixo da marca em tamanho, e a ação #AFDDFF é o único elemento da barra com peso.
- Um clipe em sangria total atrás da tipografia. O briefing especifica o vídeo em 1920x1410 com um loop de 6,5s, e cada elemento de texto é posicionado contra essa moldura. Exporte em 1920x1410 ou mais largo e o recorte cover continua funcionando.
- A grade define a ordem. A grade é a estrutura: painéis do mesmo tamanho, compostos em Manrope, arranjados para o olho andar na horizontal em vez de descer. Os títulos dentro dos painéis ficam um passo acima do próprio texto, não um passo abaixo do título da página.
- Linha de cima: marca, links, uma ação. A fileira gasta o contraste em um lugar só: a ação #AFDDFF, com a marca e os links recuados na cor do texto. Uma sobreposição mobile assume abaixo do breakpoint de tablet.
Movimento e interação
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 6,5s em 1920x1410, 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.
Uma duração para os controles
Toda mudança de estado na especificação vem com uma duração: as transições assentam em torno de 900ms com cubic-bezier(0.16, 1, 0.3, 1). Nada fica no padrão do navegador, e é por isso que a página parece autoral em vez de animada. O tempo citado cobre mudanças de estado, então o feedback é a parte do movimento que está especificada. Leve as durações para o seu build.
O que mudar primeiro em Aurex Finance
Enquanto um tema entrega componentes, este briefing entrega uma composição: tipografia de 12px a 68px, passos de espaçamento de 20px, transições de 900ms e curva de aceleração cubic-bezier(0.16, 1, 0.3, 1) e uma moldura de mídia, com o assunto por sua conta. Uma marca diferente pode reaproveitar a moldura inteira.
Por que o briefing de fintech se sustenta
Suponha que a sua mídia seja mais alta que o seu texto. É para esse caso que esta composição foi construída. A mídia é um loop de 6,5s em 1920x1410. A moldura fica silenciosa e tipografia de 12px a 68px e passos de espaçamento de 20px mantêm o leitor no texto. Dá ao leitor de fintech a rota honesta mais curta até a oferta.
Como a landing page se reorganiza
A composição de desktop é resolvida contra 1920x1410, e o layout estreito é projetado, não herdado: a navegação vira um menu compacto no celular. O movimento tem um ramo de movimento reduzido, e a mídia traz um frame de poster para a página continuar comunicando quando a reprodução automática não está disponível. A reorganização mantém a ação alcançável em qualquer largura.
Perguntas frequentes
O prompt de Aurex Finance é 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 1920x1410, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Aurex Finance 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 usar Aurex Finance 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 1920x1410.
