@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/services/service-1.tsx

@@ -45,7 +45,7 @@ const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
                     <Box
                       elementKey={`services-accordion.${index}.iconQuestionWrapper`}
                     >
-                      <Typography
+                      <Heading
                         elementKey={`services-accordion.${index}.question`}
                       />
                     </Box>
@@ -91,7 +91,20 @@ const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
                 <Typography
                   elementKey={`service-cards.${cardIndex}.description`}
                 />
-                <Button elementKey={`service-cards.${cardIndex}.cta`} />
+                <Box
+                  elementKey={`service-cards.${cardIndex}.ctas_levoGroup`}
+                  data-levo_group
+                >
+                  {(content?.["service-cards"]?.[cardIndex]?.ctas ?? []).map(
+                    (_, ctaIndex) => (
+                      <Button
+                        key={`service-cards.${cardIndex}.ctas.${ctaIndex}.cta`}
+                        elementKey={`service-cards.${cardIndex}.ctas.${ctaIndex}.cta`}
+                        data-levo_group_item
+                      />
+                    )
+                  )}
+                </Box>
 
                 {content?.["service-cards"]?.[cardIndex]?.[
                   "service-features"

package/src/blocks/services/service-2.schema.ts

@@ -1,23 +1,30 @@
 import type { IBlock } from "@levo-so/studio";
-const DUMMY_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+
+const MEDIA = {
+  id: "pKkmltJTMHQl",
+  filename: "services-2.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1200w.webp",
     "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/services-2-n3qJfSsRwAGw-320w.webp 320w",
   },
+  mimetype: "image/png",
 };
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -28,7 +35,15 @@ const DEFAULT_CONTENT = {
   title: "Expert Business Consulting Solutions",
   description:
     "Strategic consulting services that drive growth and innovation for your business. Our expert team delivers tailored solutions for sustainable success.",
-  cta: "Get Started",
+  ctas_levoGroup: null,
+  ctas: [
+    {
+      cta: "Get Started",
+    },
+    {
+      cta: "Learn More",
+    },
+  ],
   stats_container: null,
   stats: [
     {
@@ -50,7 +65,7 @@ const DEFAULT_CONTENT = {
   search_input_wrapper: null,
   search_button: "Search",
   right_container: null,
-  hero_image: DUMMY_IMAGE,
+  hero_image: MEDIA,
 };
 
 export type IService2Content = typeof DEFAULT_CONTENT;
@@ -136,15 +151,23 @@ export const Service2: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "Call to Action",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Primary action button that encourages user engagement. Should be clear and action-oriented.",
-        min_characters: 8,
-        max_characters: 20,
-      },
+      key: "ctas",
+      label: "CTA Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "Call to Action",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary action button that encourages user engagement. Should be clear and action-oriented.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+      ],
     },
     {
       key: "stats_container",
@@ -266,30 +289,8 @@ export const Service2: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "background-color": "oklch(0.9643 0.0169 61.9599)",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -321,23 +322,24 @@ export const Service2: IBlock = {
           "padding-right": "2xs",
           "padding-top": "4xs",
           "padding-bottom": "4xs",
-          color: "white",
+          color: "brandForeground",
         },
-        title: {
-          color: "text-1",
-        },
-        description: {
-          color: "text-2",
-        },
-        cta: {
-          "background-color": "oklch(0.3451 0.1175 164.4309)",
-          color: "white",
-          "padding-top": "sm",
-          "padding-bottom": "sm",
-          "padding-left": "lg",
-          "padding-right": "lg",
+        title: {},
+        description: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
           "align-self": "flex-start",
         },
+        ctas: Array(2)
+          .fill(0)
+          .map(() => ({
+            cta: {},
+          })),
         stats_container: {
           display: "flex",
           "flex-direction": "column",
@@ -372,12 +374,8 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
-            label: {
-              color: "text-2",
-            },
+            value: {},
+            label: {},
           },
           {
             stat_wrapper: {
@@ -385,9 +383,7 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
+            value: {},
             label: {
               color: "text-2",
             },
@@ -398,9 +394,7 @@ export const Service2: IBlock = {
               "flex-direction": "column",
               "row-gap": "xs",
             },
-            value: {
-              color: "text-1",
-            },
+            value: {},
             label: {
               color: "text-2",
             },
@@ -411,10 +405,10 @@ export const Service2: IBlock = {
       config: {
         title: {
           heading: {
-            level: 1,
+            level: "2",
           },
           selectedVariants: {
-            Heading_Level: "H1",
+            Heading_Level: "H2",
           },
         },
         cta: {
@@ -427,6 +421,32 @@ export const Service2: IBlock = {
             Button_Variants: "Secondary",
           },
         },
+        stats: [
+          {
+            value: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            value: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            value: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/services/service-2.tsx

@@ -29,7 +29,15 @@ const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({
               <Typography elementKey="label" />
               <Heading elementKey="title" />
               <Typography elementKey="description" />
-              <Button elementKey="cta" />
+              <Box elementKey="ctas_levoGroup" data-levo_group>
+                {(content?.ctas ?? []).map((_: any, index: number) => (
+                  <Button
+                    key={`ctas.${index}.cta`}
+                    elementKey={`ctas.${index}.cta`}
+                    data-levo_group_item
+                  />
+                ))}
+              </Box>
             </Box>
             <Box elementKey="stats_container">
               <Box elementKey="stats_levoGroup" data-levo_group>

package/src/blocks/services/service-3.schema.ts

@@ -1,23 +1,28 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA = {
+  id: "oilirpqbBMhi",
+  filename: "services-3.png",
   kind: "image",
-  mimetype: "image/png",
+  location: "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1200w.webp",
     "1920w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/services-3-KQ59QXeCBwMY-1080w.webp 1080w",
   },
+  mimetype: "image/png",
 };
 
 const DUMMY_ICON = {
@@ -36,7 +41,7 @@ const DEFAULT_CONTENT = {
   container: null,
   main_wrapper: null,
   left_container: null,
-  profile_image: DEFAULT_IMAGE,
+  profile_image: MEDIA,
   right_container: null,
   content_wrapper: null,
   title: "Professional Service Package",
@@ -208,10 +213,11 @@ export const Service3: IBlock = {
           "Wrapper for the main content elements (title, stats, pricing) with proper vertical spacing.",
       },
     },
+
     {
       key: "title",
       label: "Service Title",
-      field_interface: "HeadingWidget",
+      field_interface: "TypographyWidget",
       hint: {
         prompt_description:
           "Main service headline that communicates the primary offering. Should be professional and clear.",
@@ -219,17 +225,7 @@ export const Service3: IBlock = {
         max_characters: 60,
       },
     },
-    {
-      key: "statswrapper",
-      label: "Stats Wrapper",
-      field_interface: "BoxWidget",
-      hint: {
-        prompt_description:
-          "Wrapper for the service features or benefits with icons that build credibility and showcase capabilities.",
-        min_items: 2,
-        max_items: 4,
-      },
-    },
+
     {
       key: "stats",
       label: "Service Features",
@@ -359,7 +355,7 @@ export const Service3: IBlock = {
     {
       key: "actual_price",
       label: "Actual Price",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
       hint: {
         prompt_description:
           "Current promotional price that customers will pay (e.g., '$299').",
@@ -435,29 +431,9 @@ export const Service3: IBlock = {
       key: "default",
       styles: {
         layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
           "background-color": "oklch(0.9413 0.0138 46.228)",
         },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "center",
@@ -488,14 +464,10 @@ export const Service3: IBlock = {
         content_wrapper: {
           display: "flex",
           "flex-direction": "column",
-          "row-gap": "lg",
+          "row-gap": "sm",
         },
         title: {
           "margin-bottom": "lg",
-          "font-size": "4xl",
-          tablet: {
-            "font-size": "2xl",
-          },
         },
         stats_levoGroup: {
           display: "grid",
@@ -517,24 +489,20 @@ export const Service3: IBlock = {
           "column-gap": "base",
         },
         actual_price: {
-          "font-size": "xl",
-          "font-weight": "700",
-          color: "text-1",
+          "font-weight": 700,
         },
         discount_price: {
-          "font-size": "sm",
           color: "text-3",
           "text-decoration": "line-through",
         },
         off_percent: {
-          "font-size": "sm",
-          "font-weight": "600",
-          color: "success",
+          "font-weight": 600,
         },
         search_input_wrapper: {
           display: "flex",
           "flex-direction": "column",
           "row-gap": "base",
+          "margin-top": "base",
         },
         stats: [
           {
@@ -543,9 +511,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -553,9 +519,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -563,9 +527,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
           {
             stat_wrapper: {
@@ -573,9 +535,7 @@ export const Service3: IBlock = {
               "align-items": "center",
               "column-gap": "sm",
             },
-            label: {
-              color: "text-2",
-            },
+            label: {},
           },
         ],
         breadcrumbs: [
@@ -614,10 +574,10 @@ export const Service3: IBlock = {
       config: {
         title: {
           heading: {
-            level: 2,
+            level: "3",
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H3",
           },
         },
         search_button: {
@@ -625,6 +585,46 @@ export const Service3: IBlock = {
             Button_Variants: "Primary",
           },
         },
+        stats: [
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        actual_price: {
+          heading: {
+            level: "4",
+          },
+          selectedVariants: {
+            Heading_Level: "H5",
+          },
+        },
+        off_percent: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        discount_price: {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
       },
     },
   ],

package/src/blocks/services/service-3.tsx

@@ -41,47 +41,48 @@ const Service3: React.FC<ILevoBlockBaseProps<IService3Content>> = ({
           </Box>
           <Box elementKey="right_container">
             <Box elementKey="content_wrapper">
-              <Heading elementKey="title" />
-              <Box elementKey="statswrapper_levoGroup" data-levo_group>
-                <Box elementKey="stats_levoGroup" data-levo_group>
-                  {(content?.stats ?? []).map((_, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats.${index}.icon`} />
-                      <Typography elementKey={`stats.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
-                <Box elementKey="stats_2_levoGroup" data-levo_group>
-                  {(content?.stats_2 ?? []).map((_: any, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats_2.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats_2.${index}.icon`} />
-                      <Typography elementKey={`stats_2.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
-                <Box elementKey="stats_3_levoGroup" data-levo_group>
-                  {(content?.stats_3 ?? []).map((_: any, index: number) => (
-                    <Box
-                      key={`stat-${index}`}
-                      data-levo_group_item
-                      elementKey={`stats_3.${index}.stat_wrapper`}
-                    >
-                      <Icon elementKey={`stats_3.${index}.icon`} />
-                      <Typography elementKey={`stats_3.${index}.label`} />
-                    </Box>
-                  ))}
-                </Box>
+              <Typography elementKey="title" />
+
+              <Box elementKey="stats_levoGroup" data-levo_group>
+                {(content?.stats ?? []).map((_, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats.${index}.icon`} />
+                    <Typography elementKey={`stats.${index}.label`} />
+                  </Box>
+                ))}
+              </Box>
+
+              <Box elementKey="stats_2_levoGroup" data-levo_group>
+                {(content?.stats_2 ?? []).map((_: any, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats_2.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats_2.${index}.icon`} />
+                    <Typography elementKey={`stats_2.${index}.label`} />
+                  </Box>
+                ))}
               </Box>
+              <Box elementKey="stats_3_levoGroup" data-levo_group>
+                {(content?.stats_3 ?? []).map((_: any, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats_3.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats_3.${index}.icon`} />
+                    <Typography elementKey={`stats_3.${index}.label`} />
+                  </Box>
+                ))}
+              </Box>
+
               <Box elementKey="price_container">
-                <Typography elementKey="actual_price" />
+                <Heading elementKey="actual_price" />
                 <Typography elementKey="discount_price" />
                 <Typography elementKey="off_percent" />
               </Box>