Update NumberCard component

app/components/NumberCard.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { memo } from "react";
+import SectionNumber from "./SectionNumber";
+
+interface NumberCardProps {
+  number: number;
+  text: string;
+  size?: "Small" | "Medium" | "Large" | "XLarge";
+  iconShape?: string;
+  iconColor?: string;
+}
+
+const NumberCard = memo<NumberCardProps>(({ number, text, size }) => {
+  // Base classes common to all sizes
+  const baseClasses = "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
+
+  // If size prop is provided, use explicit size classes
+  // Otherwise, use responsive breakpoints for backward compatibility
+  if (size) {
+    // Size-specific classes
+    const sizeClasses = {
+      Small: "flex flex-col items-end justify-center gap-4 p-5 relative",
+      Medium: "flex flex-row items-center gap-8 p-8 relative",
+      Large: "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
+      XLarge: "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
+    };
+
+    // Text size classes
+    const textClasses = {
+      Small: "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
+      Medium: "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+      Large: "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
+      XLarge: "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
+    };
+
+    // Section number positioning classes
+    const sectionNumberClasses = {
+      Small: "flex justify-end items-end",
+      Medium: "flex justify-start flex-shrink-0",
+      Large: "absolute top-8 right-8",
+      XLarge: "absolute top-8 right-8",
+    };
+
+    // Content container classes
+    const contentClasses = {
+      Small: "",
+      Medium: "flex-1",
+      Large: "absolute bottom-8 left-8 right-16",
+      XLarge: "absolute bottom-8 left-8 right-16",
+    };
+
+    return (
+      <div className={`${baseClasses} ${sizeClasses[size]}`}>
+        {/* Section Number */}
+        <div className={sectionNumberClasses[size]}>
+          <SectionNumber number={number} />
+        </div>
+
+        {/* Card Content */}
+        <div className={contentClasses[size]}>
+          <p className={textClasses[size]}>
+            {text}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Responsive breakpoints for backward compatibility (matches original behavior)
+  // Maps to: Small (mobile) -> Medium (sm) -> Large (lg) -> XLarge (xl)
+  return (
+    <div className={`${baseClasses} flex flex-col gap-4 p-5 sm:flex-row sm:gap-8 sm:p-8 sm:items-center lg:flex-col lg:gap-[22px] lg:items-start lg:justify-end lg:p-8 lg:relative lg:h-[238px]`}>
+      {/* Section Number - Responsive positioning */}
+      <div className="flex justify-end items-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
+        <SectionNumber number={number} />
+      </div>
+
+      {/* Card Content - Responsive positioning */}
+      <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
+        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
+          {text}
+        </p>
+      </div>
+    </div>
+  );
+});
+
+NumberCard.displayName = "NumberCard";
+
+export default NumberCard;

app/components/NumberedCard.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import SectionNumber from "./SectionNumber";
-
-interface NumberedCardProps {
-  number: number;
-  text: string;
-  iconShape?: string;
-  iconColor?: string;
-}
-
-const NumberedCard = memo<NumberedCardProps>(({ number, text }) => {
-  return (
-    <div className="bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]">
-      {/* Section Number - Top right (lg breakpoint) */}
-      <div className="flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
-        <SectionNumber number={number} />
-      </div>
-
-      {/* Card Content - Bottom left (lg breakpoint) */}
-      <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
-        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
-          {text}
-        </p>
-      </div>
-    </div>
-  );
-});
-
-NumberedCard.displayName = "NumberedCard";
-
-export default NumberedCard;

app/components/NumberedCards/NumberedCards.view.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslation } from "../../contexts/MessagesContext";
 import SectionHeader from "../SectionHeader";
-import NumberedCard from "../NumberedCard";
+import NumberCard from "../NumberCard";
 import Button from "../Button";
 import type { NumberedCardsViewProps } from "./NumberedCards.types";
 
@@ -35,7 +35,7 @@ function NumberedCardsView({
             {/* Cards Container */}
             <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
               {cards.map((card, index) => (
-                <NumberedCard
+                <NumberCard
                   key={index}
                   number={index + 1}
                   text={card.text}