Implement create component

app/components/ContentLockup/ContentLockup.container.tsx

@@ -91,6 +91,18 @@ const ContentLockupContainer = memo<ContentLockupProps>(
         shape:
           "w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]",
       },
+      modal: {
+        container:
+          "flex flex-col gap-[var(--spacing-scale-008)] items-start justify-center py-[12px] relative w-full",
+        textContainer: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
+        titleGroup: "flex flex-col gap-[var(--spacing-scale-008)] w-full",
+        titleContainer: "flex items-center justify-start w-full",
+        title:
+          "font-bricolage-grotesque font-bold text-[28px] leading-[36px] tracking-[0] text-[var(--color-content-default-primary)] text-left",
+        description:
+          "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
+        shape: "w-[16px] h-[16px]",
+      },
     };
 
     const styles = variantStyles[variant] || variantStyles.hero;

app/components/ContentLockup/ContentLockup.types.ts

@@ -5,7 +5,7 @@ export interface ContentLockupProps {
   ctaText?: string;
   ctaHref?: string;
   buttonClassName?: string;
-  variant?: "hero" | "feature" | "learn" | "ask" | "ask-inverse";
+  variant?: "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal";
   linkText?: string;
   linkHref?: string;
   alignment?: "center" | "left";
@@ -34,7 +34,7 @@ export interface ContentLockupViewProps {
   ctaText?: string;
   ctaHref?: string;
   buttonClassName: string;
-  variant: "hero" | "feature" | "learn" | "ask" | "ask-inverse";
+  variant: "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal";
   linkText?: string;
   linkHref?: string;
   alignment: "center" | "left";

app/components/ContentLockup/ContentLockup.view.tsx

@@ -20,16 +20,20 @@ function ContentLockupView({
 }: ContentLockupViewProps) {
   return (
     <div className={styles.container}>
-      {variant === "ask" || variant === "ask-inverse" ? (
-        /* Simplified structure for ask variant */
+      {variant === "ask" || variant === "ask-inverse" || variant === "modal" ? (
+        /* Simplified structure for ask and modal variants */
         <div
           className={`${styles.titleGroup} ${
-            alignment === "left" ? "text-left" : "text-center"
+            alignment === "left" || variant === "modal"
+              ? "text-left"
+              : "text-center"
           }`}
         >
           <div
             className={`${styles.titleContainer} ${
-              alignment === "left" ? "justify-start" : "justify-center"
+              alignment === "left" || variant === "modal"
+                ? "justify-start"
+                : "justify-center"
             }`}
           >
             {title ? (
@@ -39,6 +43,9 @@ function ContentLockupView({
             ) : null}
           </div>
           {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
+          {variant === "modal" && description && (
+            <p className={styles.description}>{description}</p>
+          )}
         </div>
       ) : (
         /* Full structure for other variants */