Implement how it works page

app/components/sections/RelatedArticles/RelatedArticles.container.tsx

@@ -12,6 +12,8 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
     currentPostSlug,
     slugOrder = [],
     variant = "default",
+    headingSurface = "onDark",
+    heading,
   }) => {
     const messages = useMessages();
     // Memoize filtered posts to prevent unnecessary re-computations
@@ -116,6 +118,8 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
         getProgressStyle={getProgressStyle}
         onMouseDown={handleMouseDown}
         variant={variant}
+        headingSurface={headingSurface}
+        heading={heading}
         useCasesHeadingLines={useCasesHeadingLines}
       />
     );

app/components/sections/RelatedArticles/RelatedArticles.types.ts

@@ -2,6 +2,9 @@ import type { BlogPost } from "../../../../lib/content";
 
 export type RelatedArticlesVariant = "default" | "useCases";
 
+/** Heading contrast when the section sits on a dark vs light page background. */
+export type RelatedArticlesHeadingSurface = "onDark" | "onLight";
+
 export interface RelatedArticlesProps {
   relatedPosts: BlogPost[];
   currentPostSlug: string;
@@ -12,6 +15,10 @@ export interface RelatedArticlesProps {
    * **`lg`** [**20711-14231**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20711-14231&m=dev) (shell + card row gutter / padding).
    */
   variant?: RelatedArticlesVariant;
+  /** Default `onDark` (blog). Use `onLight` on transparent / light marketing pages. */
+  headingSurface?: RelatedArticlesHeadingSurface;
+  /** Overrides the default “Related Articles” heading. */
+  heading?: string;
 }
 
 export interface RelatedArticlesViewProps {
@@ -22,6 +29,8 @@ export interface RelatedArticlesViewProps {
   getProgressStyle: (_index: number) => React.CSSProperties;
   onMouseDown?: (_e: React.MouseEvent<HTMLDivElement>) => void;
   variant?: RelatedArticlesVariant;
+  headingSurface?: RelatedArticlesHeadingSurface;
+  heading?: string;
   /** Stacked title lines (`pages.useCases.relatedArticles.title`) when `variant="useCases"`. */
   useCasesHeadingLines?: readonly string[];
 }

app/components/sections/RelatedArticles/RelatedArticles.view.tsx

@@ -9,6 +9,8 @@ export function RelatedArticlesView({
   getProgressStyle,
   onMouseDown,
   variant = "default",
+  headingSurface = "onDark",
+  heading = "Related Articles",
   useCasesHeadingLines,
 }: RelatedArticlesViewProps) {
   if (filteredPosts.length === 0) {
@@ -49,8 +51,14 @@ export function RelatedArticlesView({
             </span>
           </h2>
         ) : (
-          <h2 className="text-center text-[32px] font-medium leading-[110%] text-[var(--color-content-inverse-primary)] lg:text-[44px]">
-            Related Articles
+          <h2
+            className={`text-center text-[32px] font-medium leading-[110%] lg:text-[44px] ${
+              headingSurface === "onLight"
+                ? "text-[var(--color-content-default-primary)]"
+                : "text-[var(--color-content-inverse-primary)]"
+            }`}
+          >
+            {heading}
           </h2>
         )}