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/components/cinematic/CinematicHome.paths.test.tsx

@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { render, screen } from "@testing-library/react";
 import type { PortfolioProjectView } from "@/lib/portfolio-data";
 import CinematicHome from "./CinematicHome";
@@ -137,16 +139,12 @@ describe("CinematicHome: props e estrutura", () => {
     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 }}
       />,
     );
@@ -154,7 +152,8 @@ describe("CinematicHome: props e estrutura", () => {
     expect(lastHeroProps()).toMatchObject({ stats: { years: 5 }, clients });
     expect(mockProjectsProps).toHaveBeenCalledWith({ projects });
     expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: testimonials });
-    expect(mockModalitiesProps).toHaveBeenCalledWith({ serviceLinks });
+    // as ofertas não recebem mais os serviços do hub: a grade duplicada saiu da seção
+    expect(mockModalitiesProps).toHaveBeenCalledWith({});
   });
 
   it("path: optional props omitted -> the scenes receive undefined and decide their own defaults", () => {
@@ -165,9 +164,7 @@ describe("CinematicHome: props e estrutura", () => {
       clients: undefined,
     });
     expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: undefined });
-    expect(mockModalitiesProps).toHaveBeenCalledWith({
-      serviceLinks: undefined,
-    });
+    expect(mockModalitiesProps).toHaveBeenCalledWith({});
   });
 
   it("path: scenes sit in order inside <main> (FAQ right before the contact); the home has no footer of its own (it comes from the layout)", () => {
@@ -201,3 +198,25 @@ describe("CinematicHome: props e estrutura", () => {
     expect(onLayoutReady).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("CinematicHome: componente de servidor", () => {
+  const source = readFileSync(join(__dirname, "CinematicHome.tsx"), "utf8");
+
+  it("path: the file is a server component: no 'use client' and no React hooks, which live in the CinematicMain island", () => {
+    expect(source).not.toMatch(/^["']use client["']/m);
+    expect(source).not.toMatch(
+      /\buse(?:State|Effect|LayoutEffect|Ref|Callback|Memo)\b/,
+    );
+    expect(source).not.toMatch(/useCinematicScroll|useHomeFragmentNavigation/);
+    expect(source).toContain('import CinematicMain from "./CinematicMain"');
+  });
+
+  it("path: the island is the only client file of the pair, and it wraps the scenes as children", () => {
+    const island = readFileSync(join(__dirname, "CinematicMain.tsx"), "utf8");
+
+    expect(island).toMatch(/^"use client";/);
+    expect(island).toMatch(/children/);
+    expect(island).toContain("useCinematicScroll");
+    expect(island).toContain("useHomeFragmentNavigation");
+  });
+});

app/components/cinematic/CinematicHome.tsx

@@ -1,9 +1,5 @@
-"use client";
-
-import { useEffect, useRef } from "react";
 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";
@@ -14,17 +10,19 @@ import Projects from "../Projects";
 import { displayUrl } from "../showcase/BrowserFrame";
 import Testimonials from "../Testimonials";
 import { WorkModalities } from "../WorkModalities";
-import { useCinematicScroll } from "./useCinematicScroll";
-import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
+import CinematicMain from "./CinematicMain";
 
 /** Projeto cujo endereço aparece na barra do navegador de HeroWork (a SEV Moda Íntima, com domínio próprio). */
 const HERO_WORK_PROJECT = "sev-modaintima";
 
+/**
+ * Cenas da home, em componente de servidor: sem hooks aqui. Os hooks de rolagem e de chegada por fragmento ficam
+ * na ilha de cliente CinematicMain, que recebe as cenas como filhos.
+ */
 export default function CinematicHome({
   projects,
   clients,
   testimonials,
-  serviceLinks,
   heroStats,
 }: {
   heroStats?: HeroStats;
@@ -32,8 +30,6 @@ export default function CinematicHome({
   projects: PortfolioProjectView[];
   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 shownUrl = displayUrl({
     demoUrl: projects.find((project) => project.id === HERO_WORK_PROJECT)
@@ -42,32 +38,24 @@ export default function CinematicHome({
   // endereço de hospedagem (vercel.app) nunca vai para a barra: sem domínio próprio, ela mostra "pré-visualização"
   const heroWorkUrl =
     shownUrl && !/vercel\.app/i.test(shownUrl.text) ? shownUrl : null;
-  const onLayoutReady = useHomeFragmentNavigation();
-  const mainRef = useRef<HTMLElement>(null);
-  useCinematicScroll(mainRef);
-  // o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
-  useEffect(() => onLayoutReady(), [onLayoutReady]);
 
   return (
-    <div className="overflow-x-clip">
-      {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. O rodapé vem do layout. */}
-      <main ref={mainRef} className="ds-main relative z-0">
-        <Hero stats={heroStats} clients={clients} workUrl={heroWorkUrl} />
+    <CinematicMain>
+      <Hero stats={heroStats} clients={clients} workUrl={heroWorkUrl} />
 
-        <Projects projects={projects} />
+      <Projects projects={projects} />
 
-        <About />
+      <About />
 
-        <WorkModalities serviceLinks={serviceLinks} />
+      <WorkModalities />
 
-        <EngineeringWithAI />
+      <EngineeringWithAI />
 
-        <Testimonials items={testimonials} />
+      <Testimonials items={testimonials} />
 
-        <HomeFaq />
+      <HomeFaq />
 
-        <Contact />
-      </main>
-    </div>
+      <Contact />
+    </CinematicMain>
   );
 }

app/components/cinematic/CinematicMain.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import CinematicMain from "./CinematicMain";
+import { useCinematicScroll } from "./useCinematicScroll";
+import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
+
+/**
+ * A ilha de cliente da home: tem os hooks de rolagem e de chegada por fragmento e entrega as cenas (filhos) dentro
+ * de <main>. Os hooks são trocados por dublês que registram o que recebem.
+ */
+
+jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
+jest.mock("./useHomeFragmentNavigation", () => ({
+  useHomeFragmentNavigation: jest.fn(),
+}));
+
+const onLayoutReady = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
+});
+
+describe("CinematicMain", () => {
+  it("renders the scenes as direct children of <main>, inside the clipping wrapper", () => {
+    render(
+      <CinematicMain>
+        <section data-testid="a" />
+        <section data-testid="b" />
+      </CinematicMain>,
+    );
+
+    const main = screen.getByRole("main");
+    expect(main).toHaveClass("ds-main", "relative", "z-0");
+    expect(
+      Array.from(main.children).map((child) =>
+        child.getAttribute("data-testid"),
+      ),
+    ).toEqual(["a", "b"]);
+    expect(main.parentElement).toHaveClass("overflow-x-clip");
+  });
+
+  it("gives the scroll hook the <main> ref and runs the layout-ready callback once on mount", () => {
+    render(
+      <CinematicMain>
+        <section />
+      </CinematicMain>,
+    );
+
+    const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
+    expect(ref.current).toBe(screen.getByRole("main"));
+    expect(onLayoutReady).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not run the layout-ready callback again on a re-render", () => {
+    const { rerender } = render(
+      <CinematicMain>
+        <section />
+      </CinematicMain>,
+    );
+
+    rerender(
+      <CinematicMain>
+        <section />
+        <section />
+      </CinematicMain>,
+    );
+
+    expect(onLayoutReady).toHaveBeenCalledTimes(1);
+  });
+});

app/components/cinematic/CinematicMain.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { type ReactNode, useEffect, useRef } from "react";
+import { useCinematicScroll } from "./useCinematicScroll";
+import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
+
+/**
+ * A ilha de cliente da home: só ela precisa de hooks (rolagem suave e passagens entre cenas, chegada por fragmento).
+ * Ela recebe as cenas como `children`, então CinematicHome e as seções continuam no servidor e só o que já era
+ * de cliente (Hero, Contact, Section...) vai para o pacote do navegador.
+ * Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. O rodapé vem do layout.
+ */
+export default function CinematicMain({ children }: { children: ReactNode }) {
+  const onLayoutReady = useHomeFragmentNavigation();
+  const mainRef = useRef<HTMLElement>(null);
+  useCinematicScroll(mainRef);
+  // o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
+  useEffect(() => onLayoutReady(), [onLayoutReady]);
+
+  return (
+    <div className="overflow-x-clip">
+      <main ref={mainRef} className="ds-main relative z-0">
+        {children}
+      </main>
+    </div>
+  );
+}