Update learn page

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

@@ -1,7 +1,16 @@
 "use client";
 
+/**
+ * Figma: "Components" / Container (19614-14838, 19003-23432).
+ * XS thumbnail copy: title 18/22, description 12/16, metadata 10/14.
+ */
 import { memo } from "react";
-import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import {
+  getAssetPath,
+  ASSETS,
+  contentBlogTagPath,
+  CONTENT_CATALOG_SLUG_ORDER,
+} from "../../../../lib/assetUtils";
 import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
 
@@ -25,7 +34,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
     const bodyColor = onLight
       ? "text-[var(--color-content-default-secondary)]"
       : "text-[var(--color-content-inverse-brand-royal)]";
-    // Get the corresponding icon based on the same logic as background images
+
     const getIconImage = (slug: string): string => {
       const icons = [
         getAssetPath(ASSETS.ICON_1),
@@ -35,23 +44,24 @@ const ContentContainerContainer = memo<ContentContainerProps>(
 
       if (!slug) return icons[0];
 
-      // Use the same cycling logic as background images to ensure matching
-      const slugOrder = [
-        "building-community-trust",
-        "operational-security-mutual-aid",
-        "making-decisions-without-hierarchy",
-        "resolving-active-conflicts",
-      ];
-      const index = slugOrder.indexOf(slug);
-      const finalIndex = index >= 0 ? index % icons.length : 0;
-      return icons[finalIndex];
+      const index = CONTENT_CATALOG_SLUG_ORDER.indexOf(
+        slug as (typeof CONTENT_CATALOG_SLUG_ORDER)[number],
+      );
+      if (index >= 0) {
+        return contentBlogTagPath(slug);
+      }
+
+      const fallbackIndex =
+        Math.abs(
+          slug.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0),
+        ) % icons.length;
+      return icons[fallbackIndex];
     };
 
     const iconImage = leadingImageSrc ?? getIconImage(post.slug);
     const iconAlt =
       leadingImageAlt ?? `Icon for ${post.frontmatter.title}`;
 
-    // Format date
     const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
       "en-US",
       {
@@ -60,10 +70,9 @@ const ContentContainerContainer = memo<ContentContainerProps>(
       },
     );
 
-    // Choose styling based on size prop
     const containerClasses =
       size === "xs"
-        ? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
+        ? "relative z-20 flex h-full flex-col gap-[var(--measures-spacing-012)]"
         : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
 
     const contentGapClasses =
@@ -78,7 +87,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
 
     const titleClasses =
       size === "xs"
-        ? `font-bricolage font-medium text-[18px] leading-[120%] transition-colors ${titleColor}`
+        ? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
         : `font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] transition-colors ${titleColor}`;
 
     const descriptionClasses =
@@ -88,12 +97,12 @@ const ContentContainerContainer = memo<ContentContainerProps>(
 
     const authorClasses =
       size === "xs"
-        ? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
+        ? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
         : `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
 
     const dateClasses =
       size === "xs"
-        ? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
+        ? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
         : `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
 
     return (

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

@@ -20,7 +20,7 @@ function ContentContainerView({
   return (
     <div
       className={containerClasses}
-      style={size === "responsive" ? {} : { width }}
+      style={size === "responsive" || size === "xs" ? {} : { width }}
     >
       {/* Content Container - gap between icon and text */}
       <div className={contentGapClasses}>
@@ -45,8 +45,7 @@ function ContentContainerView({
         </div>
       </div>
 
-      {/* Metadata Container - horizontal with 8px gap */}
-      <div className="flex items-center gap-[var(--measures-spacing-008)]">
+      <div className="flex min-w-0 items-end gap-[var(--measures-spacing-008)]">
         {/* Author Name */}
         <span className={authorClasses}>{post.frontmatter.author}</span>
 

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

@@ -1,13 +1,23 @@
 "use client";
 
+/**
+ * Figma: "Components" / ContentThumnailTemplate (19614-14838, 19041-13415).
+ * Vertical 260×390 (19060-15787); horizontal 320×225.5 (19041-13550).
+ */
 import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
 
 const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
-  ({ post, className = "", variant: variantProp = "vertical" }) => {
+  ({
+    post,
+    className = "",
+    variant: variantProp = "vertical",
+    sizing: sizingProp = "fluid",
+  }) => {
     const variant = variantProp;
+    const sizing = sizingProp;
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: ContentThumbnailTemplateProps["post"],
@@ -42,6 +52,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
         post={post}
         className={className}
         variant={variant}
+        sizing={sizing}
         backgroundImage={backgroundImage}
       />
     );

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts

@@ -2,6 +2,8 @@ import type { BlogPost } from "../../../../lib/content";
 
 export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal";
 
+export type ContentThumbnailTemplateSizingValue = "fluid" | "fixed";
+
 export interface ContentThumbnailTemplateProps {
   post: BlogPost;
   className?: string;
@@ -9,6 +11,10 @@ export interface ContentThumbnailTemplateProps {
    * Content thumbnail variant.
    */
   variant?: ContentThumbnailTemplateVariantValue;
+  /**
+   * fluid — fill parent (Learn grid). fixed — Figma px dimensions (Related Articles).
+   */
+  sizing?: ContentThumbnailTemplateSizingValue;
   slugOrder?: string[];
 }
 
@@ -16,5 +22,6 @@ export interface ContentThumbnailTemplateViewProps {
   post: BlogPost;
   className: string;
   variant: "vertical" | "horizontal";
+  sizing: ContentThumbnailTemplateSizingValue;
   backgroundImage: string;
 }

app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx

@@ -7,55 +7,95 @@ function ContentThumbnailTemplateView({
   post,
   className,
   variant,
+  sizing,
   backgroundImage,
 }: ContentThumbnailTemplateViewProps) {
   if (variant === "vertical") {
+    if (sizing === "fixed") {
+      return (
+        <Link
+          href={`/blog/${post.slug}`}
+          className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+        >
+          <div className="relative h-[390px] w-[260px] overflow-hidden">
+            <div className="absolute inset-0 z-0">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={backgroundImage}
+                alt=""
+                className="pointer-events-none size-full object-cover"
+              />
+            </div>
+            <div className="absolute left-[18px] top-[18px] z-20 w-[200px]">
+              <ContentContainer post={post} width="200px" size="xs" />
+            </div>
+          </div>
+        </Link>
+      );
+    }
+
     return (
       <Link
         href={`/blog/${post.slug}`}
-        className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+        className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
       >
-        <div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
-          {/* Background SVG - fills container with maintained aspect */}
+        <div className="relative aspect-[260/390] w-full overflow-hidden">
           <div className="absolute inset-0 z-0">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={backgroundImage}
-              alt={`Background for ${post.frontmatter.title}`}
-              className="w-full h-full object-cover"
+              alt=""
+              className="pointer-events-none size-full object-cover"
             />
-            {/* Gradient overlay for better text readability */}
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
           </div>
-
-          {/* Content Section - positioned within the padding constraints */}
-          <ContentContainer post={post} width="200px" size="xs" />
+          <div className="absolute left-[6.923%] top-[4.615%] z-20 w-[76.923%]">
+            <ContentContainer post={post} size="xs" />
+          </div>
+        </div>
+      </Link>
+    );
+  }
+
+  if (sizing === "fixed") {
+    return (
+      <Link
+        href={`/blog/${post.slug}`}
+        className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+      >
+        <div className="relative h-[225.5px] w-[320px] overflow-hidden">
+          <div className="absolute inset-0 z-0">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={backgroundImage}
+              alt=""
+              className="pointer-events-none size-full object-cover"
+            />
+          </div>
+          <div className="absolute left-[14px] top-[13.75px] z-20 w-[230px]">
+            <ContentContainer post={post} width="230px" size="xs" />
+          </div>
         </div>
       </Link>
     );
   }
 
-  // Horizontal variant
   return (
     <Link
       href={`/blog/${post.slug}`}
-      className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+      className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
     >
-      <div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
-        {/* Background SVG - sized to fit the 320x225.5 container exactly */}
+      <div className="relative aspect-[320/225.5] w-full overflow-hidden">
         <div className="absolute inset-0 z-0">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={backgroundImage}
-            alt={`Background for ${post.frontmatter.title}`}
-            className="w-full h-[225.5px] object-cover"
+            alt=""
+            className="pointer-events-none size-full object-cover"
           />
-          {/* Gradient overlay */}
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
         </div>
-
-        {/* Content - positioned within the padding constraints */}
-        <ContentContainer post={post} width="230px" size="xs" />
+        <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%]">
+          <ContentContainer post={post} size="xs" />
+        </div>
       </div>
     </Link>
   );