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/Header.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect } from "react";
+import { useHomeFragmentNavigation } from "./cinematic/useHomeFragmentNavigation";
 import { Header } from "./Header";
 
 jest.mock("motion/react", () => {
@@ -26,6 +27,21 @@ jest.mock("motion/react", () => {
   return { motion, useReducedMotion: () => false };
 });
 
+function HomeWithHeader() {
+  const onLayoutReady = useHomeFragmentNavigation();
+  useEffect(() => {
+    onLayoutReady();
+  }, [onLayoutReady]);
+  return (
+    <>
+      <Header />
+      <section id="about" aria-label="Sobre">
+        <h2>Sobre</h2>
+      </section>
+    </>
+  );
+}
+
 describe("Header", () => {
   it("exposes the primary navigation and the existing CV asset", () => {
     render(<Header />);
@@ -50,9 +66,14 @@ describe("Header", () => {
     const cvLink = screen.getByRole("link", { name: "Download CV" });
     expect(cvLink).toHaveAttribute("href", "/Profile.pdf");
     expect(cvLink).toHaveAttribute("download", "Evandro_Fonseca_Junior_CV.pdf");
-    expect(
-      screen.getByRole("navigation", { name: "Navegação principal" }),
-    ).toHaveClass("site-header-nav");
+    expect(screen.getByRole("link", { name: "Sobre" })).toHaveAttribute(
+      "href",
+      "/#about",
+    );
+    expect(screen.getByRole("link", { name: "Contato" })).toHaveAttribute(
+      "href",
+      "/#contact",
+    );
   });
 
   it("announces and controls the mobile menu", () => {
@@ -61,17 +82,12 @@ describe("Header", () => {
     const menuButton = screen.getByRole("button", { name: "Abrir menu" });
     expect(menuButton).not.toHaveAttribute("aria-controls");
     expect(menuButton).toHaveAttribute("aria-expanded", "false");
-    expect(menuButton).toHaveClass("site-header-menu-toggle");
     expect(
       screen.queryByRole("navigation", { name: "Navegação mobile" }),
     ).not.toBeInTheDocument();
 
     fireEvent.click(menuButton);
 
-    expect(screen.getByRole("button", { name: "Fechar menu" })).toHaveAttribute(
-      "aria-controls",
-      "site-navigation-menu",
-    );
     expect(screen.getByRole("button", { name: "Fechar menu" })).toHaveAttribute(
       "aria-expanded",
       "true",
@@ -79,29 +95,41 @@ describe("Header", () => {
     const mobileNavigation = screen.getByRole("navigation", {
       name: "Navegação mobile",
     });
-    expect(mobileNavigation).toHaveAttribute("id", "site-navigation-menu");
-    expect(mobileNavigation).toHaveAttribute("aria-hidden", "false");
+    expect(
+      document.getElementById(menuButton.getAttribute("aria-controls") ?? ""),
+    ).toBe(mobileNavigation);
 
-    const closeButton = screen.getByRole("button", { name: "Fechar menu" });
-    fireEvent.keyDown(closeButton, { key: "Escape" });
+    const mobileLink = within(mobileNavigation).getByRole("link", {
+      name: "Sobre",
+    });
+    mobileLink.focus();
+    fireEvent.keyDown(mobileLink, { key: "Escape" });
     const openButton = screen.getByRole("button", { name: "Abrir menu" });
     expect(openButton).toHaveAttribute("aria-expanded", "false");
     expect(document.activeElement).toBe(openButton);
   });
 
-  it("returns focus after closing the menu from a mobile link", () => {
-    render(<Header />);
+  it("closes the mobile menu without taking focus away from a home destination", () => {
+    window.history.replaceState(null, "", "/");
+    render(<HomeWithHeader />);
 
     fireEvent.click(screen.getByRole("button", { name: "Abrir menu" }));
     const mobileNavigation = screen.getByRole("navigation", {
       name: "Navegação mobile",
     });
-    fireEvent.click(
-      within(mobileNavigation).getByRole("link", { name: "Home" }),
-    );
+    const mobileLink = within(mobileNavigation).getByRole("link", {
+      name: "Sobre",
+    });
+    mobileLink.focus();
+    fireEvent.click(mobileLink);
 
-    const openButton = screen.getByRole("button", { name: "Abrir menu" });
-    expect(openButton).toHaveAttribute("aria-expanded", "false");
-    expect(document.activeElement).toBe(openButton);
+    expect(screen.getByRole("button", { name: "Abrir menu" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(
+      screen.queryByRole("navigation", { name: "Navegação mobile" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("region", { name: "Sobre" })).toHaveFocus();
   });
 });