Create use cases pages

app/components/sections/ContentBanner/ContentBanner.container.tsx

@@ -13,6 +13,8 @@ const ContentBannerContainer = memo<ContentBannerProps>(
     variant: variantProp = "article",
     leadingImageSrc,
     leadingImageAlt,
+    rulePreview,
+    contentTone,
   }) => {
     const variant = variantProp;
 
@@ -46,6 +48,8 @@ const ContentBannerContainer = memo<ContentBannerProps>(
         leadingImageAlt={leadingImageAlt}
         backgroundImageSm={backgroundImageSm}
         backgroundImageMd={backgroundImageMd}
+        rulePreview={rulePreview}
+        contentTone={contentTone}
       />
     );
   },

app/components/sections/ContentBanner/ContentBanner.types.ts

@@ -1,17 +1,31 @@
 import type { BlogPost } from "../../../../lib/content";
+import type { ContentContainerToneValue } from "../../content/ContentContainer/ContentContainer.types";
 
-export type ContentBannerVariant = "article" | "guide";
+export type ContentBannerVariant = "article" | "guide" | "useCase";
+
+/** Rule column for `useCase` variant (Figma 22015:42621). */
+export interface ContentBannerRulePreview {
+  title: string;
+  description: string;
+  backgroundColor: string;
+  iconPath: string;
+}
 
 export interface ContentBannerProps {
   post: BlogPost;
   /**
    * `article` — blog post hero with thumbnail/banner imagery and metadata.
    * `guide` — static guide pages (Figma ContentBanner on content page template).
+   * `useCase` — use case detail: ContentContainer + Rule preview.
    */
   variant?: ContentBannerVariant;
-  /** Article variant only: replaces slug-based thumbnail icon in ContentContainer. */
+  /** Article / useCase: replaces slug-based thumbnail icon in ContentContainer. */
   leadingImageSrc?: string;
   leadingImageAlt?: string;
+  /** `useCase` only: expanded Rule preview in the right column. */
+  rulePreview?: ContentBannerRulePreview;
+  /** `useCase` only: ContentContainer text tokens (default `onLight`). */
+  contentTone?: ContentContainerToneValue;
 }
 
 export interface ContentBannerViewProps {
@@ -21,4 +35,6 @@ export interface ContentBannerViewProps {
   leadingImageAlt?: string;
   backgroundImageSm?: string;
   backgroundImageMd?: string;
+  rulePreview?: ContentBannerRulePreview;
+  contentTone?: ContentContainerToneValue;
 }

app/components/sections/ContentBanner/ContentBanner.view.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import Image from "next/image";
 import { memo } from "react";
 import ContentContainer from "../../content/ContentContainer";
+import Rule from "../../cards/Rule";
 import {
   getAssetPath,
   guideBannerLogoArrowPath,
@@ -115,11 +117,91 @@ function ContentBannerArticleView({
   );
 }
 
+/**
+ * Figma: use case detail ContentBanner (22015:42621) — copy left, Rule preview right.
+ */
+function ContentBannerUseCaseView({
+  post,
+  rulePreview,
+}: Pick<ContentBannerViewProps, "post" | "rulePreview">) {
+  if (!rulePreview) {
+    return null;
+  }
+
+  const { title, description, author, date } = post.frontmatter;
+  const formattedDate = new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+  });
+
+  return (
+    <section
+      className="relative w-full overflow-clip"
+      aria-label={title}
+    >
+      <div
+        data-figma-node="22015:42621"
+        className="mx-auto flex w-full max-w-[1024px] flex-col items-center gap-[var(--space-800)] px-[var(--space-1200)] py-[var(--space-1000)] md:flex-row md:items-center"
+      >
+        <div
+          data-node-id="19189:9171"
+          className="flex w-full max-w-[365px] shrink-0 flex-col gap-[var(--spacing-scale-024)]"
+        >
+          <div className="flex w-full flex-col gap-[var(--measures-spacing-016)]">
+            <div className="flex w-full flex-col gap-[var(--measures-spacing-004)] text-[var(--color-content-inverse-brand-royal)]">
+              <h1 className="w-full font-bricolage font-medium text-[32px] leading-[110%] sm:text-[40px] lg:text-[44px]">
+                {title}
+              </h1>
+              {description ? (
+                <p className="w-full font-inter font-normal text-[16px] leading-[130%] sm:text-[18px]">
+                  {description}
+                </p>
+              ) : null}
+            </div>
+          </div>
+          <div className="flex w-full items-end gap-[var(--measures-spacing-008)] font-inter text-[14px] leading-[20px] text-[var(--color-content-inverse-brand-royal)]">
+            <span>{author}</span>
+            <span>{formattedDate}</span>
+          </div>
+        </div>
+
+        <div className="flex min-w-0 w-full flex-1">
+          <Rule
+            title={rulePreview.title}
+            description={rulePreview.description}
+            expanded
+            fluidWidth
+            size="L"
+            templateGridFigmaShell
+            backgroundColor={rulePreview.backgroundColor}
+            className="pointer-events-none w-full select-none rounded-[24px]"
+            icon={
+              <Image
+                src={getAssetPath(rulePreview.iconPath)}
+                alt=""
+                width={103}
+                height={103}
+                draggable={false}
+                unoptimized={rulePreview.iconPath.endsWith(".svg")}
+                className="aspect-square size-full max-h-[103px] max-w-[103px] object-contain mix-blend-luminosity"
+              />
+            }
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function ContentBannerView(props: ContentBannerViewProps) {
   if (props.variant === "guide") {
     return <ContentBannerGuideView post={props.post} />;
   }
 
+  if (props.variant === "useCase") {
+    return <ContentBannerUseCaseView {...props} />;
+  }
+
   return <ContentBannerArticleView {...props} />;
 }