feat(home): seção Sobre com prova por ponto, contato por oferta e hero com a Lavação 047 na tela larga

app/components/HeroWork.test.tsx

@@ -17,7 +17,7 @@ describe("HeroWork: pôsteres no tamanho certo", () => {
 
     const desktop = within(screen.getByTestId("hero-work")).getAllByRole("img");
     expect(desktop).toHaveLength(2);
-    expect(original(desktop[0])).toBe("/videos/sev-modaintima/desktop.webp");
+    expect(original(desktop[0])).toBe("/videos/lavacao-047/desktop.webp");
     expect(original(desktop[1])).toBe("/videos/as-servicos/mobile.webp");
     // 1440x900 e 390x844 cheios para quadros de ~491x307 e ~130x299 era banda de sobra
     expect(desktop[0]).toHaveAttribute(
@@ -29,12 +29,30 @@ describe("HeroWork: pôsteres no tamanho certo", () => {
       "(min-width: 1400px) 136px, 10vw",
     );
 
-    // o cartão do celular usa o pôster largo da SEV, na largura da coluna (cerca de 350 px num celular de 390 px)
+    // o cartão do celular usa o pôster de celular da SEV (o título em letras grandes cabe na faixa de 72 px), na largura
+    // da coluna (a tela menos as duas margens: cerca de 342 px num celular de 390 px), e não 100vw
     const small = screen
       .getByTestId("hero-work-mobile")
       .querySelector("img") as HTMLImageElement;
-    expect(original(small)).toBe("/videos/sev-modaintima/desktop.webp");
-    expect(small).toHaveAttribute("sizes", "(min-width: 1024px) 1px, 100vw");
+    expect(original(small)).toBe("/videos/sev-modaintima/mobile.webp");
+    expect(small).toHaveAttribute(
+      "sizes",
+      "(min-width: 1024px) 1px, calc(100vw - 48px)",
+    );
+    expect(small).toHaveAttribute("width", "390");
+    expect(small).toHaveAttribute("height", "844");
+  });
+
+  it("shows the headline of the SEV poster in the 72px strip of the mobile card: the position moves the strip to the line 'Nova Coleção' instead of the top of the poster", () => {
+    render(<HeroWork />);
+
+    const small = screen
+      .getByTestId("hero-work-mobile")
+      .querySelector("img") as HTMLImageElement;
+    expect(small).toHaveClass("object-cover", "object-[50%_57%]");
+    expect(small).not.toHaveClass("object-top");
+    // a faixa continua pequena (o título da página segue como o maior elemento da dobra)
+    expect((small.parentElement as HTMLElement).style.height).toBe("72px");
   });
 
   it("keeps the dimensions of the files, so the frames reserve their space before the images load", () => {