feat: rebuild landing experience, content and analytics

app/components/Header.test.tsx

@@ -1,32 +1,8 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
-import { type ReactNode, useEffect } from "react";
+import { useEffect } from "react";
 import { useHomeFragmentNavigation } from "./cinematic/useHomeFragmentNavigation";
 import { Header } from "./Header";
 
-jest.mock("motion/react", () => {
-  const React = require("react");
-
-  const motion = new Proxy(
-    {},
-    {
-      get: (_, tag: string) => {
-        const Component = ({
-          children,
-          animate: _animate,
-          transition: _transition,
-          whileHover: _whileHover,
-          ...props
-        }: { children?: ReactNode } & Record<string, unknown>) =>
-          React.createElement(tag, props, children);
-        Component.displayName = `motion.${tag}`;
-        return Component;
-      },
-    },
-  );
-
-  return { motion, useReducedMotion: () => false };
-});
-
 function HomeWithHeader() {
   const onLayoutReady = useHomeFragmentNavigation();
   useEffect(() => {
@@ -38,42 +14,32 @@ function HomeWithHeader() {
       <section id="about" aria-label="Sobre">
         <h2>Sobre</h2>
       </section>
+      <section id="contact" aria-label="Contato">
+        <h2>Contato</h2>
+      </section>
     </>
   );
 }
 
 describe("Header", () => {
-  it("exposes the primary navigation and the existing CV asset", () => {
+  it("links to commercial destinations without promoting the résumé", () => {
     render(<Header />);
 
-    expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute(
-      "href",
-      "/#home",
-    );
-    expect(screen.getByRole("link", { name: "Casos" })).toHaveAttribute(
-      "href",
-      "/cases",
-    );
-    expect(screen.getByRole("link", { name: "Serviços" })).toHaveAttribute(
-      "href",
-      "/servicos",
-    );
-    expect(screen.getByRole("link", { name: "Currículo" })).toHaveAttribute(
-      "href",
-      "/curriculo",
-    );
-
-    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("link", { name: "Sobre" })).toHaveAttribute(
-      "href",
-      "/#about",
-    );
-    expect(screen.getByRole("link", { name: "Contato" })).toHaveAttribute(
-      "href",
-      "/#contact",
-    );
+    const navigation = screen.getByRole("navigation", {
+      name: "Navegação principal",
+    });
+    expect(
+      within(navigation)
+        .getAllByRole("link")
+        .map((link) => link.getAttribute("href")),
+    ).toEqual(["/#modalities", "/cases", "/#process", "/#about"]);
+    const contactLink = screen
+      .getAllByRole("link")
+      .find((link) => link.getAttribute("href") === "/#contact");
+    expect(contactLink).toHaveAccessibleName();
+    expect(
+      screen.queryByRole("link", { name: /currículo|download cv/i }),
+    ).not.toBeInTheDocument();
   });
 
   it("announces and controls the mobile menu", () => {
@@ -98,6 +64,16 @@ describe("Header", () => {
     expect(
       document.getElementById(menuButton.getAttribute("aria-controls") ?? ""),
     ).toBe(mobileNavigation);
+    expect(
+      within(mobileNavigation)
+        .getAllByRole("link")
+        .map((link) => link.getAttribute("href")),
+    ).toEqual(["/#modalities", "/cases", "/#process", "/#about", "/#contact"]);
+    expect(
+      within(mobileNavigation).queryByRole("link", {
+        name: /currículo|download cv/i,
+      }),
+    ).not.toBeInTheDocument();
 
     const mobileLink = within(mobileNavigation).getByRole("link", {
       name: "Sobre",
@@ -109,27 +85,34 @@ describe("Header", () => {
     expect(document.activeElement).toBe(openButton);
   });
 
-  it("closes the mobile menu without taking focus away from a home destination", () => {
-    window.history.replaceState(null, "", "/");
-    render(<HomeWithHeader />);
+  it.each([
+    ["/#about", "Sobre"],
+    ["/#contact", "Contato"],
+  ])(
+    "closes the mobile menu and preserves destination focus for %s",
+    (href, destination) => {
+      window.history.replaceState(null, "", "/");
+      render(<HomeWithHeader />);
 
-    fireEvent.click(screen.getByRole("button", { name: "Abrir menu" }));
-    const mobileNavigation = screen.getByRole("navigation", {
-      name: "Navegação mobile",
-    });
-    const mobileLink = within(mobileNavigation).getByRole("link", {
-      name: "Sobre",
-    });
-    mobileLink.focus();
-    fireEvent.click(mobileLink);
+      fireEvent.click(screen.getByRole("button", { name: "Abrir menu" }));
+      const mobileNavigation = screen.getByRole("navigation", {
+        name: "Navegação mobile",
+      });
+      const mobileLink = within(mobileNavigation)
+        .getAllByRole("link")
+        .find((link) => link.getAttribute("href") === href);
+      if (!mobileLink)
+        throw new Error(`Missing navigation destination: ${href}`);
+      mobileLink.focus();
+      fireEvent.click(mobileLink);
 
-    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();
-  });
+      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: destination })).toHaveFocus();
+    },
+  );
 });