feat: refine portfolio showcase, services and quality lab

Align the notebook browser with the physical LCD, refresh real project captures and navigation, simplify service content, and stabilize hero hydration.

app/components/cinematic/CinematicHome.tsx

@@ -1,43 +1,23 @@
 "use client";
 
-import dynamic from "next/dynamic";
 import type {
   PortfolioExperience,
   PortfolioProjectView,
   PortfolioSkillCategory,
 } from "@/lib/portfolio-data";
+import About from "../About";
+import Contact from "../Contact";
+import Experience from "../Experience";
+import Footer from "../Footer";
 import Hero from "../Hero";
+import LighthouseMetrics from "../LighthouseMetrics";
 import Projects from "../Projects";
-import { SectionLoading } from "../SectionLoading";
+import Skills from "../Skills";
 import NotebookStory from "../story/NotebookStory";
-
-const About = dynamic(() => import("../About"), {
-  loading: () => <SectionLoading message="Carregando..." />,
-});
-const Skills = dynamic(() => import("../Skills"), {
-  loading: () => <SectionLoading message="Carregando..." />,
-});
-const Experience = dynamic(() => import("../Experience"), {
-  loading: () => <SectionLoading message="Carregando..." />,
-});
-const WorkModalities = dynamic(
-  () => import("../WorkModalities").then((mod) => mod.WorkModalities),
-  { loading: () => <SectionLoading message="Carregando..." /> },
-);
-const Contact = dynamic(() => import("../Contact"), {
-  loading: () => <SectionLoading message="Carregando..." />,
-});
-const LighthouseMetrics = dynamic(() => import("../LighthouseMetrics"), {
-  loading: () => <SectionLoading message="Carregando..." />,
-});
-const Footer = dynamic(() => import("../Footer"));
-
-const ScrollVelocityText = dynamic(() => import("./ScrollVelocityText"), {
-  ssr: false,
-});
-const SectionDivider = dynamic(() => import("./SectionDivider"), {
-  ssr: false,
-});
+import { WorkModalities } from "../WorkModalities";
+import ScrollVelocityText from "./ScrollVelocityText";
+import SectionDivider from "./SectionDivider";
+import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
 
 export default function CinematicHome({
   projects,
@@ -48,6 +28,8 @@ export default function CinematicHome({
   experiences: PortfolioExperience[];
   skillCategories: PortfolioSkillCategory[];
 }) {
+  const onLayoutReady = useHomeFragmentNavigation();
+
   return (
     <div className="flex min-h-screen flex-col overflow-x-clip">
       <main className="ds-main">
@@ -58,7 +40,7 @@ export default function CinematicHome({
           <ScrollVelocityText text="SOFTWARE ENGINEERING" direction="left" />
         </div>
 
-        <NotebookStory projects={projects} />
+        <NotebookStory projects={projects} onLayoutReady={onLayoutReady} />
 
         <About />