feat: refine portfolio showcase, services and quality lab

Align the notebook browser with the physical LCD, refresh real project captures and navigation, simplify service content, and stabilize hero hydration.

app/components/LighthouseMetrics.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import LighthouseMetrics from "./LighthouseMetrics";
+
+it("updates the inspection criteria while preserving keyboard navigation", async () => {
+  const user = userEvent.setup();
+  render(<LighthouseMetrics />);
+
+  const report = screen.getByRole("region", { name: "Inspeção de qualidade" });
+  expect(screen.getByRole("radio", { name: /Performance/ })).toBeChecked();
+  expect(within(report).getByRole("list")).toHaveTextContent(/JavaScript/);
+
+  const accessibility = screen.getByRole("radio", { name: /Acessibilidade/ });
+  await user.click(accessibility);
+  expect(accessibility).toHaveFocus();
+  expect(within(report).getByRole("list")).toHaveTextContent(/teclado/);
+
+  await user.keyboard("{ArrowRight}");
+  expect(screen.getByRole("radio", { name: /Boas práticas/ })).toBeChecked();
+  expect(within(report).getByRole("list")).toHaveTextContent(/consentimento/);
+
+  await user.keyboard("{ArrowRight}");
+  expect(screen.getByRole("radio", { name: /SEO/ })).toBeChecked();
+  expect(within(report).getByRole("list")).toHaveTextContent(/Sitemap/);
+
+  await user.keyboard("{ArrowRight}");
+  expect(screen.getByRole("radio", { name: /Performance/ })).toBeChecked();
+  expect(within(report).getByRole("list")).toHaveTextContent(/JavaScript/);
+});