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.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import Image from "next/image";
|
|
import { OfferVideo } from "./OfferVideo";
|
|
|
|
/**
|
|
* Peça de blocos na coluna da direita do topo de uma página interna (a grade é `heroWithMediaGrid`), só de 1024 px em
|
|
* diante. Decorativa: fora da leitura. A peça não mede nada: ocupa a altura que o texto ao lado já deu à linha (e um
|
|
* pouco da folga de cima e de baixo), então não empurra o texto nem aumenta o topo.
|
|
* `image`: imagem de fundo transparente (`/3d/estado-*.webp`, 1200x900). `loop`: o loop `public/3d/peca-<nome>`
|
|
* (640x400, fundo #0a0a0a, que some no topo escuro), pelo OfferVideo.
|
|
*/
|
|
export function PagePiece(
|
|
props: Readonly<{ image: string } | { loop: string }>,
|
|
) {
|
|
return (
|
|
<div aria-hidden="true" className="relative hidden self-stretch lg:block">
|
|
{/* object-contain: a peça inteira à vista; o loop chega com object-cover do OfferVideo e não pode perder as bordas */}
|
|
<div className="absolute inset-x-0 -top-sp-8 -bottom-sp-6 [&_video]:object-contain">
|
|
{"image" in props ? (
|
|
<Image
|
|
src={props.image}
|
|
alt=""
|
|
fill
|
|
sizes="(min-width: 1024px) 40vw, 1px"
|
|
className="object-contain"
|
|
/>
|
|
) : (
|
|
<OfferVideo name={props.loop} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|