feat: replace <img> with <Image> component and getting started screens

Co-authored-by: Copilot <copilot@github.com>

Author: LabEG

packages/reca-docs/src/next-modules.d.ts

@@ -22,6 +22,23 @@ declare module "next/link" {
     export default Link;
 }
 
+declare module "next/image" {
+    import type React from "react";
+
+    interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+        src: string;
+        width: number;
+        height: number;
+        alt: string;
+        unoptimized?: boolean;
+        priority?: boolean;
+        fill?: boolean;
+    }
+
+    const Image: React.FC<ImageProps>;
+    export default Image;
+}
+
 declare module "next/navigation" {
     export function usePathname(): string;
     export function useRouter(): {

packages/reca-docs/src/screens/architecture/overview-screen.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {type JSX} from "react";
+import Image from "next/image";
 import {DocContent} from "../../components/doc-content/doc-content.js";
 
 export const ArchitectureOverviewScreen = (): JSX.Element => (
@@ -20,10 +21,13 @@ export const ArchitectureOverviewScreen = (): JSX.Element => (
             depend on repositories.
         </p>
 
-        <img
+        <Image
             src="/images/architecture-layers.svg"
             alt="ReCA Architecture Layers: Component → Store → Service → Repository"
-            style={{width: "100%", maxWidth: 600, display: "block", margin: "24px auto"}}
+            width={720}
+            height={400}
+            style={{width: "100%", height: "auto", display: "block", margin: "24px auto"}}
+            unoptimized
         />
 
         <h2>The Four Layers</h2>
@@ -61,10 +65,13 @@ export const ArchitectureOverviewScreen = (): JSX.Element => (
             When a user interacts with the UI, the request flows through all layers and back:
         </p>
 
-        <img
+        <Image
             src="/images/request-lifecycle.svg"
             alt="Request lifecycle flowing from User through Component, Store, Service, Repository to Server and back"
-            style={{width: "100%", maxWidth: 700, display: "block", margin: "24px auto"}}
+            width={720}
+            height={220}
+            style={{width: "100%", height: "auto", display: "block", margin: "24px auto"}}
+            unoptimized
         />
 
         <ol>
@@ -95,10 +102,13 @@ export const ArchitectureOverviewScreen = (): JSX.Element => (
             diagram below shows the difference in how they trigger re-renders:
         </p>
 
-        <img
+        <Image
             src="/images/store-flow.svg"
             alt="AutoStore (automatic proxy-based) vs Store (manual emitChange) flow comparison"
-            style={{width: "100%", maxWidth: 700, display: "block", margin: "24px auto"}}
+            width={720}
+            height={320}
+            style={{width: "100%", height: "auto", display: "block", margin: "24px auto"}}
+            unoptimized
         />
 
         <h2>Store as a Modern Controller</h2>