@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -22,7 +22,8 @@ const PRICING_CARDS = [
     pricing_wrapper: null,
     price: "$0",
     period: null,
-    cta: "Book Now",
+    ctas_levoGroup: null,
+    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
     features_wrapper: null,
     features_title: "What you will get",
     features_levoGroup: null,
@@ -54,7 +55,8 @@ const PRICING_CARDS = [
     pricing_wrapper: null,
     price: "$150",
     period: "/ per month",
-    cta: "Book Now",
+    ctas_levoGroup: null,
+    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
     features_wrapper: null,
     features_title: "What you will get",
     features_levoGroup: null,
@@ -86,7 +88,8 @@ const PRICING_CARDS = [
     pricing_wrapper: null,
     price: "$50",
     period: "/ per month",
-    cta: "Book Now",
+    ctas_levoGroup: null,
+    ctas: [{ cta: "Book Now" }, { cta: "Learn More" }],
     features_wrapper: null,
     features_title: "What you will get",
     features_levoGroup: null,
@@ -115,6 +118,8 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   title: "Our Pricing Plans",
+  description:
+    "Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans Our Pricing Plans ",
   pricing_cards_levoGroup: null,
   pricing_cards: PRICING_CARDS,
 };
@@ -134,8 +139,7 @@ export const Pricing1: IBlock = {
       label: "Layout",
       field_interface: "LayoutWidget",
       hint: {
-        prompt_description:
-          "Defines the overall structure and spacing for the pricing section",
+        prompt_description: "Defines the overall structure and spacing for the pricing section",
       },
     },
     {
@@ -143,21 +147,29 @@ export const Pricing1: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description:
-          "Main container that centers and constrains the pricing content width",
+        prompt_description: "Main container that centers and constrains the pricing content width",
       },
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
       hint: {
-        prompt_description:
-          "Main heading for the pricing section, should be clear and compelling",
+        prompt_description: "Main heading for the pricing section, should be clear and compelling",
         min_characters: 15,
         max_characters: 50,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "pricing_cards",
       label: "Pricing Cards",
@@ -169,8 +181,7 @@ export const Pricing1: IBlock = {
           label: "Card",
           field_interface: "BoxWidget",
           hint: {
-            prompt_description:
-              "Individual pricing card container with border and styling",
+            prompt_description: "Individual pricing card container with border and styling",
           },
         },
         {
@@ -187,8 +198,7 @@ export const Pricing1: IBlock = {
           label: "Badge Text",
           field_interface: "TypographyWidget",
           hint: {
-            prompt_description:
-              "Optional badge text like 'Most Popular' or plan type identifier",
+            prompt_description: "Optional badge text like 'Most Popular' or plan type identifier",
             min_characters: 4,
             max_characters: 20,
           },
@@ -207,8 +217,7 @@ export const Pricing1: IBlock = {
           label: "Plan Title",
           field_interface: "HeadingWidget",
           hint: {
-            prompt_description:
-              "Name of the pricing plan, should be clear and descriptive",
+            prompt_description: "Name of the pricing plan, should be clear and descriptive",
             min_characters: 8,
             max_characters: 30,
           },
@@ -218,8 +227,7 @@ export const Pricing1: IBlock = {
           label: "Plan Description",
           field_interface: "TypographyWidget",
           hint: {
-            prompt_description:
-              "Brief description explaining who this plan is best for",
+            prompt_description: "Brief description explaining who this plan is best for",
             min_characters: 20,
             max_characters: 100,
           },
@@ -237,8 +245,7 @@ export const Pricing1: IBlock = {
           label: "Price",
           field_interface: "TypographyWidget",
           hint: {
-            prompt_description:
-              "Price amount, should include currency symbol like '$50' or '$0'",
+            prompt_description: "Price amount, should include currency symbol like '$50' or '$0'",
             min_characters: 2,
             max_characters: 15,
           },
@@ -255,23 +262,30 @@ export const Pricing1: IBlock = {
           },
         },
         {
-          key: "cta",
-          label: "CTA Button",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description:
-              "Call-to-action button text to encourage sign-up or booking",
-            min_characters: 6,
-            max_characters: 20,
-          },
+          key: "ctas",
+          label: "CTA Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+              hint: {
+                prompt_description: "Call-to-action button text to encourage sign-up or booking",
+                min_characters: 6,
+                max_characters: 20,
+              },
+            },
+          ],
         },
+
         {
           key: "features_wrapper",
           label: "Features Wrapper",
           field_interface: "BoxWidget",
           hint: {
-            prompt_description:
-              "Container for the features section within each card",
+            prompt_description: "Container for the features section within each card",
           },
         },
         {
@@ -279,8 +293,7 @@ export const Pricing1: IBlock = {
           label: "Features Title",
           field_interface: "HeadingWidget",
           hint: {
-            prompt_description:
-              "Title for the features list, typically 'What you will get'",
+            prompt_description: "Title for the features list, typically 'What you will get'",
             min_characters: 10,
             max_characters: 30,
           },
@@ -296,8 +309,7 @@ export const Pricing1: IBlock = {
               label: "Feature Container",
               field_interface: "BoxWidget",
               hint: {
-                prompt_description:
-                  "Container that groups the feature icon and text together",
+                prompt_description: "Container that groups the feature icon and text together",
               },
             },
             {
@@ -314,8 +326,7 @@ export const Pricing1: IBlock = {
               label: "Feature Text",
               field_interface: "TypographyWidget",
               hint: {
-                prompt_description:
-                  "Description of a specific feature included in this plan",
+                prompt_description: "Description of a specific feature included in this plan",
                 min_characters: 10,
                 max_characters: 50,
               },
@@ -330,32 +341,11 @@ export const Pricing1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "7xl",
-          "padding-bottom": "7xl",
-          "background-color": "white",
-          filter: "none",
-          tablet: {
-            filter: "none",
-          },
-          mobile: {
-            filter: "none",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "lg",
-          "padding-right": "lg",
-          filter: "none",
-        },
-
+        layout: {},
+        container: {},
         title: {
-          color: "text-1",
           "margin-bottom": "none",
-          filter: "none",
-          "padding-bottom": "5xl",
+          display: "block",
         },
         pricing_cards_levoGroup: {
           display: "grid",
@@ -381,12 +371,10 @@ export const Pricing1: IBlock = {
               "padding-left": "sm",
               "padding-right": "sm",
               position: "relative",
-              "text-align": "center",
               mobile: {
                 "padding-top": "xl",
                 "padding-bottom": "xl",
               },
-              filter: "none",
             },
             badge_pill: {
               position: "absolute",
@@ -400,41 +388,23 @@ export const Pricing1: IBlock = {
               "padding-left": "base",
               "padding-right": "base",
               "border-radius": "base",
-
               filter: "none",
             },
             badge: {
-              "font-size": "sm",
               "font-weight": "600",
               color: "brandForeground",
-              filter: "none",
             },
             title: {
-              color: "text-1",
               "margin-bottom": "xs",
-              mobile: {
-                "font-size": "xl",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
               "margin-bottom": "xl",
-              mobile: {
-                "font-size": "sm",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             pricing_wrapper: {
               "margin-bottom": "xl",
               display: "flex",
-              "align-items": "start",
-              "justify-content": "start",
+              "align-items": "center",
               gap: "xs",
-              filter: "none",
             },
             price: {
               "font-size": "4xl",
@@ -444,34 +414,29 @@ export const Pricing1: IBlock = {
               mobile: {
                 "font-size": "4xl",
               },
-              filter: "none",
-              "text-align": "left",
-            },
-            period: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "500",
             },
-            cta: {
-              width: "100%",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
+            period: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
               "margin-bottom": "2xl",
-              "border-width": "0",
+              width: "100%",
               mobile: {
                 "margin-bottom": "xl",
               },
-              filter: "none",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             features_wrapper: {
               "text-align": "left",
             },
             features_title: {
-              "font-size": "lg",
-              "font-weight": "600",
-              color: "text-1",
+              "font-weight": 600,
               "margin-bottom": "base",
             },
             features_levoGroup: {
@@ -492,15 +457,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                  filter: "none",
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -514,14 +471,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -535,14 +485,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -556,21 +499,18 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
             ],
+            title_badge_container: {
+              display: "block",
+              "flex-direction": "row",
+            },
           },
           {
             card: {
               "background-color": "white",
-              "border-color": "brand",
+              "border-color": "border",
               "border-width": "1px",
               "border-style": "solid",
               "border-radius": "base",
@@ -579,75 +519,43 @@ export const Pricing1: IBlock = {
               "padding-left": "sm",
               "padding-right": "sm",
               position: "relative",
-              "text-align": "center",
               mobile: {
                 "padding-top": "xl",
                 "padding-bottom": "xl",
               },
-              filter: "none",
             },
             badge_pill: {
-              "background-color": "white",
+              position: "absolute",
+              top: "-12px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              "background-color": "brand",
               color: "brandForeground",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
+              "padding-top": "xs",
+              "padding-bottom": "xs",
               "padding-left": "base",
               "padding-right": "base",
               "border-radius": "base",
-
               filter: "none",
-              "border-style": "solid",
-              "border-width": "1px",
-              "border-color": "brand",
             },
             badge: {
-              "font-size": "sm",
-
-              color: "brand",
-              filter: "none",
-              "background-color": "white",
-              "padding-top": "5xs",
-              "padding-bottom": "5xs",
-              "padding-left": "2xs",
-              "padding-right": "2xs",
-              "border-radius": "base",
-              "border-style": "solid",
-              "border-width": "1px",
-              "border-color": "brand",
-              display: "flex",
-              "justify-content": "center",
-              "align-items": "center",
-              height: "min-content",
+              "font-weight": "600",
+              color: "brandForeground",
             },
             title: {
-              color: "text-1",
               "margin-bottom": "xs",
-              mobile: {
-                "font-size": "xl",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
               "margin-bottom": "xl",
-              mobile: {
-                "font-size": "sm",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             pricing_wrapper: {
               "margin-bottom": "xl",
               display: "flex",
               "align-items": "center",
-              "justify-content": "start",
               gap: "xs",
-              filter: "none",
             },
             price: {
-              "font-size": "5xl",
+              "font-size": "4xl",
               "font-weight": "700",
               color: "brand",
               "line-height": "1",
@@ -655,31 +563,28 @@ export const Pricing1: IBlock = {
                 "font-size": "4xl",
               },
             },
-            period: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "500",
-            },
-            cta: {
-              width: "100%",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
+            period: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
               "margin-bottom": "2xl",
-              "border-width": "0",
+              width: "100%",
               mobile: {
                 "margin-bottom": "xl",
               },
-              filter: "none",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             features_wrapper: {
               "text-align": "left",
             },
             features_title: {
-              "font-size": "lg",
-              "font-weight": "600",
-              color: "text-1",
+              "font-weight": 600,
               "margin-bottom": "base",
             },
             features_levoGroup: {
@@ -700,14 +605,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -721,14 +619,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -742,14 +633,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -763,21 +647,14 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
             ],
             title_badge_container: {
-              filter: "none",
               display: "flex",
               "flex-direction": "row-reverse",
               "justify-content": "space-between",
+              "align-items": "center",
             },
           },
           {
@@ -792,12 +669,10 @@ export const Pricing1: IBlock = {
               "padding-left": "sm",
               "padding-right": "sm",
               position: "relative",
-              "text-align": "center",
               mobile: {
                 "padding-top": "xl",
                 "padding-bottom": "xl",
               },
-              filter: "none",
             },
             badge_pill: {
               position: "absolute",
@@ -811,39 +686,26 @@ export const Pricing1: IBlock = {
               "padding-left": "base",
               "padding-right": "base",
               "border-radius": "base",
+              filter: "none",
             },
             badge: {
+              "font-weight": "600",
               color: "brandForeground",
             },
             title: {
-              color: "text-1",
               "margin-bottom": "xs",
-              mobile: {
-                "font-size": "xl",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
               "margin-bottom": "xl",
-              mobile: {
-                "font-size": "sm",
-              },
-              filter: "none",
-              "text-align": "left",
             },
             pricing_wrapper: {
               "margin-bottom": "xl",
               display: "flex",
               "align-items": "center",
-              "justify-content": "start",
               gap: "xs",
-              filter: "none",
             },
             price: {
-              "font-size": "5xl",
+              "font-size": "4xl",
               "font-weight": "700",
               color: "brand",
               "line-height": "1",
@@ -851,31 +713,28 @@ export const Pricing1: IBlock = {
                 "font-size": "4xl",
               },
             },
-            period: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "500",
-            },
-            cta: {
-              width: "100%",
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
+            period: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
               "margin-bottom": "2xl",
-              "border-width": "0",
+              width: "100%",
               mobile: {
                 "margin-bottom": "xl",
               },
-              filter: "none",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             features_wrapper: {
               "text-align": "left",
             },
             features_title: {
-              "font-size": "lg",
-              "font-weight": "600",
-              color: "text-1",
+              "font-weight": 600,
               "margin-bottom": "base",
             },
             features_levoGroup: {
@@ -896,14 +755,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -917,14 +769,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -938,14 +783,7 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
               {
                 feature_container: {
@@ -959,18 +797,21 @@ export const Pricing1: IBlock = {
                   "flex-shrink": "0",
                   color: "brand",
                 },
-                feature_text: {
-                  "font-size": "base",
-                  color: "text-2",
-                  "line-height": "1.5",
-                  mobile: {
-                    "font-size": "sm",
-                  },
-                },
+                feature_text: {},
               },
             ],
+            title_badge_container: {
+              display: "block",
+              "flex-direction": "row",
+            },
           },
         ],
+        header: {
+          "margin-bottom": "5xl",
+        },
+        description: {
+          "margin-top": "2xs",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -982,6 +823,182 @@ export const Pricing1: IBlock = {
             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",
+              },
+            },
+          },
+        ],
       },
     },
   ],