feat(home): ofertas que vendem o título, WhatsApp no hero e menu do celular acessível

Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.

app/ia/page.test.tsx

@@ -10,17 +10,24 @@ it("uses a short search title: with the layout suffix it fits in 44 characters",
     description: expect.any(String),
     alternates: { canonical: "https://evandro.dev.br/ia" },
   });
-  // as prévias de compartilhamento não passam pelo template: o título delas já leva o sufixo
-  expect(metadata.openGraph?.title).toBe(
-    `Revisão de app feito com IA${suffix}`,
-  );
+  // como nas outras páginas, o título da prévia de compartilhamento é o mesmo da busca, sem o sufixo
+  expect(metadata.openGraph?.title).toBe("Revisão de app feito com IA");
+  expect(metadata.twitter?.title).toBe("Revisão de app feito com IA");
+});
+
+it("uses no lime outside the contact actions (the quote on the paper background is ink)", () => {
+  const { container } = render(<AiPage />);
+
+  expect(
+    container.querySelector('[class*="border-[var(--slash)]"]'),
+  ).toBeNull();
 });
 
 it("keeps the full AI content, with the cited incidents summarized only here", () => {
   render(<AiPage />);
 
   expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-    "Revisão de app feito com IA (Lovable, Bolt, Replit)",
+    "Seu app feito com IA está pronto para receber clientes? Eu testo antes deles.",
   );
   for (const heading of [
     "Se a IA cria um sistema, por que contratar um desenvolvedor?",
@@ -91,6 +98,51 @@ it("presents the review as an offer: what the person receives, with no price or
   expect(container.textContent).not.toMatch(/R\$|\d+ dias|em até \d+/);
 });
 
+it("shows the report list in a card on the right half of the hero, next to the headline", () => {
+  render(<AiPage />);
+
+  const card = screen.getByTestId("ia-review-card");
+  expect(within(card).getByText("O que você recebe")).toBeInTheDocument();
+  expect(
+    within(card)
+      .getAllByRole("listitem")
+      .map((item) => item.textContent?.replace(/^\d+/, "")),
+  ).toEqual([
+    "As falhas de acesso a dados",
+    "O que dá para aproveitar",
+    "O que é melhor refazer",
+    "Um orçamento para pôr em produção",
+  ]);
+  // o cartão divide a grade do hero com o título (metade direita no desktop) e não cria uma região de página
+  const hero = screen.getByRole("heading", { level: 1 }).closest("section");
+  expect(hero).toContainElement(card);
+  expect(card.parentElement).toHaveClass(
+    "lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]",
+  );
+  expect(screen.queryByRole("complementary")).toBeNull();
+  // o título do cartão não repete o h2 "O que você recebe na revisão" da seção seguinte
+  expect(
+    screen.getAllByRole("heading", { name: /O que você recebe/ }),
+  ).toHaveLength(1);
+});
+
+it("keeps the secondary hero button inside the page: the portfolio cases are not reviews of AI-built apps", () => {
+  render(<AiPage />);
+
+  const hero = screen.getByRole("heading", { level: 1 }).closest("section");
+  const secondary = within(hero as HTMLElement).getByRole("link", {
+    name: "Ver como a revisão funciona",
+  });
+  expect(secondary).toHaveAttribute("href", "#ia-receber");
+  expect(document.querySelector(`section[id="ia-receber"]`)).not.toBeNull();
+  for (const link of within(hero as HTMLElement).getAllByRole("link")) {
+    expect(link.getAttribute("href")).not.toMatch(/^\/cases/);
+  }
+  expect(
+    screen.queryByRole("link", { name: "Ver projetos entregues" }),
+  ).toBeNull();
+});
+
 it("keeps the incident news collapsed in a <details>, closed by default", () => {
   const { container } = render(<AiPage />);