evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
/**
|
|
* Legendas do mergulho do hero (as camadas da cena 3D, em linguagem simples) e o trecho do progresso do mergulho
|
|
* (`--hero-p`, de 0 a 1) em que cada uma fica em cena. O Hero as escreve com `--from` e `--to` em cada item, e o CSS
|
|
* (globals.css, `.hero-captions li`) as liga e desliga por esses dois valores: uma rampa de 1/14 de progresso para
|
|
* entrar a partir de `from` e para sair até `to`.
|
|
*
|
|
* Os trechos seguem os estados da peça (`stateAt` em lib/blocos.ts: troca para a tela entre 0,16 e 0,30, para as
|
|
* integrações entre 0,44 e 0,56 e para os dados entre 0,70 e 0,82, parada entre uma troca e outra): cada legenda entra
|
|
* durante a troca para o seu estado (a da tela logo no começo dela, com o texto do hero saindo) e sai no meio da troca
|
|
* seguinte. Assim o intervalo sem texto entre uma e outra é
|
|
* de poucos pixels de rolagem, e a última passa de 1 para ficar em cena até Projetos subir e cobri-la.
|
|
*/
|
|
export const HERO_CAPTIONS = [
|
|
{
|
|
title: "A tela",
|
|
text: "O que sua equipe e seus clientes usam no dia a dia.",
|
|
from: 0.18,
|
|
to: 0.49,
|
|
},
|
|
{
|
|
title: "As integrações",
|
|
text: "Os programas que você já usa conversando entre si, sem retrabalho.",
|
|
from: 0.51,
|
|
to: 0.75,
|
|
},
|
|
{
|
|
title: "Os dados",
|
|
text: "Suas informações guardadas, organizadas e seguras.",
|
|
from: 0.79,
|
|
to: 1.07,
|
|
},
|
|
] as const;
|