@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -1,5 +1,30 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "CISNrrDGAzAU",
+  filename: "hero-4-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -216,7 +241,7 @@ export const Hero11: IBlock = {
         {
           key: "title",
           label: "Title",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
             prompt_description:
               "Feature title displayed prominently. Use clear, action-oriented language (2-4 words).",
@@ -261,8 +286,9 @@ export const Hero11: IBlock = {
       title: "Default",
       styles: {
         layout: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
+          "background-image": `url("${MEDIA?.location}")`,
+          "background-position": "50% 50%",
+          "background-size": "cover",
         },
         container: {},
         content_wrapper: {
@@ -279,21 +305,10 @@ export const Hero11: IBlock = {
           filter: "none",
         },
         title: {
-          color: "text-1",
-          "font-size": "5xl",
-          "font-weight": "700",
-          mobile: {
-            "font-size": "3xl",
-          },
           "max-width": "700px",
         },
         description: {
-          color: "text-2",
-          "font-size": "lg",
           "max-width": "600px",
-          mobile: {
-            "font-size": "base",
-          },
         },
         cta_levoGroup: {
           display: "flex",
@@ -350,11 +365,11 @@ export const Hero11: IBlock = {
                 "align-items": "center",
                 "margin-right": "3xl",
               },
-              "justify-content": "end",
+              "justify-content": "center",
             },
             icon_content_wrapper: {
               display: "flex",
-              "align-items": "start",
+              "align-items": "center",
               "column-gap": "base",
               "text-align": "left",
               mobile: {
@@ -386,7 +401,7 @@ export const Hero11: IBlock = {
             content_wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "xs",
+              "row-gap": "none",
               filter: "none",
               "justify-content": "start",
               "align-items": "start",
@@ -397,23 +412,16 @@ export const Hero11: IBlock = {
               },
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
               mobile: {
                 "text-align": "center",
-                "font-size": "base",
               },
+              "font-weight": 600,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
             cta: {
@@ -465,22 +473,27 @@ export const Hero11: IBlock = {
           {
             item_wrapper: {
               display: "flex",
-              "align-items": "center",
+              "align-items": "end",
               "flex-grow": "1",
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                "justify-content": "center",
-                "align-items": "end",
+                filter: "none",
+                "border-bottom": "1px s",
+                "justify-content": "start",
+                "align-items": "start",
               },
               tablet: {
                 filter: "none",
+                "justify-content": "center",
+                "align-items": "center",
+                "margin-right": "3xl",
               },
               "justify-content": "center",
             },
             icon_content_wrapper: {
               display: "flex",
-              "align-items": "start",
+              "align-items": "center",
               "column-gap": "base",
               "text-align": "left",
               mobile: {
@@ -494,6 +507,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -508,7 +525,7 @@ export const Hero11: IBlock = {
             content_wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "xs",
+              "row-gap": "none",
               filter: "none",
               "justify-content": "start",
               "align-items": "start",
@@ -519,38 +536,28 @@ export const Hero11: IBlock = {
               },
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
               mobile: {
                 "text-align": "center",
-                "font-size": "base",
               },
+              "font-weight": 600,
             },
             description: {
-              color: "text-2",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
             cta: {
-              display: "flex",
-              "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
               "background-color": "white",
               color: "text-1",
-              cursor: "pointer",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "padding-left": "none",
               "padding-right": "sm",
-              "border-color": "border",
+              "border-radius": "base",
               "border-width": "1px",
-              "border-style": "solid",
+              "border-color": "border",
               "text-decoration": "none",
               "margin-top": "xs",
               mobile: {
@@ -575,34 +582,42 @@ export const Hero11: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
               },
               filter: "none",
               tablet: {
                 filter: "none",
                 display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
           {
             item_wrapper: {
               display: "flex",
-              "align-items": "center",
+              "align-items": "end",
               "flex-grow": "1",
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
+                filter: "none",
+                "border-bottom": "1px s",
                 "justify-content": "start",
                 "align-items": "start",
               },
-              "justify-content": "center",
               tablet: {
+                filter: "none",
                 "justify-content": "center",
                 "align-items": "center",
+                "margin-right": "3xl",
               },
+              "justify-content": "center",
             },
             icon_content_wrapper: {
               display: "flex",
-              "align-items": "start",
+              "align-items": "center",
               "column-gap": "base",
               "text-align": "left",
               mobile: {
@@ -616,6 +631,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -630,7 +649,7 @@ export const Hero11: IBlock = {
             content_wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "xs",
+              "row-gap": "none",
               filter: "none",
               "justify-content": "start",
               "align-items": "start",
@@ -641,40 +660,28 @@ export const Hero11: IBlock = {
               },
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
               mobile: {
                 "text-align": "center",
-                "font-size": "base",
               },
+              "font-weight": 600,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
             cta: {
-              display: "flex",
-              "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
               "background-color": "white",
               color: "text-1",
-              cursor: "pointer",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "padding-left": "none",
               "padding-right": "sm",
-              "border-color": "border",
+              "border-radius": "base",
               "border-width": "1px",
-              "border-style": "solid",
+              "border-color": "border",
               "text-decoration": "none",
               "margin-top": "xs",
               mobile: {
@@ -699,34 +706,42 @@ export const Hero11: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
               },
               filter: "none",
               tablet: {
                 filter: "none",
                 display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
           {
             item_wrapper: {
               display: "flex",
-              "align-items": "start",
+              "align-items": "end",
               "flex-grow": "1",
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                "justify-content": "end",
-                "align-items": "end",
+                filter: "none",
+                "border-bottom": "1px s",
+                "justify-content": "start",
+                "align-items": "start",
               },
-              "justify-content": "start",
               tablet: {
+                filter: "none",
                 "justify-content": "center",
                 "align-items": "center",
+                "margin-right": "3xl",
               },
+              "justify-content": "center",
             },
             icon_content_wrapper: {
               display: "flex",
-              "align-items": "start",
+              "align-items": "center",
               "column-gap": "base",
               "text-align": "left",
               mobile: {
@@ -740,6 +755,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -748,14 +767,13 @@ export const Hero11: IBlock = {
               mobile: {
                 width: "40px",
                 height: "40px",
-                filter: "none",
               },
               filter: "none",
             },
             content_wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "xs",
+              "row-gap": "none",
               filter: "none",
               "justify-content": "start",
               "align-items": "start",
@@ -766,40 +784,28 @@ export const Hero11: IBlock = {
               },
             },
             title: {
-              color: "text-1",
-              "font-size": "lg",
-              "font-weight": "600",
               mobile: {
                 "text-align": "center",
-                "font-size": "base",
               },
+              "font-weight": 600,
             },
             description: {
-              "font-family": "var(--font-body)",
-              color: "text-2",
-              "line-height": "normal",
               "max-width": "200px",
               mobile: {
                 "max-width": "180px",
                 "text-align": "left",
-                filter: "none",
               },
             },
             cta: {
-              display: "flex",
-              "align-items": "center",
-              "justify-content": "center",
-              "border-radius": "base",
               "background-color": "white",
               color: "text-1",
-              cursor: "pointer",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "padding-left": "none",
               "padding-right": "sm",
-              "border-color": "border",
+              "border-radius": "base",
               "border-width": "1px",
-              "border-style": "solid",
+              "border-color": "border",
               "text-decoration": "none",
               "margin-top": "xs",
               mobile: {
@@ -818,12 +824,21 @@ export const Hero11: IBlock = {
             },
             separator: {
               width: "1px",
-              height: "80px",
+              height: "100px",
               "background-color": "var(--color-border)",
               "margin-left": "xl",
               "margin-right": "xl",
               mobile: {
                 display: "none",
+                filter: "none",
+              },
+              filter: "none",
+              tablet: {
+                filter: "none",
+                display: "none",
+                height: "80px",
+                "margin-left": "none",
+                "margin-right": "none",
               },
             },
           },
@@ -836,12 +851,100 @@ export const Hero11: IBlock = {
             level: 1,
           },
         },
-        features: {
-          title: {
-            heading: {
-              level: 4,
+        features: [
+          {
+            description: {
+              selectedVariants: {},
+            },
+            item_wrapper: {
+              selectedVariants: {},
+            },
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            content_wrapper: {
+              selectedVariants: {},
+            },
+            icon_content_wrapper: {
+              selectedVariants: {},
             },
           },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            item_wrapper: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            content_wrapper: {
+              selectedVariants: {},
+            },
+            icon_content_wrapper: {
+              selectedVariants: {},
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            item_wrapper: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            content_wrapper: {
+              selectedVariants: {},
+            },
+            icon_content_wrapper: {
+              selectedVariants: {},
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            item_wrapper: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            content_wrapper: {
+              selectedVariants: {},
+            },
+            icon_content_wrapper: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
         },
       },
     },

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

@@ -37,7 +37,7 @@ const Hero11: React.FC<ILevoBlockBaseProps<IHero11Content>> = ({ content }) => (
                 <Box elementKey={`features.${index}.icon_content_wrapper`}>
                   <Icon elementKey={`features.${index}.icon`} />
                   <Box elementKey={`features.${index}.content_wrapper`}>
-                    <Typography elementKey={`features.${index}.title`} />
+                    <Heading elementKey={`features.${index}.title`} />
                     <Typography elementKey={`features.${index}.description`} />
                   </Box>
                 </Box>