feat(home): prova no topo, contato sem atrito e conversão medida

Home mais curta (hero, vitrine de clientes, sobre, serviços, IA resumida, depoimentos e contato), faixa de clientes e telas reais no hero, sem números do GitHub. Barra de cookies fina, WhatsApp fixo no celular, formulário com e-mail opcional e alternativa por e-mail, página /ia, eventos de e-mail, redes e currículo e conversão do Ads opcional por variável. Rodapé em 3 colunas. Remove componentes órfãos (LighthouseMetrics, Skills, Experience, contagem do GitHub).

app/components/cinematic/CinematicHome.paths.test.tsx

@@ -0,0 +1,202 @@
+import { render, screen } from "@testing-library/react";
+import type { PortfolioProjectView } from "@/lib/portfolio-data";
+import CinematicHome from "./CinematicHome";
+import { useCinematicScroll } from "./useCinematicScroll";
+import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
+
+/**
+ * Testes de caminhos-base de CinematicHome: o endereço do trabalho em destaque (projeto presente com site,
+ * presente sem site, ausente), a repasse das props opcionais, a ordem das cenas e a ligação dos hooks.
+ * As cenas e os hooks são trocados por dublês que registram o que recebem.
+ */
+
+const mockHeroProps = jest.fn();
+const mockProjectsProps = jest.fn();
+const mockModalitiesProps = jest.fn();
+const mockTestimonialsProps = jest.fn();
+const mockFooterProps = jest.fn();
+
+jest.mock("../Hero", () => ({
+  __esModule: true,
+  default: (props: unknown) => {
+    mockHeroProps(props);
+    return <section data-testid="scene-hero" />;
+  },
+}));
+jest.mock("../Projects", () => ({
+  __esModule: true,
+  default: (props: unknown) => {
+    mockProjectsProps(props);
+    return <section data-testid="scene-projects" />;
+  },
+}));
+jest.mock("../About", () => ({
+  __esModule: true,
+  default: () => <section data-testid="scene-about" />,
+}));
+jest.mock("../WorkModalities", () => ({
+  WorkModalities: (props: unknown) => {
+    mockModalitiesProps(props);
+    return <section data-testid="scene-modalities" />;
+  },
+}));
+jest.mock("../EngineeringWithAI", () => ({
+  __esModule: true,
+  default: () => <section data-testid="scene-ai" />,
+}));
+jest.mock("../Testimonials", () => ({
+  __esModule: true,
+  default: (props: unknown) => {
+    mockTestimonialsProps(props);
+    return <section data-testid="scene-testimonials" />;
+  },
+}));
+jest.mock("../Contact", () => ({
+  __esModule: true,
+  default: () => <section data-testid="scene-contact" />,
+}));
+jest.mock("../Footer", () => ({
+  __esModule: true,
+  default: (props: unknown) => {
+    mockFooterProps(props);
+    return <footer data-testid="footer" />;
+  },
+}));
+jest.mock("../FloatingWhatsApp", () => ({
+  __esModule: true,
+  default: () => <div data-testid="floating-whatsapp" />,
+}));
+jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
+jest.mock("./useHomeFragmentNavigation", () => ({
+  useHomeFragmentNavigation: jest.fn(),
+}));
+
+const onLayoutReady = jest.fn();
+
+function project(id: string, demoUrl: string | null): PortfolioProjectView {
+  return { id, demoUrl } as unknown as PortfolioProjectView;
+}
+
+const lastHeroProps = () =>
+  mockHeroProps.mock.calls[mockHeroProps.mock.calls.length - 1][0];
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
+});
+
+describe("CinematicHome: endereço do trabalho em destaque", () => {
+  it("path: the featured project is in the list with a site -> its domain goes to the hero", () => {
+    render(
+      <CinematicHome
+        projects={[
+          project("sev-modaintima", "https://sevmodaintima.com.br"),
+          project(
+            "lavacao-047",
+            "https://www.landing-lavacao.vercel.app/pagina/",
+          ),
+        ]}
+      />,
+    );
+
+    expect(lastHeroProps().workUrl).toEqual({
+      text: "landing-lavacao.vercel.app/pagina",
+      secure: true,
+    });
+  });
+
+  it("path: the featured project is in the list but has no site -> no address", () => {
+    render(<CinematicHome projects={[project("lavacao-047", null)]} />);
+
+    expect(lastHeroProps().workUrl).toBeNull();
+  });
+
+  it("path: the featured project is not in the list -> no address", () => {
+    render(
+      <CinematicHome
+        projects={[project("sev-modaintima", "https://sevmodaintima.com.br")]}
+      />,
+    );
+
+    expect(lastHeroProps().workUrl).toBeNull();
+  });
+
+  it("path: empty project list -> no address and the page still renders", () => {
+    render(<CinematicHome projects={[]} />);
+
+    expect(lastHeroProps().workUrl).toBeNull();
+    expect(screen.getByTestId("scene-contact")).toBeInTheDocument();
+  });
+});
+
+describe("CinematicHome: props e estrutura", () => {
+  it("path: every optional prop given -> each scene receives its own data", () => {
+    const projects = [project("lavacao-047", "https://a.example.com")];
+    const clients = [{ id: "lavacao-047", name: "Lavação 047" }];
+    const testimonials = [
+      { quote: "Ótimo.", name: "Ana", role: "Sócia", company: "Empresa" },
+    ];
+    const serviceLinks = [
+      { href: "/servicos/x", label: "X", description: "Serviço X" },
+    ];
+
+    render(
+      <CinematicHome
+        projects={projects}
+        clients={clients}
+        testimonials={testimonials}
+        serviceLinks={serviceLinks}
+        heroStats={{ years: 5 }}
+      />,
+    );
+
+    expect(lastHeroProps()).toMatchObject({ stats: { years: 5 }, clients });
+    expect(mockProjectsProps).toHaveBeenCalledWith({ projects });
+    expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: testimonials });
+    expect(mockModalitiesProps).toHaveBeenCalledWith({ serviceLinks });
+    expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks });
+  });
+
+  it("path: optional props omitted -> the scenes receive undefined and decide their own defaults", () => {
+    render(<CinematicHome projects={[]} />);
+
+    expect(lastHeroProps()).toMatchObject({
+      stats: undefined,
+      clients: undefined,
+    });
+    expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: undefined });
+    expect(mockModalitiesProps).toHaveBeenCalledWith({
+      serviceLinks: undefined,
+    });
+    expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks: undefined });
+  });
+
+  it("path: scenes sit in order inside <main>; the footer and the floating button sit outside it", () => {
+    render(<CinematicHome projects={[]} />);
+
+    const main = screen.getByRole("main");
+    expect(
+      Array.from(main.children).map((child) =>
+        child.getAttribute("data-testid"),
+      ),
+    ).toEqual([
+      "scene-hero",
+      "scene-projects",
+      "scene-about",
+      "scene-modalities",
+      "scene-ai",
+      "scene-testimonials",
+      "scene-contact",
+    ]);
+    expect(main).not.toContainElement(screen.getByTestId("footer"));
+    expect(main).not.toContainElement(screen.getByTestId("floating-whatsapp"));
+  });
+
+  it("path: mount -> the scroll hook gets the <main> ref and the layout-ready callback runs once", () => {
+    render(<CinematicHome projects={[]} />);
+
+    const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
+    expect(ref.current).toBe(screen.getByRole("main"));
+    expect(onLayoutReady).toHaveBeenCalledTimes(1);
+  });
+});

