@levo-so/blocks 0.1.100 → 0.1.102

package/src/blocks/pricing/pricing-1.schema.ts

@@ -1,129 +1,259 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
+const TICK_ICON = {
   kind: "icon",
   data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
+    id: "tick-circle",
+    label: "Tick Circle",
     svgCode:
-      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M10.5804 15.58C10.3804 15.58 10.1904 15.5 10.0504 15.36L7.22043 12.53C6.93043 12.24 6.93043 11.76 7.22043 11.47C7.51043 11.18 7.99043 11.18 8.28043 11.47L10.5804 13.77L15.7204 8.62998C16.0104 8.33998 16.4904 8.33998 16.7804 8.62998C17.0704 8.91998 17.0704 9.39998 16.7804 9.68998L11.1104 15.36C10.9704 15.5 10.7804 15.58 10.5804 15.58Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const TICK_ICON_LIGHT = {
+  kind: "icon",
+  data: {
+    id: "tick-circle",
+    label: "Tick Circle",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="currentColor"/>\n<path d="M10.5804 15.58C10.3804 15.58 10.1904 15.5 10.0504 15.36L7.22043 12.53C6.93043 12.24 6.93043 11.76 7.22043 11.47C7.51043 11.18 7.99043 11.18 8.28043 11.47L10.5804 13.77L15.7204 8.62998C16.0104 8.33998 16.4904 8.33998 16.7804 8.62998C17.0704 8.91998 17.0704 9.39998 16.7804 9.68998L11.1104 15.36C10.9704 15.5 10.7804 15.58 10.5804 15.58Z" fill="currentColor"/>\n</svg>',
   },
 };
 
-// Sample pricing cards data following the image structure
 const PRICING_CARDS = [
   {
     card: null,
     badge: "",
     badge_pill: null,
-    title: "Basic Plan",
-    description: "Free plan, Best for personal use.",
+    title: "Starter",
+    description: "For solo builders and small teams shipping their first workflows.",
     pricing_wrapper: null,
     price: "$0",
-    period: null,
+    period: "/ forever",
     ctas_levoGroup: null,
-    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
+    ctas: [{ cta: "Start free" }],
     features_wrapper: null,
-    features_title: "What you will get",
+    features_title: "What's included",
     features_levoGroup: null,
     features: [
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Access to core feature",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Communication tool",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Limited support",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "basic reporting tools",
-      },
+      { feature_item: TICK_ICON, feature_text: "Up to 5 workspace members" },
+      { feature_item: TICK_ICON, feature_text: "Core project boards and docs" },
+      { feature_item: TICK_ICON, feature_text: "Slack and Gmail integrations" },
+      { feature_item: TICK_ICON, feature_text: "Community support and guides" },
     ],
   },
   {
     card: null,
     badge: "Most Popular",
     badge_pill: null,
-    title: "Premium Plan",
-    description: "Paid plan, Best for large enterprise",
+    title: "Growth",
+    description: "For growing teams running real work across automations and analytics.",
     pricing_wrapper: null,
-    price: "$150",
-    period: "/ per month",
+    price: "$24",
+    period: "/ seat / month",
     ctas_levoGroup: null,
-    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
+    ctas: [{ cta: "Start 14-day trial" }],
     features_wrapper: null,
-    features_title: "What you will get",
+    features_title: "Everything in Starter, plus",
     features_levoGroup: null,
     features: [
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Access to core feature",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Communication tool",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Limited support",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "basic reporting tools",
-      },
+      { feature_item: TICK_ICON, feature_text: "Unlimited workspace members" },
+      { feature_item: TICK_ICON, feature_text: "Custom automation rules" },
+      { feature_item: TICK_ICON, feature_text: "Advanced analytics dashboards" },
+      { feature_item: TICK_ICON, feature_text: "Priority email support under 4h" },
     ],
   },
   {
     card: null,
     badge: null,
     badge_pill: null,
-    title: "Silver Plan",
-    description: "Paid Plan, Best for Business owners.",
+    title: "Enterprise",
+    description: "For organisations that need SSO, audit logs, and dedicated onboarding.",
     pricing_wrapper: null,
-    price: "$50",
-    period: "/ per month",
+    price: "Custom",
+    period: null,
     ctas_levoGroup: null,
-    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
+    ctas: [{ cta: "Talk to sales" }],
     features_wrapper: null,
-    features_title: "What you will get",
+    features_title: "Everything in Growth, plus",
     features_levoGroup: null,
     features: [
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Access to core feature",
-      },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Communication tool",
+      { feature_item: TICK_ICON, feature_text: "SAML SSO and SCIM provisioning" },
+      { feature_item: TICK_ICON, feature_text: "SOC 2 Type II audit logs" },
+      { feature_item: TICK_ICON, feature_text: "99.99% uptime SLA" },
+      { feature_item: TICK_ICON, feature_text: "Dedicated CSM and onboarding" },
+    ],
+  },
+];
+
+/** Generates a single pricing card style object for reuse across layouts */
+const makeCardStyle = (overrides: Record<string, unknown> = {}) => ({
+  card: {
+    "background-color": "white",
+    "border-color": "border",
+    "border-width": "1px",
+    "border-style": "solid",
+    "border-radius": "base",
+    "padding-top": "3xl",
+    "padding-bottom": "3xl",
+    "padding-left": "xl",
+    "padding-right": "xl",
+    position: "relative",
+    display: "flex",
+    "flex-direction": "column",
+    height: "100%",
+    mobile: {
+      "padding-top": "xl",
+      "padding-bottom": "xl",
+      "padding-left": "lg",
+      "padding-right": "lg",
+    },
+    ...overrides,
+  },
+  badge_pill: {
+    position: "absolute",
+    top: "-12px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    "background-color": "brand",
+    color: "brandForeground",
+    "padding-top": "xs",
+    "padding-bottom": "xs",
+    "padding-left": "base",
+    "padding-right": "base",
+    "border-radius": "base",
+  },
+  badge: {
+    "font-weight": "600",
+    color: "brand",
+    "text-transform": "uppercase",
+    "letter-spacing": "0.08em",
+    "font-size": "xs",
+  },
+  title: {
+    "margin-bottom": "xs",
+  },
+  description: {
+    "margin-bottom": "xl",
+    "min-height": "48px",
+  },
+  pricing_wrapper: {
+    "margin-bottom": "xl",
+    display: "flex",
+    "align-items": "baseline",
+    gap: "xs",
+  },
+  price: {
+    "font-size": "4xl",
+    "font-weight": "700",
+    color: "brand",
+    "line-height": "1",
+    mobile: {
+      "font-size": "4xl",
+    },
+  },
+  period: {
+    color: "foreground-2",
+  },
+  primary_content_container: {
+    display: "flex",
+    "flex-direction": "column",
+  },
+  ctas_levoGroup: {
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "sm",
+    "align-items": "stretch",
+    "margin-bottom": "2xl",
+    width: "100%",
+    mobile: {
+      "margin-bottom": "xl",
+    },
+  },
+  ctas: [{ cta: { width: "100%" } }],
+  features_wrapper: {
+    "text-align": "left",
+    "margin-top": "auto",
+    "padding-top": "lg",
+    "border-top-width": "1px",
+    "border-top-style": "solid",
+    "border-top-color": "border",
+  },
+  features_title: {
+    "font-weight": 600,
+    "margin-bottom": "base",
+  },
+  features_levoGroup: {
+    display: "flex",
+    "flex-direction": "column",
+    gap: "sm",
+  },
+  features: Array(4)
+    .fill(0)
+    .map(() => ({
+      feature_container: {
+        display: "flex",
+        "flex-direction": "row",
+        "align-items": "center",
+        "flex-wrap": "nowrap",
+        gap: "sm",
       },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "Limited support",
+      feature_item: {
+        width: "20px",
+        height: "20px",
+        "flex-shrink": "0",
+        color: "brand",
       },
-      {
-        feature_item: DUMMY_ICON,
-        feature_text: "basic reporting tools",
+      feature_text: {
+        "flex": "1 1 auto",
+        "min-width": "0",
       },
-    ],
+    })),
+  title_badge_container: {
+    display: "block",
   },
-];
+});
+
+const CARD_CONFIG_SINGLE = {
+  title: {
+    heading: { level: "3" },
+    selectedVariants: { Heading_Level: "H3" },
+  },
+  card: { selectedVariants: {} },
+  cta: { selectedVariants: {} },
+  price: { selectedVariants: {} },
+  pricing_wrapper: { selectedVariants: {} },
+  period: { selectedVariants: {} },
+  features_title: {
+    selectedVariants: { Heading_Level: "H6" },
+  },
+  features: Array(4)
+    .fill(0)
+    .map(() => ({ feature_text: { selectedVariants: {} } })),
+  badge: {
+    selectedVariants: { Typography_Variants: "Small" },
+  },
+};
 
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
-  title: "Our Pricing Plans",
+  title: "Pricing that scales with your team",
   description:
