Implement how it works page

app/components/content/ContentContainer/ContentContainer.container.tsx

@@ -6,7 +6,13 @@ import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
 
 const ContentContainerContainer = memo<ContentContainerProps>(
-  ({ post, width = "200px", size: sizeProp = "responsive" }) => {
+  ({
+    post,
+    width = "200px",
+    size: sizeProp = "responsive",
+    leadingImageSrc,
+    leadingImageAlt,
+  }) => {
     const size = sizeProp;
     // Get the corresponding icon based on the same logic as background images
     const getIconImage = (slug: string): string => {
@@ -30,7 +36,9 @@ const ContentContainerContainer = memo<ContentContainerProps>(
       return icons[finalIndex];
     };
 
-    const iconImage = getIconImage(post.slug);
+    const iconImage = leadingImageSrc ?? getIconImage(post.slug);
+    const iconAlt =
+      leadingImageAlt ?? `Icon for ${post.frontmatter.title}`;
 
     // Format date
     const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
@@ -83,6 +91,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
         width={width}
         size={size}
         iconImage={iconImage}
+        iconAlt={iconAlt}
         containerClasses={containerClasses}
         contentGapClasses={contentGapClasses}
         textGapClasses={textGapClasses}

app/components/content/ContentContainer/ContentContainer.types.ts

@@ -9,6 +9,10 @@ export interface ContentContainerProps {
    * Content container size.
    */
   size?: ContentContainerSizeValue;
+  /** When set, replaces the default slug-based thumbnail icon. */
+  leadingImageSrc?: string;
+  /** Alt text for `leadingImageSrc`; defaults to post title. */
+  leadingImageAlt?: string;
 }
 
 export interface ContentContainerViewProps {
@@ -16,6 +20,7 @@ export interface ContentContainerViewProps {
   width: string;
   size: "xs" | "responsive";
   iconImage: string;
+  iconAlt: string;
   containerClasses: string;
   contentGapClasses: string;
   textGapClasses: string;

app/components/content/ContentContainer/ContentContainer.view.tsx

@@ -6,6 +6,7 @@ function ContentContainerView({
   width,
   size,
   iconImage,
+  iconAlt,
   containerClasses,
   contentGapClasses,
   textGapClasses,
@@ -27,7 +28,7 @@ function ContentContainerView({
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={iconImage}
-            alt={`Icon for ${post.frontmatter.title}`}
+            alt={iconAlt}
             className="w-[60px] h-[30px] object-contain"
           />
         </div>