app/components/cinematic/CinematicHome.tsx

@@ -1,36 +1,45 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import type {
-  PortfolioExperience,
-  PortfolioProjectView,
-  PortfolioSkillCategory,
-} from "@/lib/portfolio-data";
+import type { PortfolioProjectView } from "@/lib/portfolio-data";
+import type { Testimonial } from "@/lib/proof";
+import type { ServiceLink } from "@/lib/site-navigation";
 import About from "../About";
+import type { ClientLink } from "../ClientStrip";
 import Contact from "../Contact";
 import EngineeringWithAI from "../EngineeringWithAI";
-import Experience from "../Experience";
+import FloatingWhatsApp from "../FloatingWhatsApp";
 import Footer from "../Footer";
 import Hero, { type HeroStats } from "../Hero";
-import LighthouseMetrics from "../LighthouseMetrics";
 import Projects from "../Projects";
-import Skills from "../Skills";
+import { displayUrl } from "../showcase/BrowserFrame";
+import Testimonials from "../Testimonials";
 import { WorkModalities } from "../WorkModalities";
-import ExperienceDisclosure from "./ExperienceDisclosure";
 import { useCinematicScroll } from "./useCinematicScroll";
 import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
 
+/** Projeto cujo endereço aparece na barra do navegador de HeroWork. */
+const HERO_WORK_PROJECT = "lavacao-047";
+
 export default function CinematicHome({
   projects,
-  experiences,
-  skillCategories,
+  clients,
+  testimonials,
+  serviceLinks,
   heroStats,
 }: {
   heroStats?: HeroStats;
+  /** Só projetos de cliente (o filtro é de app/page.tsx). */
   projects: PortfolioProjectView[];
-  experiences: PortfolioExperience[];
-  skillCategories: PortfolioSkillCategory[];
+  clients?: ClientLink[];
+  testimonials?: Testimonial[];
+  /** Serviços do hub; lib/site-content.ts só pode ser lido no servidor, então a página os entrega prontos. */
+  serviceLinks?: ServiceLink[];
 }) {
+  const heroWorkUrl = displayUrl({
+    demoUrl: projects.find((project) => project.id === HERO_WORK_PROJECT)
+      ?.demoUrl,
+  });
   const onLayoutReady = useHomeFragmentNavigation();
   const mainRef = useRef<HTMLElement>(null);
   useCinematicScroll(mainRef);
@@ -41,30 +50,24 @@ export default function CinematicHome({
     <div className="flex min-h-screen flex-col overflow-x-clip">
       {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. */}
       <main ref={mainRef} className="ds-main relative z-0">
-        <Hero stats={heroStats} />
+        <Hero stats={heroStats} clients={clients} workUrl={heroWorkUrl} />
 
         <Projects projects={projects} />
 
-        <WorkModalities />
+        <About />
+
+        <WorkModalities serviceLinks={serviceLinks} />
 
         <EngineeringWithAI />
 
-        <LighthouseMetrics />
-
-        <div className="bg-[var(--paper)]">
-          <About />
-
-          <ExperienceDisclosure>
-            <Skills categories={skillCategories} />
-            <Experience experiences={experiences} />
-          </ExperienceDisclosure>
-        </div>
+        <Testimonials items={testimonials} />
 
         <Contact />
       </main>
       <div className="relative z-10">
-        <Footer />
+        <Footer serviceLinks={serviceLinks} />
       </div>
+      <FloatingWhatsApp />
     </div>
   );
 }

app/components/cinematic/ExperienceDisclosure.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { type ReactNode, useEffect, useState } from "react";
-
-const TARGETS = new Set(["#experience", "#skills"]);
-
-/**
- * Skills e Experiência ficavam numa gaveta sempre fechada e sem link no menu.
- * Agora abre sozinha em telas largas (onde há espaço) e quando um link aponta para #experience ou #skills;
- * no celular continua recolhida para a página não crescer.
- */
-export default function ExperienceDisclosure({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const reveal = (hash: string) => {
-      if (!TARGETS.has(hash)) return;
-      setOpen(true);
-      // espera o React abrir a gaveta para o alvo existir no layout
-      requestAnimationFrame(() =>
-        document
-          .getElementById(hash.slice(1))
-          ?.scrollIntoView({ behavior: "instant", block: "start" }),
-      );
-    };
-    if (window.matchMedia("(min-width: 1024px)").matches) setOpen(true);
-    else if (TARGETS.has(window.location.hash)) setOpen(true);
-
-    const onClick = (event: MouseEvent) => {
-      const link =
-        event.target instanceof Element
-          ? event.target.closest("a[href*='#']")
-          : null;
-      if (!(link instanceof HTMLAnchorElement)) return;
-      const url = new URL(link.href);
-      if (url.pathname === window.location.pathname) reveal(url.hash);
-    };
-    const onHashChange = () => reveal(window.location.hash);
-    document.addEventListener("click", onClick);
-    window.addEventListener("hashchange", onHashChange);
-    return () => {
-      document.removeEventListener("click", onClick);
-      window.removeEventListener("hashchange", onHashChange);
-    };
-  }, []);
-
-  return (
-    <details
-      open={open}
-      onToggle={(event) => setOpen(event.currentTarget.open)}
-      className="ds-section !pt-0"
-    >
-      <summary className="ds-section-shell cursor-pointer py-sp-5 text-lg font-semibold">
-        Experiência e tecnologias por trás das entregas
-      </summary>
-      {children}
-    </details>
-  );
-}