feat(hero): camadas reconheciveis (tela, integracoes, tabela de dados), etiquetas e legendas do mergulho

A cena passa de discos abstratos para formas que um leigo reconhece. A camera
enquadra cada camada enquanto a legenda em linguagem simples explica o que e,
e so entao atravessa para a proxima.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/components/cinematic/HeroField.tsx

@@ -4,6 +4,13 @@ import dynamic from "next/dynamic";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { HeroFieldSceneProps } from "./HeroFieldScene";
 
+/** Etiquetas presas às camadas da cena (a cena calcula a posição de cada uma a cada quadro). */
+const TAGS = [
+  ["A tela", "o que sua equipe e seus clientes usam"],
+  ["As integrações", "seus sistemas conversando entre si"],
+  ["Os dados", "suas informações organizadas"],
+] as const;
+
 const Scene = dynamic<HeroFieldSceneProps>(() => import("./HeroFieldScene"), {
   ssr: false,
 });
@@ -26,6 +33,7 @@ function supportsWebGL2() {
 export default function HeroField() {
   const rootRef = useRef<HTMLDivElement>(null);
   const progressRef = useRef(0);
+  const labelsRef = useRef<(HTMLElement | null)[]>([]);
   const [mount, setMount] = useState(false);
   const [visible, setVisible] = useState(false);
   const [ready, setReady] = useState(false);
@@ -95,11 +103,26 @@ export default function HeroField() {
       {mount && !failed && (
         <Scene
           progressRef={progressRef}
+          labelsRef={labelsRef}
           visible={visible && !done}
           onReady={handleReady}
           onError={handleError}
         />
       )}
+      {mount &&
+        !failed &&
+        TAGS.map(([title, text], index) => (
+          <span
+            key={title}
+            ref={(element) => {
+              labelsRef.current[index] = element;
+            }}
+            className="hero-tag"
+          >
+            <span className="hero-tag-title">{title}</span>
+            {text}
+          </span>
+        ))}
     </div>
   );
 }