Magic-link sign in UI and APIs

app/components/type/ContentLockup/ContentLockup.container.tsx

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

app/components/type/ContentLockup/ContentLockup.types.ts

@@ -5,12 +5,14 @@ export type ContentLockupVariantValue =
   | "ask"
   | "ask-inverse"
   | "modal"
+  | "login"
   | "Hero"
   | "Feature"
   | "Learn"
   | "Ask"
   | "Ask-Inverse"
-  | "Modal";
+  | "Modal"
+  | "Login";
 
 export type ContentLockupAlignmentValue = "center" | "left" | "Center" | "Left";
 
@@ -58,7 +60,14 @@ export interface ContentLockupViewProps {
   ctaText?: string;
   ctaHref?: string;
   buttonClassName: string;
-  variant: "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal";
+  variant:
+    | "hero"
+    | "feature"
+    | "learn"
+    | "ask"
+    | "ask-inverse"
+    | "modal"
+    | "login";
   linkText?: string;
   linkHref?: string;
   alignment: "center" | "left";

app/components/type/ContentLockup/ContentLockup.view.tsx

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