Sobre este template
GlobalBank entrega a um produto de IA ou SaaS uma primeira tela pronta e os números que a produziram. Ela abre com “Think Ahead. Move Fast. Exceed Expectations” e dá a essa linha a moldura inteira em vez de encolhê-la em um card. A paleta é branco #FFFFFF por baixo, verde profundo #1A2E24 para a tipografia e verde #22C55E carregando os destaques, com tipografia Inter. A entrega é um único arquivo HTML autocontido, capturada em 1468x1080 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 4.1s e um loop de vídeo ao fundo. Deixe aberto enquanto escreve: o briefing de 31.093 caracteres é a parte que se transfere para a sua própria página.
Feito para
- Se o seu time de front-end parte de um único arquivo HTML autocontido, levante tipografia de 14px a 46px e passos de espaçamento de 14px primeiro e deixe a paleta em paz até a grade se firmar.
- A página serve desenvolvedores front-end que reconstroem um produto de IA ou SaaS hero em um único arquivo HTML autocontido e procuram os números por trás da aparência.
- Times que reconstroem a hero de SaaS de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Linha de cima: marca, links, uma ação. A navegação é uma faixa fina, não um bloco: marca à esquerda, links à direita do centro, uma ação #22C55E, tudo isso no topo de hero e sem fundo próprio. Os links são compostos abaixo da marca em tamanho, e a ação #22C55E é o único elemento da barra com peso. A barra tem meia dúzia de elementos, então se reconstrói sem biblioteca de componentes.
- Medido contra a viewport. O briefing declara os tamanhos na captura (tipografia de 14px a 46px, passos de espaçamento de 14px e transições de 4.1s), então dá para conferir uma reconstrução em vez de estimá-la. Uma reconstrução que atinge esses números fica igual à referência sem mais ajustes.
- O frame de poster importa. O briefing especifica o vídeo em 1468x1080 com um loop de 4,9s, e cada elemento de texto é posicionado contra essa moldura. Exporte em 1468x1080 ou mais largo e o recorte cover continua funcionando.
- Links colapsam em uma largura. Teste a barra sobre a sua própria mídia antes de dar um fundo a ela. A referência tem captura em 1468x1080.
Movimento e interação
Uma duração para os controles
Os controles resolvem em 4.1s, rápido o bastante para a página responder ao toque, e não depois dele. A curva de aceleração é especificada junto com a duração (4.1s), então uma reconstrução não pode trocar a sensação sem aviso.
Um loop, não uma linha do tempo
O movimento ambiente vem do loop de 4,9s em 1468x1080, não de efeitos de scroll, o que mantém a página calma e a tipografia legível. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução.
O que se move em GlobalBank
Copie o padrão, não os valores: mantenha transições de 4.1s, um loop de mídia de 4,9s e um título palavra por palavra e deixe a sua própria marca definir as durações. Nada anima por si nesta hero.
A ordem por trás da hero
Um layout guiado por recursos lista o que o produto faz; este encaminha o leitor para uma única decisão. A rota é visível em a navegação, o título e o clipe de fundo e em como tipografia de 14px a 46px e passos de espaçamento de 14px os espaçam. O leitor de SaaS recebe a oferta antes das opções.
Os números por trás da hero
A hero é medida, não avaliada no olho. tipografia de 14px a 46px e passos de espaçamento de 14px vêm do briefing, e o layout é organizado nesses degraus em vez de ajustado no improviso. Nada nesta hero depende de um padrão.
Perguntas frequentes
Por que a entrada cita um único arquivo HTML autocontido?
GlobalBank foi construído em um único arquivo HTML autocontido, 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.
Qual é o tamanho do prompt por trás de GlobalBank?
O briefing capturado tem 31.093 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.
O que comanda o movimento em GlobalBank?
As transições estão ligadas a estados da interface, não a uma linha do tempo de scroll, e resolvem na faixa de 4.1s. O briefing registra os valores para que quem for portar a página não precise adivinhar.
