Align props with figma

app/components/ContentLockup/ContentLockup.container.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import ContentLockupView from "./ContentLockup.view";
 import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";
+import { normalizeContentLockupVariant, normalizeAlignment } from "../../../lib/propNormalization";
 
 const ContentLockupContainer = memo<ContentLockupProps>(
   ({
@@ -11,12 +12,15 @@ const ContentLockupContainer = memo<ContentLockupProps>(
     description,
     ctaText,
     buttonClassName = "",
-    variant = "hero",
+    variant: variantProp = "hero",
     linkText,
     linkHref,
-    alignment = "center",
+    alignment: alignmentProp = "center",
     titleId,
   }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const variant = normalizeContentLockupVariant(variantProp);
+    const alignment = normalizeAlignment(alignmentProp);
     // Variant-specific styling
     const variantStyles: Record<string, VariantStyle> = {
       hero: {

app/components/ContentLockup/ContentLockup.types.ts

@@ -1,3 +1,19 @@
+export type ContentLockupVariantValue =
+  | "hero"
+  | "feature"
+  | "learn"
+  | "ask"
+  | "ask-inverse"
+  | "modal"
+  | "Hero"
+  | "Feature"
+  | "Learn"
+  | "Ask"
+  | "Ask-Inverse"
+  | "Modal";
+
+export type ContentLockupAlignmentValue = "center" | "left" | "Center" | "Left";
+
 export interface ContentLockupProps {
   title?: string;
   subtitle?: string;
@@ -5,10 +21,18 @@ export interface ContentLockupProps {
   ctaText?: string;
   ctaHref?: string;
   buttonClassName?: string;
-  variant?: "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal";
+  /**
+   * Content lockup variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  variant?: ContentLockupVariantValue;
   linkText?: string;
   linkHref?: string;
-  alignment?: "center" | "left";
+  /**
+   * Text alignment. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  alignment?: ContentLockupAlignmentValue;
   /**
    * Optional id to attach to the primary title heading.
    * Useful when a parent section uses aria-labelledby.