@levo-so/blocks 0.1.58 → 0.1.60

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,
 };
@@ -147,6 +152,11 @@ export const Pricing1: IBlock = {
           "Main container that centers and constrains the pricing content width",
       },
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
@@ -158,6 +168,11 @@ export const Pricing1: IBlock = {
         max_characters: 50,
       },
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "pricing_cards",
       label: "Pricing Cards",
@@ -255,16 +270,25 @@ 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",
@@ -330,32 +354,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 +384,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 +401,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 +427,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 +470,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 +484,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 +498,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 +512,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 +532,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 +576,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 +618,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 +632,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 +646,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 +660,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 +682,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 +699,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 +726,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 +768,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 +782,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 +796,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 +810,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 +836,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",
+              },
+            },
+          },
+        ],
       },
     },
   ],