feat(site): blocos 3D da marca, novas ofertas e hero mais abrangente

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.
2026-11-10 03:48:25 -03:00
1 parent 4671837c44
commit c7d09d63d4
@@ -9,13 +9,16 @@ import {
  useMemo,
  useRef,
  useState,
+  ViewTransition,
 } from "react";
+import { coverTransitionProps } from "@/app/cases/_components/cover-transition";
 import { isWebKit } from "@/lib/device";
 import {
  chapterIndexAtScroll,
  chapterScrollFraction,
  getScrubSource,
  getShowcaseAssets,
+  projectKicker,
  videoFractionAtScroll,
 } from "@/lib/project-showcase";
 import { BrowserFrame, displayUrl } from "./BrowserFrame";
@@ -550,15 +553,17 @@ function ReelLayer({
        <div className="ds-reel-screen">
          {/* o pôster é a imagem de baixo (uma só, otimizada): o vídeo, por cima, cobre-a ao carregar */}
          {poster && (
-            <Image
-              src={desktop.poster}
-              alt=""
-              width={desktop.width}
-              height={desktop.height}
-              sizes={LAPTOP_POSTER_SIZES}
-              loading="eager"
-              fetchPriority="low"
-            />
+            <ActiveCover id={config.id} active={isActive}>
+              <Image
+                src={desktop.poster}
+                alt=""
+                width={desktop.width}
+                height={desktop.height}
+                sizes={LAPTOP_POSTER_SIZES}
+                loading="eager"
+                fetchPriority="low"
+              />
+            </ActiveCover>
          )}
          <video
            ref={videoRef}
@@ -592,6 +597,29 @@ function ReelLayer({
  );
 }

+/**
+ * Só o projeto em cena leva o nome da capa (`case-<id>`): em "Ver case", o pôster do notebook viaja até o topo do
+ * case. É o pôster, e não o vídeo por cima dele, porque é a mesma imagem do topo do case (o vídeo está no meio da
+ * rolagem do site). O nome não troca de lugar numa atualização: o React só esquece um nome quando o
+ * <ViewTransition> sai da árvore, e um nome trocado no lugar ficava preso ao projeto antigo (aviso de nome
+ * repetido ao abrir a capa dele depois). Por isso o projeto que entra em cena ganha um <ViewTransition> novo,
+ * e só a imagem remonta (o vídeo fica).
+ */
+function ActiveCover({
+  id,
+  active,
+  children,
+}: {
+  id: string;
+  active: boolean;
+  children: React.ReactNode;
+}) {
+  if (!active) return children;
+  return (
+    <ViewTransition {...coverTransitionProps(id)}>{children}</ViewTransition>
+  );
+}
+
 const pad = (value: number) => String(value).padStart(2, "0");

 /**
@@ -643,7 +671,7 @@ function ReelCaption({
  return (
    <div className="ds-reel-caption" data-leaving={leaving ? "" : undefined}>
      <p className="ds-kicker">
-        {project.category} · {project.status}
+        {projectKicker(project.category, project.status)}
      </p>
      <h3 className="ds-reel-title">{project.title}</h3>
      {project.subtitle && <p className="ds-reel-sub">{project.subtitle}</p>}
@@ -14,7 +14,8 @@ jest.mock("./ProjectLightboxLazy", () => ({

 /**
 * Testes de caminhos-base de ProjectList (e do ListItem dentro dela): sem aparelho (servidor), celular x desktop,
- * longe x perto da janela (pôster), com e sem subtítulo, rótulo "pendente" e o botão de ampliar.
+ * longe x perto da janela (pôster), com e sem subtítulo, rótulo "pendente", o botão de ampliar e o pôster como
+ * elemento compartilhado da troca de página.
 */

 jest.mock("./ProjectLightbox", () => ({
@@ -25,6 +26,11 @@ jest.mock("./ProjectLightbox", () => ({
  ),
 }));

+// o dublê do <ViewTransition> põe as props num <div> para o teste ler
+jest.mock("react", () =>
+  jest.requireActual("@/__mocks__/view-transition-probe").reactWithProbe(),
+);
+
 type Callback = IntersectionObserverCallback;
 /** Cada observador criado, com o elemento que observa. */
 const observers: Array<{ callback: Callback; target?: Element }> = [];
@@ -114,6 +120,19 @@ describe("ProjectList", () => {
    expect(images[0]).toHaveAttribute("sizes", "50vw");
  });

+  it("path: poster near the window -> shared element named after the case (case-<id>), one name per item", () => {
+    const { container } = renderList({ device: "mobile" });
+    bringAllNear(container);
+
+    const names = [...container.querySelectorAll("img")].map((image) =>
+      image.parentElement?.getAttribute("data-vt-name"),
+    );
+    expect(names).toEqual(items.map(({ config }) => `case-${config.id}`));
+    const transition = container.querySelector("img")?.parentElement;
+    expect(transition).toHaveAttribute("data-vt-share", "case-cover");
+    expect(transition).toHaveAttribute("data-vt-default", "none");
+  });
+
  it("path: mobile -> phone frame with the phone poster and the phone sizes", () => {
    const { container } = renderList({ device: "mobile" });
    bringAllNear(container);
@@ -8,8 +8,14 @@ import {
  useId,
  useRef,
  useState,
+  ViewTransition,
 } from "react";
-import { type Device, getShowcaseAssets } from "@/lib/project-showcase";
+import { coverTransitionProps } from "@/app/cases/_components/cover-transition";
+import {
+  type Device,
+  getShowcaseAssets,
+  projectKicker,
+} from "@/lib/project-showcase";
 import { BrowserFrame, displayUrl } from "./BrowserFrame";
 import { PhoneFrame } from "./PhoneFrame";
 import { ProjectActions } from "./ProjectActions";
@@ -78,17 +84,20 @@ function ListItem({
  const ref = useRef<HTMLLIElement>(null);
  const near = useNearViewport(ref);
  const assets = device ? getShowcaseAssets(config.id, device) : null;
-  // só pôster (nunca vídeo): a imagem entra quando o item chega a ~1 tela da janela
+  // só pôster (nunca vídeo): a imagem entra quando o item chega a ~1 tela da janela. É a mesma capa do topo do
+  // case: viaja até lá na troca de página (o item tem uma moldura só, então o nome não se repete)
  const poster =
    assets && near ? (
-      <Image
-        src={assets.poster}
-        alt={`Captura de tela de ${project.title}`}
-        width={assets.width}
-        height={assets.height}
-        // o celular da moldura mede ~160 px no carrossel (o pôster de 390 px viria inteiro para 160 px de tela)
-        sizes={device === "mobile" ? "160px" : "50vw"}
-      />
+      <ViewTransition {...coverTransitionProps(config.id)}>
+        <Image
+          src={assets.poster}
+          alt={`Captura de tela de ${project.title}`}
+          width={assets.width}
+          height={assets.height}
+          // o celular da moldura mede ~160 px no carrossel (o pôster de 390 px viria inteiro para 160 px de tela)
+          sizes={device === "mobile" ? "160px" : "50vw"}
+        />
+      </ViewTransition>
    ) : null;

  return (
@@ -111,7 +120,7 @@ function ListItem({
      )}
      <div className="ds-reel-caption">
        <p className="ds-kicker">
-          {project.category} · {project.status}
+          {projectKicker(project.category, project.status)}
        </p>
        <h3 className="ds-reel-title">{project.title}</h3>
        {project.subtitle && <p className="ds-reel-sub">{project.subtitle}</p>}
@@ -24,6 +24,11 @@ jest.mock("@/app/hooks/useReducedMotion", () => ({
  useReducedMotion: () => reducedMotion,
 }));

+// o dublê do <ViewTransition> põe as props num <div> para o teste ler
+jest.mock("react", () =>
+  jest.requireActual("@/__mocks__/view-transition-probe").reactWithProbe(),
+);
+
 const PIN = 800;
 const CONTAINER = 7000;
 const SCROLLABLE = CONTAINER - PIN;
@@ -313,6 +318,25 @@ describe("ProjectReel", () => {
    );
  });

+  it("gives the cover name (case-<id>) to the laptop poster of the project on screen only, without remounting its video", () => {
+    renderReel();
+    const selector = ".ds-reel-layer [data-vt-name]";
+    expect(document.querySelectorAll(selector)).toHaveLength(1);
+    expect(
+      activeLayer().querySelector(".ds-reel-screen [data-vt-name] > img")
+        ?.parentElement,
+    ).toHaveAttribute("data-vt-name", "case-sev-modaintima");
+
+    const video = document.querySelectorAll(".ds-reel-layer video")[1];
+    scrollTo(reelOffset(weights, 1, 0.5));
+
+    expect(document.querySelectorAll(selector)).toHaveLength(1);
+    const named = activeLayer().querySelector(selector);
+    expect(named).toHaveAttribute("data-vt-name", "case-lavacao-047");
+    expect(named).toHaveAttribute("data-vt-share", "case-cover");
+    expect(document.querySelectorAll(".ds-reel-layer video")[1]).toBe(video);
+  });
+
  it("names the chapter on screen and counts them", () => {
    renderReel();
    readyVideos();
@@ -25,12 +25,24 @@ html.ds-lb-open {
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
+  opacity: 0;
+  transition:
+    opacity 180ms var(--ease-in),
+    overlay 180ms allow-discrete,
+    display 180ms allow-discrete;

  &[open] {
    display: flex;
    align-items: center;
    justify-content: center;
-    animation: ds-lb-in 0.28s var(--ease-out);
+    opacity: 1;
+    transition-duration: 280ms;
+    transition-timing-function: var(--ease-out);
+
+    @starting-style {
+      /* biome-ignore lint/suspicious/noDuplicateProperties: dentro de @starting-style é o estado inicial da entrada, não uma repetição */
+      opacity: 0;
+    }
  }

  &::backdrop {
@@ -38,15 +50,10 @@ html.ds-lb-open {
  }
 }

-@keyframes ds-lb-in {
-  from {
-    opacity: 0;
-  }
-}
-
@media (prefers-reduced-motion: reduce) {
+  .ds-lb,
  .ds-lb[open] {
-    animation: none;
+    transition: none;
  }
 }

@@ -326,12 +333,23 @@ html.ds-lb-open {
  gap: var(--sp-2) var(--sp-3);

  & .ds-link.ds-link-muted {
+    --block: rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.38);
    background: transparent;
  }

+  & .ds-link.ds-link-muted:focus-visible {
+    border-color: rgba(255, 255, 255, 0.55);
+  }
+
+  @media (hover: hover) {
+    & .ds-link.ds-link-muted:hover {
+      border-color: rgba(255, 255, 255, 0.55);
+    }
+  }
+
  & .ds-link.ds-link-text {
    color: rgba(255, 255, 255, 0.84);
  }
@@ -87,9 +87,8 @@
  gap: 6px 10px;
  margin-bottom: var(--sp-5);
  font-family: var(--font-mono);
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-size: 13px;
+  letter-spacing: 0.02em;
  color: var(--slash);
 }

@@ -190,6 +189,32 @@
  opacity: 1;
 }

+/* Projeto fora de cena, sob o ponteiro ou no foco: uma barra verde entra pela esquerda, no lugar onde o projeto em
+   cena mostra o progresso (.ds-reel-bar). Com movimento reduzido a vitrine fixa nem existe (reel-list.css). */
+.ds-reel-pick:not([aria-current="true"])::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: var(--slash);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 280ms var(--ease-out);
+  pointer-events: none;
+}
+
+.ds-reel-pick:not([aria-current="true"]):focus-visible::before {
+  transform: none;
+}
+
+@media (hover: hover) {
+  .ds-reel-pick:not([aria-current="true"]):hover::before {
+    transform: none;
+  }
+}
+
@media (min-width: 640px) {
  .ds-reel-name {
    display: inline;
@@ -81,7 +81,8 @@
  overflow: hidden;
 }

-/* Ver case e Ampliar vídeo em contorno; Abrir site é link de texto. Nada em lima: o preenchido é do contato. */
+/* Ver case e Ampliar vídeo em contorno; Abrir site é link de texto. Nada em lima: o preenchido é do contato. No
+   ponteiro e no foco, o bloco translúcido dos contornos em fundo escuro (globals.css). */
 .ds-reel-actions {
  display: flex;
  flex-wrap: wrap;
@@ -90,16 +91,20 @@
  margin-top: var(--sp-2);

  & .ds-link.ds-link-muted {
+    --block: rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.38);
    background: transparent;
  }

+  & .ds-link.ds-link-muted:focus-visible {
+    border-color: rgba(255, 255, 255, 0.55);
+  }
+
  @media (hover: hover) {
    & .ds-link.ds-link-muted:hover {
-      border-color: #fff;
-      box-shadow: none;
+      border-color: rgba(255, 255, 255, 0.55);
    }
  }