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/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>
+  );
+}