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.
36 lines
2.2 KiB
TypeScript
36 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { ViewTransition } from "react";
|
|
import { useFocusOnNavigation } from "@/app/hooks/useFocusOnNavigation";
|
|
|
|
/**
|
|
* O conteúdo leva a classe "page" e entra com a cortina de blocos (globals.css) a cada troca de página.
|
|
* key={pathname}: o template da raiz só remonta quando muda o primeiro segmento da rota (de /cases para
|
|
* /cases/um-projeto ele continua o mesmo), e sem a chave a troca seria uma atualização no lugar, que
|
|
* update="none" corta. Com a chave, a página que sai e a que entra são uma saída e uma entrada. Sem `name`, elas
|
|
* não formam par: cada imagem fica onde estava na tela (com nome comum, a página que sai, se estava rolada,
|
|
* pulava para o topo, no lugar da que entra).
|
|
* update="none": a hidratação e a revelação de Suspense também são transições do React e animariam a página
|
|
* inteira na chegada (a tela piscava duas vezes); só a troca de página anima.
|
|
* Depois de cada troca o foco vai para #main-content, sem rolar (useFocusOnNavigation); a carga inicial não mexe no foco.
|
|
*
|
|
* Só no `next dev`, algumas rotas (/servicos/engenharia-de-software, /servicos/arquitetura-de-software e
|
|
* /servicos/integracao-hardware-software-iot, às vezes o 404) mostram no console "Each child in a list should have a
|
|
* unique key prop. Check the render method of OuterLayoutRouter". Não vem da `key` daqui nem do conteúdo da página
|
|
* (uma página vazia também mostra): sem template.tsx o aviso some, e com qualquer template.tsx (testado com um
|
|
* template de servidor e sem `key`) o servidor de desenvolvimento embrulha o template em
|
|
* um nó do explorador de segmentos, e, quando o React o serializa como referência preguiçosa (`$L`) dentro da lista
|
|
* [estilos, scripts, template] do TemplateContext, a conferência de keys o vê sem chave. O embrulho só existe com
|
|
* `__NEXT_DEV_SERVER` e o aviso só existe no React de desenvolvimento: em produção não acontece.
|
|
*/
|
|
export default function Template({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
useFocusOnNavigation(pathname);
|
|
return (
|
|
<ViewTransition key={pathname} default="page" update="none">
|
|
{children}
|
|
</ViewTransition>
|
|
);
|
|
}
|