Implement use cases page

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

@@ -8,25 +8,66 @@ export function RelatedArticlesView({
   transformStyle,
   getProgressStyle,
   onMouseDown,
+  variant = "default",
+  useCasesHeadingLines,
 }: RelatedArticlesViewProps) {
   if (filteredPosts.length === 0) {
     return null;
   }
 
+  const isUseCases = variant === "useCases";
+
   return (
     <section
-      className="py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
+      className={
+        isUseCases
+          ? "px-[var(--spacing-scale-020)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-120)] lg:py-[var(--spacing-scale-064)]"
+          : "py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
+      }
       data-testid="related-articles"
+      {...(isUseCases ? { "data-figma-node": "20711-14231" } : {})}
     >
-      <div className="flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]">
-        <h2 className="text-[32px] lg:text-[44px] leading-[110%] font-medium text-[var(--color-content-inverse-primary)] text-center">
-          Related Articles
-        </h2>
+      <div
+        className={
+          isUseCases
+            ? "mx-auto flex w-full max-w-[1440px] flex-col items-center gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-032)]"
+            : "flex flex-col gap-[var(--spacing-scale-032)] lg:gap-[51px]"
+        }
+      >
+        {isUseCases && useCasesHeadingLines?.length ? (
+          <h2 className="mx-auto w-full min-w-0 max-w-[693px] text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-[40px] lg:text-[40px] lg:leading-[52px]">
+            {/* Baseline 22112-872308: stacked lines; md+ single line; lg 20711-14231: 40/52, max 693px */}
+            <span className="flex flex-col md:hidden">
+              {useCasesHeadingLines.map((line, index) => (
+                <span key={`${index}-${line}`} className="block">
+                  {line}
+                </span>
+              ))}
+            </span>
+            <span className="hidden md:block">
+              {useCasesHeadingLines.join(" ")}
+            </span>
+          </h2>
+        ) : (
+          <h2 className="text-center text-[32px] font-medium leading-[110%] text-[var(--color-content-inverse-primary)] lg:text-[44px]">
+            Related Articles
+          </h2>
+        )}
 
         {/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
-        <div className="flex justify-center overflow-hidden">
+        <div
+          className={
+            isUseCases
+              ? "flex w-full max-w-[1440px] justify-center overflow-hidden"
+              : "flex justify-center overflow-hidden"
+          }
+        >
           <div
             className={`flex gap-0 transition-transform duration-500 ease-in-out ${
+              isUseCases
+                ? "lg:gap-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)]"
+                : ""
+            } ${
               !isMobile
                 ? "overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing"
                 : ""