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/story/NotebookFallback.tsx

@@ -7,6 +7,7 @@ import type { NotebookProject } from "./notebookProjects";
 export type NotebookFallbackProps = {
   projects: NotebookProject[];
   initialIndex?: number;
+  onSelectTab?: (index: number) => void;
 };
 
 function clampIndex(index: number, length: number): number {
@@ -17,6 +18,7 @@ function clampIndex(index: number, length: number): number {
 export default function NotebookFallback({
   projects,
   initialIndex = 0,
+  onSelectTab,
 }: NotebookFallbackProps) {
   const [activeIndex, setActiveIndex] = useState(() =>
     clampIndex(initialIndex, projects.length),
@@ -39,7 +41,10 @@ export default function NotebookFallback({
           cursorX: 0,
           cursorY: 0,
         }}
-        onSelectTab={setActiveIndex}
+        onSelectTab={(index) => {
+          setActiveIndex(index);
+          onSelectTab?.(index);
+        }}
         projects={projects}
       />
     </div>