@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/hero/hero-12.schema.ts

@@ -1,5 +1,23 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA_1 = {
+  id: "oilXrpqcLCr5",
+  filename: "hero-12.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-12-qW3Y1jckiw1H-640w.webp 640w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -14,39 +32,11 @@ const DEFAULT_CONTENT = {
   images: [
     {
       image_wrapper: null,
-      image: {
-        id: "2",
-        location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-        kind: "image",
-        mimetype: "image/png",
-        srcset: {
-          "320w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-          "640w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-          "1080w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-          path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
-        },
-      },
+      image: MEDIA_1,
     },
     {
       image_wrapper: null,
-      image: {
-        id: "2",
-        location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-        kind: "image",
-        mimetype: "image/png",
-        srcset: {
-          "320w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-          "640w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-          "1080w":
-            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-          path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w",
-        },
-      },
+      image: MEDIA_1,
     },
   ],
   stats_levoGroup: null,
@@ -147,8 +137,7 @@ export const Hero12: IBlock = {
       label: "Content Wrapper",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Wrapper that contains all hero content with proper spacing.",
+        prompt_description: "Wrapper that contains all hero content with proper spacing.",
       },
     },
     {
@@ -165,8 +154,7 @@ export const Hero12: IBlock = {
       label: "Title Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description:
-          "Container specifically for the label and title elements.",
+        prompt_description: "Container specifically for the label and title elements.",
       },
     },
     {
@@ -184,8 +172,7 @@ export const Hero12: IBlock = {
       label: "Label",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Small section label shown above the title (e.g., 'About Us')",
+        prompt_description: "Small section label shown above the title (e.g., 'About Us')",
         min_characters: 3,
         max_characters: 20,
       },
@@ -205,8 +192,7 @@ export const Hero12: IBlock = {
       label: "Description",
       field_interface: "TypographyWidget",
       hint: {
-        prompt_description:
-          "Supporting description text explaining the company or service",
+        prompt_description: "Supporting description text explaining the company or service",
         min_characters: 80,
         max_characters: 200,
       },
@@ -216,8 +202,7 @@ export const Hero12: IBlock = {
       label: "Bottom Container",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for the bottom section with image and stats grid.",
+        prompt_description: "Container for the bottom section with image and stats grid.",
       },
     },
 
@@ -260,8 +245,7 @@ export const Hero12: IBlock = {
           label: "Number Container",
           field_interface: "BoxWidget",
           hint: {
-            prompt_description:
-              "Container that holds the icon and number together.",
+            prompt_description: "Container that holds the icon and number together.",
           },
         },
         {
@@ -269,8 +253,7 @@ export const Hero12: IBlock = {
           label: "Icon",
           field_interface: "IconWidget",
           hint: {
-            prompt_description:
-              "Small icon displayed alongside the statistic number.",
+            prompt_description: "Small icon displayed alongside the statistic number.",
             size: "icon",
             orientation: "square",
             usecase: "icon",
@@ -279,10 +262,9 @@ export const Hero12: IBlock = {
         {
           key: "number",
           label: "Number",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
-            prompt_description:
-              "Large statistic number with plus sign (e.g., '25+', '600+')",
+            prompt_description: "Large statistic number with plus sign (e.g., '25+', '600+')",
             min_characters: 2,
             max_characters: 10,
           },
@@ -316,10 +298,7 @@ export const Hero12: IBlock = {
         layout: {
           "background-color": "background-3",
         },
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
+        container: {},
         content_wrapper: {
           display: "block",
           "flex-direction": "row",
@@ -335,14 +314,9 @@ export const Hero12: IBlock = {
           display: "flex",
           "flex-direction": "column",
         },
-        label: {
-          "margin-bottom": "none",
-        },
+        label: {},
         title: {
           "margin-bottom": "1rem",
-          mobile: {
-            "font-size": "2xl",
-          },
         },
         description: {
           "margin-bottom": "2.5rem",
@@ -350,8 +324,7 @@ export const Hero12: IBlock = {
         team_image_wrapper: {
           "border-radius": "1rem",
           overflow: "hidden",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "border-width": "1px",
           "border-color": "#e5e7eb",
         },
@@ -366,8 +339,7 @@ export const Hero12: IBlock = {
             image_wrapper: {
               "border-radius": "1rem",
               overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+              "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
               "border-width": "1px",
               "border-color": "#e5e7eb",
               width: "100%",
@@ -386,8 +358,7 @@ export const Hero12: IBlock = {
           "grid-template-rows": "repeat(2, minmax(0, 1fr))",
           "flex-grow": "1",
           "background-color": "white",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           overflow: "hidden",
           tablet: {
             "max-width": "100%",
@@ -410,14 +381,12 @@ export const Hero12: IBlock = {
               "border-color": "#e5e7eb",
             },
             number: {
-              color: "#D47330",
+              color: "brand",
               "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
+              "font-weight": 600,
             },
             label: {
               color: "#6b7280",
-              "font-size": "sm",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
             },
@@ -426,45 +395,8 @@ export const Hero12: IBlock = {
               "justify-content": "center",
               "align-items": "center",
               "column-gap": "2xs",
-            },
-            icon: {
-              height: "32px",
-              width: "32px",
-              "font-size": "32px",
-            },
-          },
-          {
-            stat_box: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "justify-content": "center",
-              "padding-top": "2rem",
-              "padding-bottom": "2rem",
-              "padding-left": "2rem",
-              "padding-right": "2rem",
-              "border-right-width": "1px",
-              "border-bottom-width": "1px",
-              "border-color": "#e5e7eb",
-            },
-            number: {
-              color: "#D47330",
-              "font-size": "4xl",
-              "font-weight": "600",
               "margin-bottom": "0.5rem",
             },
-            label: {
-              color: "#6b7280",
-              "font-size": "sm",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
-            },
-            number_container: {
-              display: "flex",
-              "justify-content": "center",
-              "align-items": "center",
-              "column-gap": "2xs",
-            },
             icon: {
               height: "32px",
               width: "32px",
@@ -486,14 +418,12 @@ export const Hero12: IBlock = {
               "border-color": "#e5e7eb",
             },
             number: {
-              color: "#D47330",
+              color: "brand",
               "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
+              "font-weight": 600,
             },
             label: {
               color: "#6b7280",
-              "font-size": "sm",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
             },
@@ -502,6 +432,7 @@ export const Hero12: IBlock = {
               "justify-content": "center",
               "align-items": "center",
               "column-gap": "2xs",
+              "margin-bottom": "0.5rem",
             },
             icon: {
               height: "32px",
@@ -524,14 +455,12 @@ export const Hero12: IBlock = {
               "border-color": "#e5e7eb",
             },
             number: {
-              color: "#D47330",
+              color: "brand",
               "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
+              "font-weight": 600,
             },
             label: {
               color: "#6b7280",
-              "font-size": "sm",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
             },
@@ -540,6 +469,7 @@ export const Hero12: IBlock = {
               "justify-content": "center",
               "align-items": "center",
               "column-gap": "2xs",
+              "margin-bottom": "0.5rem",
             },
             icon: {
               height: "32px",
@@ -562,14 +492,12 @@ export const Hero12: IBlock = {
               "border-color": "#e5e7eb",
             },
             number: {
-              color: "#D47330",
+              color: "brand",
               "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
+              "font-weight": 600,
             },
             label: {
               color: "#6b7280",
-              "font-size": "sm",
               "text-transform": "uppercase",
               "letter-spacing": "0.05em",
             },
@@ -578,6 +506,7 @@ export const Hero12: IBlock = {
               "justify-content": "center",
               "align-items": "center",
               "column-gap": "2xs",
+              "margin-bottom": "0.5rem",
             },
             icon: {
               height: "32px",
@@ -585,82 +514,6 @@ export const Hero12: IBlock = {
               "font-size": "32px",
             },
           },
-          {
-            stat_box: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "justify-content": "center",
-              "padding-top": "2rem",
-              "padding-bottom": "2rem",
-              "padding-left": "2rem",
-              "padding-right": "2rem",
-              "border-bottom-width": "1px",
-              "border-color": "#e5e7eb",
-            },
-            number: {
-              color: "#D47330",
-              "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
-            },
-            label: {
-              color: "#6b7280",
-              "font-size": "sm",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
-            },
-          },
-          {
-            stat_box: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "justify-content": "center",
-              "padding-top": "2rem",
-              "padding-bottom": "2rem",
-              "padding-left": "2rem",
-              "padding-right": "2rem",
-              "border-right-width": "1px",
-              "border-color": "#e5e7eb",
-            },
-            number: {
-              color: "#D47330",
-              "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
-            },
-            label: {
-              color: "#6b7280",
-              "font-size": "sm",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
-            },
-          },
-          {
-            stat_box: {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "justify-content": "center",
-              "padding-top": "2rem",
-              "padding-bottom": "2rem",
-              "padding-left": "2rem",
-              "padding-right": "2rem",
-            },
-            number: {
-              color: "#D47330",
-              "font-size": "4xl",
-              "font-weight": "600",
-              "margin-bottom": "0.5rem",
-            },
-            label: {
-              color: "#6b7280",
-              "font-size": "sm",
-              "text-transform": "uppercase",
-              "letter-spacing": "0.05em",
-            },
-          },
         ],
         header_container: {
           display: "flex",
@@ -706,6 +559,72 @@ export const Hero12: IBlock = {
             level: 1,
           },
         },
+        stats: [
+          {
+            number: {
+              selectedVariants: {},
+            },
+            label: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            stat_box: {
+              selectedVariants: {},
+            },
+            number_container: {
+              selectedVariants: {},
+            },
+          },
+          {
+            number: {
+              selectedVariants: {},
+            },
+            label: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            stat_box: {
+              selectedVariants: {},
+            },
+            number_container: {
+              selectedVariants: {},
+            },
+          },
+          {
+            number: {
+              selectedVariants: {},
+            },
+            label: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            stat_box: {
+              selectedVariants: {},
+            },
+            number_container: {
+              selectedVariants: {},
+            },
+          },
+          {
+            number: {
+              selectedVariants: {},
+            },
+            label: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            stat_box: {
+              selectedVariants: {},
+            },
+            number_container: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/hero/hero-12.tsx

@@ -6,12 +6,12 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
-import React from "react";
+import type React from "react";
 
 import type { IHero12Content } from "./hero-12.schema";
 
@@ -42,10 +42,7 @@ const Hero12: React.FC<ILevoBlockBaseProps<IHero12Content>> = ({ content }) => (
           >
             <CarouselContent>
               {(content.images ?? []).map((_, index) => (
-                <CarouselItem
-                  key={`hero-12-image-${index}`}
-                  data-levo_group_item
-                >
+                <CarouselItem key={`hero-12-image-${index}`} data-levo_group_item>
                   <Image elementKey={`images.${index}.image`} alt="Team" />
                 </CarouselItem>
               ))}
@@ -61,7 +58,7 @@ const Hero12: React.FC<ILevoBlockBaseProps<IHero12Content>> = ({ content }) => (
               >
                 <Box elementKey={`stats.${index}.number_container`}>
                   <Icon elementKey={`stats.${index}.icon`} />
-                  <Typography elementKey={`stats.${index}.number`} />
+                  <Heading elementKey={`stats.${index}.number`} />
                 </Box>
                 <Typography elementKey={`stats.${index}.label`} />
               </Box>

package/src/blocks/hero/hero-13.schema.ts

@@ -1,12 +1,29 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "oil1trpqq3syH",
+  filename: "hero-13.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-13-sR8E7jjddc6eT-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   description:
     "<p>Get expert ERP insights, success stories, and growth tips straight to your inbox. No clutter. Just clarity.</p>",
-  title:
-    "Save 100+ hours in Research. Get your Free NetSuite Implementation Guide.",
+  title: "Save 100+ hours in Research. Get your Free NetSuite Implementation Guide.",
 };
 
 export type IHero13Content = typeof DEFAULT_CONTENT;
@@ -100,35 +117,20 @@ export const Hero13: IBlock = {
       title: "Default",
       styles: {
         layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "3xl",
-          "padding-right": "3xl",
-          width: "100%",
           position: "relative",
           "min-height": "600px",
           display: "flex",
           "align-items": "center",
           tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "2xl",
-            "padding-right": "2xl",
             "min-height": "500px",
           },
           mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
             "min-height": "400px",
           },
-          "background-image":
-            'url("https://static.levostg.online/W6OEVMW8/Frame48097095-2EYwP5YZ0Tovp-1920w.webp")',
+          "background-image": `url("${MEDIA.location}")`,
           "background-position": "50% 50%",
           "background-size": "cover",
         },
-
         container: {
           "margin-left": "auto",
           "margin-right": "auto",
@@ -142,16 +144,7 @@ export const Hero13: IBlock = {
             "flex-direction": "column",
           },
         },
-        description: {
-          "font-size": "lg",
-          color: "text-1",
-          "line-height": "1.6",
-          margin: "0",
-          tablet: {
-            "font-size": "base",
-          },
-        },
-
+        description: {},
         form_title: {
           "font-size": "xl",
           "font-weight": 600,
@@ -190,7 +183,6 @@ export const Hero13: IBlock = {
             "padding-right": "base",
           },
         },
-
         textWrapper: {
           width: "55%",
           tablet: {
@@ -232,7 +224,21 @@ export const Hero13: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: "2",
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/hero/hero-13.tsx

@@ -1,9 +1,9 @@
 import {
-  type ILevoBlockBaseProps,
   Box,
   Container,
   Form,
   Heading,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
 } from "@levo-so/studio";