refactor: substituir celular e filmstrip por notebook

app/components/cinematic/CinematicHome.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import CinematicHome from "./CinematicHome";
+
+jest.mock("next/dynamic", () => {
+  const labels = [
+    "About",
+    "Skills",
+    "Experience",
+    "WorkModalities",
+    "Contact",
+    "LighthouseMetrics",
+    "Footer",
+    "ScrollVelocityText",
+    "SectionDivider",
+  ];
+  let index = 0;
+
+  return () => {
+    const label = labels[index++] ?? "DynamicSection";
+    return function DynamicMock() {
+      return <div data-testid={`dynamic-${label}`}>{label}</div>;
+    };
+  };
+});
+
+jest.mock("../Hero", () => () => <div data-testid="hero" />);
+jest.mock("../Projects", () => () => <div data-testid="projects" />);
+jest.mock("../story/ReelDirector", () => () => (
+  <div data-testid="reel-director" />
+));
+jest.mock("../story/NotebookStory", () => () => (
+  <section data-testid="notebook-story" />
+));
+jest.mock(
+  "./CinematicSection",
+  () =>
+    ({ children }: { children: ReactNode }) => <>{children}</>,
+);
+
+describe("CinematicHome", () => {
+  it("uses one notebook story and keeps About after it", () => {
+    render(
+      <CinematicHome experiences={[]} projects={[]} skillCategories={[]} />,
+    );
+
+    const story = screen.getByTestId("notebook-story");
+    const about = screen.getByTestId("dynamic-About");
+
+    expect(story).toBeInTheDocument();
+    expect(screen.queryByTestId("print-reel")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("scroll-story")).not.toBeInTheDocument();
+    expect(
+      Boolean(
+        story.compareDocumentPosition(about) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ),
+    ).toBe(true);
+  });
+});

app/components/cinematic/CinematicHome.tsx

@@ -9,9 +9,8 @@ import type {
 import Hero from "../Hero";
 import Projects from "../Projects";
 import { SectionLoading } from "../SectionLoading";
-import ScrollStory from "../story/ScrollStory";
+import NotebookStory from "../story/NotebookStory";
 import ReelDirector from "../story/ReelDirector";
-import PrintReel from "../story/PrintReel";
 import CinematicSection from "./CinematicSection";
 
 const About = dynamic(() => import("../About"), {
@@ -62,18 +61,7 @@ export default function CinematicHome({
           <ScrollVelocityText text="SOFTWARE ENGINEERING" baseVelocity={-1.5} />
         </div>
 
-        {/* Reel scrollytelling: timeline scrubbed pelo scroll (estilo product-page) */}
-        <ScrollStory
-          projectsCount={projects.length}
-          experiencesCount={experiences.length}
-          skillsCount={skillCategories.reduce(
-            (acc, cat) => acc + cat.skills.length,
-            0,
-          )}
-        />
-
-        {/* Palco 2: filmstrip horizontal pinado com prints reais dos deployments */}
-        <PrintReel />
+        <NotebookStory projects={projects} />
 
         <CinematicSection effect="parallax-depth">
           <About />