-    "Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans ",
+    "Start free, add seats as you grow, and unlock enterprise controls whenever compliance asks. No credit card required.",
   pricing_cards_levoGroup: null,
   pricing_cards: PRICING_CARDS,
 };
 
+const HIGHLIGHTED_CONTENT = {
+  ...DEFAULT_CONTENT,
+  pricing_cards: PRICING_CARDS.map((card, i) =>
+    i === 1
+      ? { ...card, features: card.features.map((f) => ({ ...f, feature_item: TICK_ICON_LIGHT })) }
+      : card,
+  ),
+};
+
 export type IPricing1Content = typeof DEFAULT_CONTENT;
 
 export const Pricing1: IBlock = {
@@ -346,11 +476,13 @@ export const Pricing1: IBlock = {
         title: {
           "margin-bottom": "none",
           display: "block",
+          "text-align": "center",
         },
         pricing_cards_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(3, minmax(0, 1fr))",
           gap: "2xl",
+          "align-items": "stretch",
           tablet: {
             "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           },
@@ -360,642 +492,433 @@ export const Pricing1: IBlock = {
         },
         pricing_cards: [
           {
-            card: {
-              "background-color": "white",
-              "border-color": "border",
-              "border-width": "1px",
+            ...makeCardStyle(),
+            title_badge_container: {
+              display: "block",
+            },
+          },
+          {
+            ...makeCardStyle(),
+            title_badge_container: {
+              display: "flex",
+              "flex-direction": "row-reverse",
+              "justify-content": "space-between",
+              "align-items": "center",
+            },
+          },
+          {
+            ...makeCardStyle(),
+            title_badge_container: {
+              display: "block",
+            },
+          },
+        ],
+        header: {
+          "margin-bottom": "4xl",
+          "text-align": "center",
+        },
+        description: {
+          "margin-top": "2xs",
+          "text-align": "center",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        pricing_cards: [CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE],
+      },
+    },
+    {
+      key: "flat",
+      title: "Flat",
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        pricing_cards: [CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE],
+      },
+      styles: {
+        layout: {},
+        container: {},
+        header: {
+          "margin-bottom": "4xl",
+          "text-align": "center",
+        },
+        title: {
+          "margin-bottom": "none",
+          display: "block",
+          "text-align": "center",
+        },
+        description: {
+          "margin-top": "2xs",
+          "text-align": "center",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        pricing_cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          gap: "xl",
+        },
+        pricing_cards: Array(3)
+          .fill(0)
+          .map(() => ({
+            ...makeCardStyle({
+              "border-width": "0",
+              "border-bottom-width": "1px",
               "border-style": "solid",
-              "border-radius": "base",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              position: "relative",
+              "border-color": "border",
+              "border-radius": "none",
+              "background-color": "transparent",
+              "padding-left": "0",
+              "padding-right": "0",
+              display: "grid",
+              "grid-template-columns":
+                "minmax(220px, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr)",
+              "align-items": "center",
+              "column-gap": "3xl",
+              "row-gap": "lg",
+              height: "auto",
               mobile: {
+                "grid-template-columns": "1fr",
                 "padding-top": "xl",
                 "padding-bottom": "xl",
               },
+            }),
+            title_badge_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              gap: "xs",
             },
-            badge_pill: {
-              position: "absolute",
-              top: "-12px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "border-radius": "base",
+            primary_content_container: {
+              display: "flex",
+              "flex-direction": "column",
+              gap: "base",
+            },
+            description: {
+              "margin-bottom": "xs",
+              "min-height": "0",
+            },
+            pricing_wrapper: {
+              "margin-bottom": "none",
+              display: "flex",
+              "align-items": "baseline",
+              gap: "xs",
+            },
+            features_wrapper: {
+              "margin-top": "0",
+              "padding-top": "0",
+              "border-top-width": "0",
+            },
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "sm",
+              "align-items": "center",
+              "margin-bottom": "0",
+              width: "auto",
+            },
+            ctas: [{ cta: { width: "auto" } }],
+          })),
+      },
+    },
+    {
+      key: "highlighted",
+      title: "Highlighted",
+      content: HIGHLIGHTED_CONTENT,
+      config: {
+        title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        pricing_cards: [CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE],
+      },
+      styles: {
+        layout: {},
+        container: {},
+        header: {
+          "margin-bottom": "4xl",
+          "text-align": "center",
+        },
+        title: {
+          "margin-bottom": "none",
+          display: "block",
+          "text-align": "center",
+        },
+        description: {
+          "margin-top": "2xs",
+          "text-align": "center",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        pricing_cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          gap: "2xl",
+          "align-items": "stretch",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        pricing_cards: [
+          {
+            ...makeCardStyle(),
+            title_badge_container: {
+              display: "block",
             },
+          },
+          {
+            ...makeCardStyle({
+              "background-color": "brand",
+              "border-color": "brand",
+              "box-shadow": "xl",
+              mobile: {
+                "padding-top": "xl",
+                "padding-bottom": "xl",
+              },
+            }),
             badge: {
               "font-weight": "600",
               color: "brandForeground",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.08em",
+              "font-size": "xs",
             },
             title: {
               "margin-bottom": "xs",
+              color: "brandForeground",
             },
             description: {
               "margin-bottom": "xl",
-            },
-            pricing_wrapper: {
-              "margin-bottom": "xl",
-              display: "flex",
-              "align-items": "center",
-              gap: "xs",
+              "min-height": "48px",
+              color: "brandForeground",
             },
             price: {
               "font-size": "4xl",
               "font-weight": "700",
-              color: "brand",
+              color: "brandForeground",
               "line-height": "1",
-              mobile: {
-                "font-size": "4xl",
-              },
-            },
-            period: {},
-            ctas_levoGroup: {
-              display: "flex",
-              "flex-direction": "row",
-              "column-gap": "md",
-              "row-gap": "md",
-              "flex-wrap": "wrap",
-              "align-items": "center",
-              "margin-bottom": "2xl",
-              width: "100%",
-              mobile: {
-                "margin-bottom": "xl",
-              },
+              mobile: { "font-size": "4xl" },
             },
-            ctas: Array(2)
-              .fill(0)
-              .map(() => ({ cta: {} })),
-            features_wrapper: {
-              "text-align": "left",
+            period: {
+              color: "brandForeground",
             },
             features_title: {
               "font-weight": 600,
               "margin-bottom": "base",
+              color: "brandForeground",
             },
-            features_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              gap: "sm",
+            features_wrapper: {
+              "text-align": "left",
+              "margin-top": "auto",
+              "padding-top": "lg",
+              "border-top-width": "1px",
+              "border-top-style": "solid",
+              "border-top-color": "brandForeground",
             },
-            features: [
-              {
+            features: Array(4)
+              .fill(0)
+              .map(() => ({
                 feature_container: {
                   display: "flex",
-                  "align-items": "flex-start",
+                  "flex-direction": "row",
+                  "align-items": "center",
+                  "flex-wrap": "nowrap",
                   gap: "sm",
                 },
                 feature_item: {
                   width: "20px",
                   height: "20px",
                   "flex-shrink": "0",
-                  color: "brand",
+                  color: "brandForeground",
                 },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
+                feature_text: {
+                  color: "brandForeground",
+                  "flex": "1 1 auto",
+                  "min-width": "0",
                 },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
+              })),
+            title_badge_container: {
+              display: "flex",
+              "flex-direction": "row-reverse",
+              "justify-content": "space-between",
+              "align-items": "center",
+            },
+            badge_pill: {
+              position: "absolute",
+              top: "-12px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              "background-color": "brandForeground",
+              color: "brand",
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "base",
+              "padding-right": "base",
+              "border-radius": "base",
+            },
+            pricing_wrapper: {
+              "margin-bottom": "xl",
+              display: "flex",
+              "align-items": "baseline",
+              gap: "xs",
+            },
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "align-items": "stretch",
+              "margin-bottom": "2xl",
+              width: "100%",
+              mobile: { "margin-bottom": "xl" },
+            },
+            ctas: [
+              {
+                cta: {
+                  width: "100%",
+                  "background-color": "brandForeground",
                   color: "brand",
+                  "border-color": "brandForeground",
                 },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
               },
             ],
-            title_badge_container: {
-              display: "block",
-              "flex-direction": "row",
-            },
-          },
-          {
-            card: {
-              "background-color": "white",
-              "border-color": "border",
-              "border-width": "1px",
-              "border-style": "solid",
-              "border-radius": "base",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              position: "relative",
-              mobile: {
-                "padding-top": "xl",
-                "padding-bottom": "xl",
-              },
-            },
-            badge_pill: {
-              position: "absolute",
-              top: "-12px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "border-radius": "base",
-            },
-            badge: {
-              "font-weight": "600",
-              color: "brandForeground",
-            },
-            title: {
-              "margin-bottom": "xs",
-            },
-            description: {
-              "margin-bottom": "xl",
-            },
-            pricing_wrapper: {
-              "margin-bottom": "xl",
-              display: "flex",
-              "align-items": "center",
-              gap: "xs",
-            },
-            price: {
-              "font-size": "4xl",
-              "font-weight": "700",
-              color: "brand",
-              "line-height": "1",
-              mobile: {
-                "font-size": "4xl",
-              },
-            },
-            period: {},
-            ctas_levoGroup: {
-              display: "flex",
-              "flex-direction": "row",
-              "column-gap": "md",
-              "row-gap": "md",
-              "flex-wrap": "wrap",
-              "align-items": "center",
-              "margin-bottom": "2xl",
-              width: "100%",
-              mobile: {
-                "margin-bottom": "xl",
-              },
-            },
-            ctas: Array(2)
-              .fill(0)
-              .map(() => ({ cta: {} })),
-            features_wrapper: {
-              "text-align": "left",
-            },
-            features_title: {
-              "font-weight": 600,
-              "margin-bottom": "base",
-            },
             features_levoGroup: {
               display: "flex",
               "flex-direction": "column",
               gap: "sm",
             },
-            features: [
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-            ],
+          },
+          {
+            ...makeCardStyle(),
             title_badge_container: {
-              display: "flex",
-              "flex-direction": "row-reverse",
-              "justify-content": "space-between",
-              "align-items": "center",
+              display: "block",
             },
           },
-          {
-            card: {
-              "background-color": "white",
-              "border-color": "border",
-              "border-width": "1px",
-              "border-style": "solid",
-              "border-radius": "base",
-              "padding-top": "3xl",
-              "padding-bottom": "3xl",
-              "padding-left": "sm",
-              "padding-right": "sm",
-              position: "relative",
+        ],
+      },
+    },
+    {
+      key: "compact",
+      title: "Compact",
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        pricing_cards: [CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE, CARD_CONFIG_SINGLE],
+      },
+      styles: {
+        layout: {
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+        },
+        container: {},
+        header: {
+          "margin-bottom": "3xl",
+          "text-align": "center",
+        },
+        title: {
+          "margin-bottom": "none",
+          display: "block",
+          "text-align": "center",
+        },
+        description: {
+          "margin-top": "2xs",
+          "text-align": "center",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        pricing_cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          gap: "base",
+          "align-items": "stretch",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        pricing_cards: Array(3)
+          .fill(0)
+          .map(() => ({
+            ...makeCardStyle({
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
               mobile: {
-                "padding-top": "xl",
-                "padding-bottom": "xl",
+                "padding-top": "base",
+                "padding-bottom": "base",
               },
-            },
-            badge_pill: {
-              position: "absolute",
-              top: "-12px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "border-radius": "base",
-            },
-            badge: {
-              "font-weight": "600",
-              color: "brandForeground",
-            },
+            }),
             title: {
-              "margin-bottom": "xs",
+              "margin-bottom": "4xs",
             },
             description: {
-              "margin-bottom": "xl",
+              "margin-bottom": "base",
+              "min-height": "40px",
             },
             pricing_wrapper: {
-              "margin-bottom": "xl",
+              "margin-bottom": "base",
               display: "flex",
-              "align-items": "center",
+              "align-items": "baseline",
               gap: "xs",
             },
             price: {
-              "font-size": "4xl",
+              "font-size": "3xl",
               "font-weight": "700",
               color: "brand",
               "line-height": "1",
-              mobile: {
-                "font-size": "4xl",
-              },
+              mobile: { "font-size": "2xl" },
             },
-            period: {},
             ctas_levoGroup: {
               display: "flex",
-              "flex-direction": "row",
-              "column-gap": "md",
-              "row-gap": "md",
-              "flex-wrap": "wrap",
-              "align-items": "center",
-              "margin-bottom": "2xl",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "align-items": "stretch",
+              "margin-bottom": "xl",
               width: "100%",
-              mobile: {
-                "margin-bottom": "xl",
-              },
+              mobile: { "margin-bottom": "base" },
             },
-            ctas: Array(2)
-              .fill(0)
-              .map(() => ({ cta: {} })),
             features_wrapper: {
               "text-align": "left",
+              "margin-top": "auto",
+              "padding-top": "base",
+              "border-top-width": "1px",
+              "border-top-style": "solid",
+              "border-top-color": "border",
             },
             features_title: {
               "font-weight": 600,
-              "margin-bottom": "base",
+              "margin-bottom": "xs",
             },
             features_levoGroup: {
               display: "flex",
               "flex-direction": "column",
-              gap: "sm",
+              gap: "4xs",
             },
-            features: [
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-              {
-                feature_container: {
-                  display: "flex",
-                  "align-items": "flex-start",
-                  gap: "sm",
-                },
-                feature_item: {
-                  width: "20px",
-                  height: "20px",
-                  "flex-shrink": "0",
-                  color: "brand",
-                },
-                feature_text: {},
-              },
-            ],
             title_badge_container: {
               display: "block",
-              "flex-direction": "row",
             },
-          },
-        ],
-        header: {
-          "margin-bottom": "5xl",
-        },
-        description: {
-          "margin-top": "2xs",
-        },
-      },
-      content: DEFAULT_CONTENT,
-      config: {
-        title: {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-        pricing_cards: [
-          {
-            title: {
-              heading: {
-                level: "3",
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-            card: {
-              selectedVariants: {},
-            },
-            cta: {
-              selectedVariants: {},
-            },
-            price: {
-              selectedVariants: {},
-            },
-            pricing_wrapper: {
-              selectedVariants: {},
-            },
-            period: {
-              selectedVariants: {},
-            },
-            features_title: {
-              heading: {
-                level: "5",
-              },
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            features: [
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-            badge: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
-            },
-          },
-          {
-            title: {
-              heading: {
-                level: "3",
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-            card: {
-              selectedVariants: {},
-            },
-            cta: {
-              selectedVariants: {},
-            },
-            price: {
-              selectedVariants: {},
-            },
-            pricing_wrapper: {
-              selectedVariants: {},
-            },
-            period: {
-              selectedVariants: {},
-            },
-            features_title: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            features: [
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-            badge: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
-            },
-          },
-          {
-            title: {
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-              heading: {
-                level: "3",
-              },
-            },
-            card: {
-              selectedVariants: {},
-            },
-            cta: {
-              selectedVariants: {},
-            },
-            price: {
-              selectedVariants: {},
-            },
-            pricing_wrapper: {
-              selectedVariants: {},
-            },
-            period: {
-              selectedVariants: {},
-            },
-            features_title: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            features: [
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                feature_text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-            badge: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
-            },
-          },
-        ],
+          })),
       },
     },
   ],