Fix homepage images broken by ideal-image plugin

The @docusaurus/plugin-ideal-image webpack loader transforms image
imports into objects instead of plain URL strings. LazyImage now
resolves these objects back to URLs so CardWithImage displays correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ppekrol

src/components/Common/LazyImage.tsx

@@ -7,6 +7,18 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
     minContentHeight?: number;
 }
 
+// @docusaurus/plugin-ideal-image transforms image imports into objects like
+// { src: { src: "/img/file.hash.png" } } instead of plain URL strings.
+// Extract the URL string from such objects.
+function toUrl(value: unknown): string | undefined {
+    if (typeof value === "string") return value;
+    if (!value || typeof value !== "object") return undefined;
+    const { src } = value as Record<string, unknown>;
+    if (typeof src === "string") return src;
+    if (src && typeof src === "object") return (src as Record<string, unknown>).src as string;
+    return undefined;
+}
+
 export default function LazyImage({
     imgSrc,
     src,
@@ -53,17 +65,16 @@ export default function LazyImage({
 
 function getSources({ imgSrc, src }: Pick<LazyImageProps, "imgSrc" | "src">): ThemedImageProps["sources"] {
     if (src) {
-        return {
-            light: src,
-            dark: src,
-        };
+        return { light: src, dark: src };
+    }
+
+    if (imgSrc && typeof imgSrc === "object" && "light" in imgSrc && "dark" in imgSrc) {
+        return imgSrc;
     }
 
-    if (typeof imgSrc === "string") {
-        return {
-            light: imgSrc,
-            dark: imgSrc,
-        };
+    const resolved = toUrl(imgSrc);
+    if (resolved) {
+        return { light: resolved, dark: resolved };
     }
 
     return imgSrc;