@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -2,7 +2,6 @@ import type { IBlock } from "@levo-so/studio";
 
 const DEFAULT_CONTENT = {
   layout: null,
-  container: null,
   header_wrapper: null,
   badge_wrapper: null,
   badge_icon: {
@@ -224,7 +223,40 @@ export const Hero3: IBlock = {
     {
       key: "default",
       title: "Default",
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "features.0.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "features.1.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "features.2.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
       content: DEFAULT_CONTENT,
       styles: {
         container: {
@@ -233,59 +265,46 @@ export const Hero3: IBlock = {
           "margin-right": "auto",
           "padding-left": "base",
           "padding-right": "base",
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-          "background-color": "white",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "background-color": "background-1",
         },
         header_wrapper: {
-          "margin-bottom": "7xl",
+          "margin-bottom": "3xl",
         },
         badge_wrapper: {
           display: "inline-flex",
           "align-items": "center",
           gap: "xs",
-          "font-size": "sm",
-          "font-weight": "500",
-          color: "brand",
+          color: "text-2",
         },
         badge_icon: {
-          color: "brand",
+          "border-radius": "base",
         },
         headings_wrapper: {
-          "margin-top": "4xl",
+          "margin-top": "2xl",
           display: "flex",
           "flex-direction": "row",
           "justify-content": "space-between",
           "align-items": "start",
-          gap: "xl",
+          gap: "lg",
           mobile: {
             "flex-direction": "column",
           },
         },
         title: {
-          "font-size": "4xl",
-          "font-weight": "700",
           color: "text-1",
-          "line-height": "1.2",
           "max-width": "36rem",
-          mobile: {
-            "font-size": "3xl",
-          },
         },
         description: {
           color: "text-2",
-          "font-size": "sm",
           "max-width": "28rem",
-          "margin-top": "3xs",
-          mobile: {
-            "font-size": "base",
-            "margin-top": "xs",
-          },
+          "margin-top": "xs",
         },
         features_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(3, minmax(0, 1fr))",
-          gap: "xl",
+          gap: "lg",
           tablet: {
             "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           },
@@ -296,17 +315,15 @@ export const Hero3: IBlock = {
         features: [
           {
             card: {
-              "background-color": "white",
-              "border-radius": "xl",
+              "background-color": "background-1",
+              "border-radius": "base",
               border: "1px solid",
-              "border-color": "background-3",
-              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-              padding: "xl",
+              "border-color": "border",
+              "box-shadow": "default",
+              padding: "lg",
               display: "flex",
               "flex-direction": "column",
               "align-items": "start",
-              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-              mobile: {},
             },
             icon_wrapper: {
               display: "flex",
@@ -314,37 +331,32 @@ export const Hero3: IBlock = {
               "justify-content": "center",
               height: "3rem",
               width: "3rem",
-              "border-radius": "full",
+              "border-radius": "base",
               "background-color": "background-2",
-              "margin-bottom": "lg",
+              "margin-bottom": "base",
             },
             icon: {
               color: "brand",
             },
             title: {
-              "font-weight": "600",
-              "font-size": "lg",
               color: "text-1",
-              "margin-bottom": "base",
+              "margin-bottom": "xs",
             },
             description: {
               color: "text-2",
-              "font-size": "sm",
             },
           },
           {
             card: {
-              "background-color": "white",
-              "border-radius": "xl",
+              "background-color": "background-1",
+              "border-radius": "base",
               border: "1px solid",
-              "border-color": "background-3",
-              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-              padding: "xl",
+              "border-color": "border",
+              "box-shadow": "default",
+              padding: "lg",
               display: "flex",
               "flex-direction": "column",
               "align-items": "start",
-              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-              mobile: {},
             },
             icon_wrapper: {
               display: "flex",
@@ -352,37 +364,32 @@ export const Hero3: IBlock = {
               "justify-content": "center",
               height: "3rem",
               width: "3rem",
-              "border-radius": "full",
+              "border-radius": "base",
               "background-color": "background-2",
-              "margin-bottom": "lg",
+              "margin-bottom": "base",
             },
             icon: {
               color: "brand",
             },
             title: {
-              "font-weight": "600",
-              "font-size": "lg",
               color: "text-1",
-              "margin-bottom": "base",
+              "margin-bottom": "xs",
             },
             description: {
               color: "text-2",
-              "font-size": "sm",
             },
           },
           {
             card: {
-              "background-color": "white",
-              "border-radius": "xl",
+              "background-color": "background-1",
+              "border-radius": "base",
               border: "1px solid",
-              "border-color": "background-3",
-              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-              padding: "xl",
+              "border-color": "border",
+              "box-shadow": "default",
+              padding: "lg",
               display: "flex",
               "flex-direction": "column",
               "align-items": "start",
-              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-              mobile: {},
             },
             icon_wrapper: {
               display: "flex",
@@ -390,22 +397,19 @@ export const Hero3: IBlock = {
               "justify-content": "center",
               height: "3rem",
               width: "3rem",
-              "border-radius": "full",
+              "border-radius": "base",
               "background-color": "background-2",
-              "margin-bottom": "lg",
+              "margin-bottom": "base",
             },
             icon: {
               color: "brand",
             },
             title: {
-              "font-weight": "600",
-              "font-size": "lg",
               color: "text-1",
-              "margin-bottom": "base",
+              "margin-bottom": "xs",
             },
             description: {
               color: "text-2",
-              "font-size": "sm",
             },
           },
         ],

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

@@ -22,7 +22,6 @@ const DEFAULT_IMAGE = {
 
 const DEFAULT_CONTENT = {
   layout: null,
-  container: null,
   slider_dots: null,
   slider_dot: null,
   slides: [
@@ -125,20 +124,19 @@ export const Hero4: IBlock = {
       title: "Default",
       styles: {
         layout: {
-          "padding-left": "3xl",
-          "padding-right": "3xl",
-          "padding-top": "7xl",
-          "padding-bottom": "5xl",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+          "padding-top": "4xl",
+          "padding-bottom": "3xl",
           mobile: {
-            "padding-top": "none",
-            "padding-left": "none",
-            "padding-right": "none",
-            "padding-bottom": "none",
+            "padding-top": "2xl",
+            "padding-left": "base",
+            "padding-right": "base",
+            "padding-bottom": "2xl",
           },
         },
         container: {
           position: "relative",
-          "max-width": "72rem",
           "margin-left": "auto",
           "margin-right": "auto",
         },
@@ -148,15 +146,14 @@ export const Hero4: IBlock = {
           left: "50%",
           transform: "translateX(-50%)",
           display: "flex",
-          "column-gap": "2xs",
+          "column-gap": "xs",
           "align-items": "center",
           "z-index": "20",
-          "padding-top": "4xs",
-          "padding-right": "4xs",
-          "padding-bottom": "4xs",
-          "padding-left": "4xs",
-          "background-color": "text-2",
-          "border-radius": "3xl",
+          "padding-top": "xs",
+          "padding-right": "xs",
+          "padding-bottom": "xs",
+          "padding-left": "xs",
+          "border-radius": "base",
           tablet: {
             bottom: "20px",
           },
@@ -167,8 +164,8 @@ export const Hero4: IBlock = {
         slider_dot: {
           width: "8px",
           height: "8px",
-          "border-radius": "50%",
-          "background-color": "var(--color-brand-secondary)",
+          "border-radius": "base",
+          "background-color": "text-1",
         },
         slides_levoGroup: {
           width: "100%",
@@ -180,44 +177,54 @@ export const Hero4: IBlock = {
               display: "flex",
               "align-items": "end",
               "justify-content": "space-between",
+              "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
-                "padding-left": "6xs",
-                "padding-top": "6xs",
-                "padding-right": "6xs",
-                "row-gap": "4xs",
+                "padding-left": "sm",
+                "padding-top": "sm",
+                "padding-right": "sm",
+                "row-gap": "md",
+                "margin-bottom": "md",
               },
               tablet: {
                 "flex-direction": "column",
                 "align-items": "center",
-                "row-gap": "sm",
+                "row-gap": "lg",
+                "margin-bottom": "lg",
               },
             },
             title: {
-              "font-size": "4xl",
-              "font-weight": "600",
-              "line-height": "1.2",
               "max-width": "42rem",
-              mobile: {
-                "font-size": "3xl",
-              },
+              color: "text-1",
+              "margin-bottom": "md",
               tablet: {
                 "text-align": "center",
-                "font-size": "3xl",
+              },
+              mobile: {
+                "text-align": "center",
               },
             },
+            cta: {
+              "box-shadow": "default",
+            },
             image: {
               width: "100%",
               height: "100%",
               "object-fit": "cover",
               "object-position": "center",
+              "border-radius": "base",
             },
             wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "base",
+              "row-gap": "md",
+              padding: "lg",
+              mobile: {
+                padding: "md",
+                "row-gap": "sm",
+              },
             },
           },
           {
@@ -225,31 +232,51 @@ export const Hero4: IBlock = {
               display: "flex",
               "align-items": "end",
               "justify-content": "space-between",
+              "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "row-gap": "md",
+                "margin-bottom": "md",
+              },
+              tablet: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "row-gap": "lg",
+                "margin-bottom": "lg",
               },
             },
             title: {
-              "font-size": "4xl",
-              "font-weight": "600",
-              "line-height": "1.2",
               "max-width": "42rem",
+              color: "text-1",
+              "margin-bottom": "md",
+              tablet: {
+                "text-align": "center",
+              },
               mobile: {
-                "font-size": "3xl",
+                "text-align": "center",
               },
             },
+            cta: {
+              "box-shadow": "default",
+            },
             image: {
               width: "100%",
               height: "100%",
               "object-fit": "cover",
               "object-position": "center",
+              "border-radius": "base",
             },
             wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "base",
+              "row-gap": "md",
+              padding: "lg",
+              mobile: {
+                padding: "md",
+                "row-gap": "sm",
+              },
             },
           },
           {
@@ -257,31 +284,51 @@ export const Hero4: IBlock = {
               display: "flex",
               "align-items": "end",
               "justify-content": "space-between",
+              "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "row-gap": "md",
+                "margin-bottom": "md",
+              },
+              tablet: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "row-gap": "lg",
+                "margin-bottom": "lg",
               },
             },
             title: {
-              "font-size": "4xl",
-              "font-weight": "600",
-              "line-height": "1.2",
               "max-width": "42rem",
+              color: "text-1",
+              "margin-bottom": "md",
+              tablet: {
+                "text-align": "center",
+              },
               mobile: {
-                "font-size": "3xl",
+                "text-align": "center",
               },
             },
+            cta: {
+              "box-shadow": "default",
+            },
             image: {
               width: "100%",
               height: "100%",
               "object-fit": "cover",
               "object-position": "center",
+              "border-radius": "base",
             },
             wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "base",
+              "row-gap": "md",
+              padding: "lg",
+              mobile: {
+                padding: "md",
+                "row-gap": "sm",
+              },
             },
           },
           {
@@ -289,37 +336,90 @@ export const Hero4: IBlock = {
               display: "flex",
               "align-items": "end",
               "justify-content": "space-between",
+              "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "row-gap": "md",
+                "margin-bottom": "md",
+              },
+              tablet: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "row-gap": "lg",
+                "margin-bottom": "lg",
               },
             },
             title: {
-              "font-size": "4xl",
-              "font-weight": "600",
-              "line-height": "1.2",
               "max-width": "42rem",
+              color: "text-1",
+              "margin-bottom": "md",
+              tablet: {
+                "text-align": "center",
+              },
               mobile: {
-                "font-size": "3xl",
+                "text-align": "center",
               },
             },
+            cta: {
+              "box-shadow": "default",
+            },
             image: {
               width: "100%",
               height: "100%",
               "object-fit": "cover",
               "object-position": "center",
+              "border-radius": "base",
             },
             wrapper: {
               display: "flex",
               "flex-direction": "column",
-              "row-gap": "base",
+              "row-gap": "md",
+              padding: "lg",
+              mobile: {
+                padding: "md",
+                "row-gap": "sm",
+              },
             },
           },
         ],
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        "slides.0.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "slides.1.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "slides.2.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        "slides.3.title": {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
     },
   ],
 };