@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,1002 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    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>',
+  },
+};
+
+// 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.",
+    pricing_wrapper: null,
+    price: "$0",
+    period: null,
+    cta: "Book Now",
+    features_wrapper: null,
+    features_title: "What you will get",
+    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",
+      },
+    ],
+  },
+  {
+    card: null,
+    badge: "Most Popular",
+    badge_pill: null,
+    title: "Premium Plan",
+    description: "Paid plan, Best for large enterprise",
+    pricing_wrapper: null,
+    price: "$150",
+    period: "/ per month",
+    cta: "Book Now",
+    features_wrapper: null,
+    features_title: "What you will get",
+    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",
+      },
+    ],
+  },
+  {
+    card: null,
+    badge: null,
+    badge_pill: null,
+    title: "Silver Plan",
+    description: "Paid Plan, Best for Business owners.",
+    pricing_wrapper: null,
+    price: "$50",
+    period: "/ per month",
+    cta: "Book Now",
+    features_wrapper: null,
+    features_title: "What you will get",
+    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",
+      },
+    ],
+  },
+];
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Our Pricing Plans",
+  pricing_cards_levoGroup: null,
+  pricing_cards: PRICING_CARDS,
+};
+
+export type IPricing1Content = typeof DEFAULT_CONTENT;
+
+export const Pricing1: IBlock = {
+  category_id: "pricing",
+  title: "Pricing 1",
+  key: "pricing-1",
+  version: "v1",
+  prompt_description:
+    "Pricing plans section with title and repeatable pricing cards, each featuring a badge, title, description, price, CTA button, and list of features with icons",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structure and spacing for the pricing section",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container that centers and constrains the pricing content width",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the pricing section, should be clear and compelling",
+        min_characters: 15,
+        max_characters: 50,
+      },
+    },
+    {
+      key: "pricing_cards",
+      label: "Pricing Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual pricing card container with border and styling",
+          },
+        },
+        {
+          key: "title_badge_container",
+          label: "Title Badge Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container that groups the badge and title together at the top of the card",
+          },
+        },
+        {
+          key: "badge",
+          label: "Badge Text",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Optional badge text like 'Most Popular' or plan type identifier",
+            min_characters: 4,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "primary_content_container",
+          label: "Primary Content Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Main content container that groups title, badge, description, pricing, and CTA together",
+          },
+        },
+        {
+          key: "title",
+          label: "Plan Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Name of the pricing plan, should be clear and descriptive",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "description",
+          label: "Plan Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief description explaining who this plan is best for",
+            min_characters: 20,
+            max_characters: 100,
+          },
+        },
+        {
+          key: "pricing_wrapper",
+          label: "Pricing Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description: "Container for the price and period display",
+          },
+        },
+        {
+          key: "price",
+          label: "Price",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Price amount, should include currency symbol like '$50' or '$0'",
+            min_characters: 2,
+            max_characters: 15,
+          },
+        },
+        {
+          key: "period",
+          label: "Period",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Billing period like '/ per month' or '/ annually', can be empty for free plans",
+            min_characters: 0,
+            max_characters: 20,
+          },
+        },
+        {
+          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",
+          },
+        },
+        {
+          key: "features_title",
+          label: "Features Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Title for the features list, typically 'What you will get'",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "features",
+          label: "Features",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "feature_container",
+              label: "Feature Container",
+              field_interface: "BoxWidget",
+              hint: {
+                prompt_description:
+                  "Container that groups the feature icon and text together",
+              },
+            },
+            {
+              key: "feature_item",
+              label: "Feature Icon",
+              field_interface: "IconWidget",
+              hint: {
+                prompt_description:
+                  "Icon to display next to the feature text, typically a checkmark or bullet point",
+              },
+            },
+            {
+              key: "feature_text",
+              label: "Feature Text",
+              field_interface: "TypographyWidget",
+              hint: {
+                prompt_description:
+                  "Description of a specific feature included in this plan",
+                min_characters: 10,
+                max_characters: 50,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      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",
+        },
+        title: {
+          "text-align": "center",
+          "margin-bottom": "4xl",
+          "font-size": "5xl",
+          "font-weight": "700",
+          color: "text-1",
+          mobile: {
+            "font-size": "3xl",
+          },
+          filter: "none",
+          "padding-bottom": "5xl",
+        },
+        pricing_cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          gap: "2xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        pricing_cards: [
+          {
+            card: {
+              "background-color": "white",
+              "border-color": "border",
+              "border-width": "1px",
+              "border-style": "solid",
+              "border-radius": "xl",
+              "padding-top": "3xl",
+              "padding-bottom": "3xl",
+              "padding-left": "sm",
+              "padding-right": "sm",
+              position: "relative",
+              "text-align": "center",
+              mobile: {
+                "padding-top": "xl",
+                "padding-bottom": "xl",
+              },
+              filter: "none",
+            },
+            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": "lg",
+              "font-size": "sm",
+              "font-weight": "600",
+              filter: "none",
+            },
+            badge: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "brandForeground",
+              filter: "none",
+            },
+            title: {
+              "font-size": "2xl",
+              "font-weight": "700",
+              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",
+              gap: "xs",
+              filter: "none",
+            },
+            price: {
+              "font-size": "4xl",
+              "font-weight": "700",
+              color: "brand",
+              "line-height": "1",
+              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",
+              "border-radius": "3xl",
+              "font-weight": 600,
+              "margin-bottom": "2xl",
+              "border-width": "0",
+              mobile: {
+                "margin-bottom": "xl",
+              },
+              filter: "none",
+            },
+            features_wrapper: {
+              "text-align": "left",
+            },
+            features_title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "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: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                  filter: "none",
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            card: {
+              "background-color": "background-1",
+              "border-color": "brand",
+              "border-width": "1px",
+              "border-style": "solid",
+              "border-radius": "xl",
+              "padding-top": "3xl",
+              "padding-bottom": "3xl",
+              "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",
+              color: "brandForeground",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "padding-left": "base",
+              "padding-right": "base",
+              "border-radius": "3xl",
+              "font-size": "sm",
+              "font-weight": "600",
+              filter: "none",
+              "border-style": "solid",
+              "border-width": "1px",
+              "border-color": "brand",
+            },
+            badge: {
+              "font-size": "sm",
+              "font-weight": 600,
+              color: "brand",
+              filter: "none",
+              "background-color": "white",
+              "padding-top": "5xs",
+              "padding-bottom": "5xs",
+              "padding-left": "2xs",
+              "padding-right": "2xs",
+              "border-radius": "3xl",
+              "border-style": "solid",
+              "border-width": "1px",
+              "border-color": "brand",
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              height: "min-content",
+            },
+            title: {
+              "font-size": "2xl",
+              "font-weight": "700",
+              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-weight": "700",
+              color: "brand",
+              "line-height": "1",
+              mobile: {
+                "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",
+              "border-radius": "3xl",
+              "font-weight": 600,
+              "margin-bottom": "2xl",
+              "border-width": "0",
+              mobile: {
+                "margin-bottom": "xl",
+              },
+              filter: "none",
+            },
+            features_wrapper: {
+              "text-align": "left",
+            },
+            features_title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "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: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+            ],
+            title_badge_container: {
+              filter: "none",
+              display: "flex",
+              "flex-direction": "row-reverse",
+              "justify-content": "space-between",
+            },
+          },
+          {
+            card: {
+              "background-color": "white",
+              "border-color": "border",
+              "border-width": "1px",
+              "border-style": "solid",
+              "border-radius": "xl",
+              "padding-top": "3xl",
+              "padding-bottom": "3xl",
+              "padding-left": "sm",
+              "padding-right": "sm",
+              position: "relative",
+              "text-align": "center",
+              mobile: {
+                "padding-top": "xl",
+                "padding-bottom": "xl",
+              },
+              filter: "none",
+            },
+            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": "lg",
+              "font-size": "sm",
+              "font-weight": "600",
+            },
+            badge: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "brandForeground",
+            },
+            title: {
+              "font-size": "2xl",
+              "font-weight": "700",
+              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-weight": "700",
+              color: "brand",
+              "line-height": "1",
+              mobile: {
+                "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",
+              "border-radius": "3xl",
+              "font-weight": 600,
+              "margin-bottom": "2xl",
+              "border-width": "0",
+              mobile: {
+                "margin-bottom": "xl",
+              },
+              filter: "none",
+            },
+            features_wrapper: {
+              "text-align": "left",
+            },
+            features_title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "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: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+              {
+                feature_container: {
+                  display: "flex",
+                  "align-items": "flex-start",
+                  gap: "sm",
+                },
+                feature_item: {
+                  width: "20px",
+                  height: "20px",
+                  "flex-shrink": "0",
+                  color: "brand",
+                },
+                feature_text: {
+                  "font-size": "base",
+                  color: "text-2",
+                  "line-height": "1.5",
+                  mobile: {
+                    "font-size": "sm",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};