feat(home): posicionamento com prova, menu sem recarregar e WhatsApp em todo o site

H1 'Sites e sistemas que trazem pedidos pelo WhatsApp e tiram sua operação da planilha.'; HeroWork maior com a SEV; menu Cases, Serviços, Como trabalho, Sobre e IA com next/link e pré-carregamento no hover; menu do celular em tela cheia; WhatsApp flutuante e no rodapé com a mensagem da rota; rodapé em todas as páginas; FAQ da home; /ia como oferta de revisão de app feito com IA; formulário com noscript, validação do mailto e plano B do pop-up; cartões sem foco indevido; sem a fonte Monument.

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

@@ -6,7 +6,7 @@ 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.
+ * presente sem site, ausente), a repasse das props opcionais, a ordem das cenas (sem rodapé próprio: ele vem do layout) e a ligação dos hooks.
  * As cenas e os hooks são trocados por dublês que registram o que recebem.
  */
 
@@ -14,7 +14,6 @@ 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,
@@ -44,6 +43,10 @@ jest.mock("../EngineeringWithAI", () => ({
   __esModule: true,
   default: () => <section data-testid="scene-ai" />,
 }));
+jest.mock("../HomeFaq", () => ({
+  __esModule: true,
+  default: () => <section data-testid="scene-faq" />,
+}));
 jest.mock("../Testimonials", () => ({
   __esModule: true,
   default: (props: unknown) => {
@@ -55,17 +58,6 @@ 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(),
@@ -86,27 +78,24 @@ beforeEach(() => {
 });
 
 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", () => {
+  it("path: the featured project (SEV) is in the list with its own domain -> that domain goes to the hero", () => {
     render(
       <CinematicHome
         projects={[
+          project("lavacao-047", "https://www.landing-lavacao.example.com/"),
           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",
+      text: "sevmodaintima.com.br",
       secure: true,
     });
   });
 
   it("path: the featured project is in the list but has no site -> no address", () => {
-    render(<CinematicHome projects={[project("lavacao-047", null)]} />);
+    render(<CinematicHome projects={[project("sev-modaintima", null)]} />);
 
     expect(lastHeroProps().workUrl).toBeNull();
   });
@@ -114,7 +103,19 @@ describe("CinematicHome: endereço do trabalho em destaque", () => {
   it("path: the featured project is not in the list -> no address", () => {
     render(
       <CinematicHome
-        projects={[project("sev-modaintima", "https://sevmodaintima.com.br")]}
+        projects={[project("lavacao-047", "https://lavacao.example.com")]}
+      />,
+    );
+
+    expect(lastHeroProps().workUrl).toBeNull();
+  });
+
+  it("path: the featured project only has a hosting address (vercel.app) -> no address bar text", () => {
+    render(
+      <CinematicHome
+        projects={[
+          project("sev-modaintima", "https://sev-moda-intima.vercel.app/"),
+        ]}
       />,
     );
 
@@ -154,7 +155,6 @@ describe("CinematicHome: props e estrutura", () => {
     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", () => {
@@ -168,10 +168,9 @@ describe("CinematicHome: props e estrutura", () => {
     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", () => {
+  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)", () => {
     render(<CinematicHome projects={[]} />);
 
     const main = screen.getByRole("main");
@@ -186,10 +185,12 @@ describe("CinematicHome: props e estrutura", () => {
       "scene-modalities",
       "scene-ai",
       "scene-testimonials",
+      "scene-faq",
       "scene-contact",
     ]);
-    expect(main).not.toContainElement(screen.getByTestId("footer"));
-    expect(main).not.toContainElement(screen.getByTestId("floating-whatsapp"));
+    // o rodapé é do layout: a home não desenha um (seria o segundo da página)
+    expect(screen.queryByRole("contentinfo")).toBeNull();
+    expect(document.querySelector("footer")).toBeNull();
   });
 
   it("path: mount -> the scroll hook gets the <main> ref and the layout-ready callback runs once", () => {

app/components/cinematic/CinematicHome.tsx

@@ -8,9 +8,8 @@ import About from "../About";
 import type { ClientLink } from "../ClientStrip";
 import Contact from "../Contact";
 import EngineeringWithAI from "../EngineeringWithAI";
-import FloatingWhatsApp from "../FloatingWhatsApp";
-import Footer from "../Footer";
 import Hero, { type HeroStats } from "../Hero";
+import HomeFaq from "../HomeFaq";
 import Projects from "../Projects";
 import { displayUrl } from "../showcase/BrowserFrame";
 import Testimonials from "../Testimonials";
@@ -18,8 +17,8 @@ import { WorkModalities } from "../WorkModalities";
 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";
+/** 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";
 
 export default function CinematicHome({
   projects,
@@ -36,10 +35,13 @@ export default function CinematicHome({
   /** 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({
+  const shownUrl = displayUrl({
     demoUrl: projects.find((project) => project.id === HERO_WORK_PROJECT)
       ?.demoUrl,
   });
+  // 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);
@@ -47,8 +49,8 @@ export default function CinematicHome({
   useEffect(() => onLayoutReady(), [onLayoutReady]);
 
   return (
-    <div className="flex min-h-screen flex-col overflow-x-clip">
-      {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. */}
+    <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} />
 
@@ -62,12 +64,10 @@ export default function CinematicHome({
 
         <Testimonials items={testimonials} />
 
+        <HomeFaq />
+
         <Contact />
       </main>
-      <div className="relative z-10">
-        <Footer serviceLinks={serviceLinks} />
-      </div>
-      <FloatingWhatsApp />
     </div>
   );
 }