@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,5 +1,23 @@
 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,
@@ -91,6 +109,7 @@ const DEFAULT_CONTENT = {
       separator: null,
     },
   ],
+  caption: null,
 };
 
 export type IHero11Content = typeof DEFAULT_CONTENT;
@@ -150,6 +169,16 @@ export const Hero11: IBlock = {
         max_characters: 180,
       },
     },
+    {
+      key: "caption",
+      label: "Caption",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Caption text",
+        min_characters: 80,
+        max_characters: 180,
+      },
+    },
     {
       key: "cta",
       label: "Call to Action",
@@ -216,7 +245,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 +290,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 +309,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 +369,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 +405,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 +416,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 +477,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 +511,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -508,7 +529,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 +540,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 +586,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 +635,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -630,7 +653,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 +664,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 +710,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 +759,10 @@ export const Hero11: IBlock = {
               },
               filter: "none",
               "justify-content": "start",
+              tablet: {
+                "justify-content": "start",
+                "align-items": "start",
+              },
             },
             icon: {
               width: "48px",
@@ -748,14 +771,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 +788,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 +828,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,11 +855,99 @@ 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

@@ -4,9 +4,9 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
-  type ILevoBlockBaseProps,
 } from "@levo-so/studio";
 import React from "react";
 
@@ -30,27 +30,22 @@ const Hero11: React.FC<ILevoBlockBaseProps<IHero11Content>> = ({ content }) => (
         <Box elementKey="features_levoGroup" data-levo_group>
           {(content.features ?? []).map((_, index) => (
             <React.Fragment key={`hero-10-feature-${index}`}>
-              <Box
-                elementKey={`features.${index}.item_wrapper`}
-                data-levo_group_item
-              >
+              <Box elementKey={`features.${index}.item_wrapper`} data-levo_group_item>
                 <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>
               </Box>
               {index < (content?.features?.length ?? 0) - 1 && (
-                <Box
-                  elementKey={`features.${index}.separator`}
-                  data-levo_group_item
-                />
+                <Box elementKey={`features.${index}.separator`} data-levo_group_item />
               )}
             </React.Fragment>
           ))}
         </Box>
+        <Typography elementKey="caption" />
       </Box>
     </Container>
   </Section>