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.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>
   );
 }