Learn page svgs updated

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 /**
- * Figma: "Components" / ContentThumnailTemplate (19614-14838, 19041-13415).
- * Vertical 260×390 (19060-15787); horizontal 320×225.5 (19041-13550).
+ * Figma: "Components" / Thumbnail (19428:22574).
+ * Vertical 260×390; horizontal 320×225.5; per-article backgrounds in public/content/blog/.
  */
 import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import {
+  contentBlogHorizontalPath,
+  contentBlogVerticalPath,
+  contentCatalogSlugForFallback,
+  CONTENT_CATALOG_SLUG_ORDER,
+} from "../../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
 
@@ -23,7 +28,6 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
       post: ContentThumbnailTemplateProps["post"],
       variant: "vertical" | "horizontal",
     ): string => {
-      // Check if post has thumbnail images defined in frontmatter
       if (post.frontmatter?.thumbnail) {
         const imageName =
           variant === "vertical"
@@ -31,18 +35,21 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
             : post.frontmatter.thumbnail.horizontal;
 
         if (imageName) {
-          // Return path to image in public/content/blog directory
           return `/content/blog/${imageName}`;
         }
       }
 
-      // Fallback to default images if no thumbnail specified
-      const fallbackImages: Record<string, string> = {
-        vertical: getAssetPath(ASSETS.VERTICAL_1),
-        horizontal: getAssetPath(ASSETS.HORIZONTAL_1),
-      };
+      const slug = post.slug;
+      const resolvedSlug =
+        CONTENT_CATALOG_SLUG_ORDER.indexOf(
+          slug as (typeof CONTENT_CATALOG_SLUG_ORDER)[number],
+        ) >= 0
+          ? slug
+          : contentCatalogSlugForFallback(slug);
 
-      return fallbackImages[variant] || fallbackImages.vertical;
+      return variant === "vertical"
+        ? contentBlogVerticalPath(resolvedSlug)
+        : contentBlogHorizontalPath(resolvedSlug);
     };
 
     const backgroundImage = getBackgroundImage(post, variant);