@levo-so/blocks 0.1.2 → 0.1.52

package/src/blocks/cards/cards-2.schema.ts

@@ -179,6 +179,7 @@ export const Cards2: IBlock = {
       styles: {
         layout: {
           width: "100%",
+          "background-color": "background-1",
         },
         container: {
           "padding-top": "10xl",
@@ -201,8 +202,8 @@ export const Cards2: IBlock = {
           "flex-direction": "row",
           "align-items": "center",
           "justify-content": "space-between",
-          "border-radius": "3xl",
-          "background-color": "brand",
+          "border-radius": "base",
+
           "media:max:768px": {
             "flex-direction": "column",
             "padding-left": "none",
@@ -232,25 +233,12 @@ export const Cards2: IBlock = {
           },
         },
         title: {
-          "font-size": "4xl",
-          "font-weight": 700,
           color: "brandForeground",
-          "line-height": "47px",
-          "media:max:768px": {
-            "font-size": "3xl",
-          },
         },
         description: {
-          "font-size": "base",
-          "font-weight": 400,
-          "line-height": 1.5,
           color: "brandForeground",
         },
         button: {
-          "border-radius": "3xl",
-          "font-size": "base",
-          "font-weight": 600,
-          "line-height": 1.5,
           width: "fit-content",
           "background-color": "brandSecondary",
           color: "brandSecondaryForeground",
@@ -261,7 +249,7 @@ export const Cards2: IBlock = {
         image_desktop: {
           width: "auto",
           "align-self": "end",
-          "border-radius": "3xl",
+          "border-radius": "base",
           "object-fit": "contain",
           display: "flex",
           "media:max:640px": {
@@ -287,7 +275,16 @@ export const Cards2: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };

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

@@ -87,7 +87,7 @@ export const Cards3: IBlock = {
     {
       key: "main_title",
       label: "Main Title",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "description",
@@ -118,7 +118,7 @@ export const Cards3: IBlock = {
         {
           key: "number",
           label: "Number",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "label",
@@ -192,12 +192,8 @@ export const Cards3: IBlock = {
           },
         },
         main_title: {
-          "font-size": "5xl",
-          "font-weight": "700",
           color: "text-1",
-          "line-height": "1.2",
           mobile: {
-            "font-size": "3xl",
             filter: "none",
             width: "100%",
             "text-align": "center",
@@ -221,7 +217,7 @@ export const Cards3: IBlock = {
         hero_image: {
           width: "100%",
           height: "500px",
-          "border-radius": "lg",
+          "border-radius": "base",
           filter: "none",
           "object-fit": "cover",
           "margin-top": "8xl",
@@ -260,21 +256,11 @@ export const Cards3: IBlock = {
           "text-align": "center",
         },
         "stats_cards.$.number": {
-          "font-size": "4xl",
-          "font-weight": "700",
           color: "text-1",
           "margin-bottom": "xs",
-          mobile: {
-            "font-size": "3xl",
-          },
         },
         "stats_cards.$.label": {
-          "font-size": "base",
-          "font-weight": "500",
           color: "text-2",
-          mobile: {
-            "font-size": "sm",
-          },
         },
         "stats_cards.$.separator": {
           width: "1px",
@@ -300,9 +286,7 @@ export const Cards3: IBlock = {
               },
             },
             number: {
-              "font-size": "5xl",
               filter: "none",
-              "font-weight": 700,
               mobile: {
                 filter: "none",
                 "text-align": "center",
@@ -310,14 +294,12 @@ export const Cards3: IBlock = {
             },
             label: {
               filter: "none",
-              "font-weight": 500,
             },
           },
           {
             number: {
               filter: "none",
-              "font-size": "5xl",
-              "font-weight": 700,
+
               mobile: {
                 filter: "none",
                 "text-align": "center",
@@ -344,8 +326,7 @@ export const Cards3: IBlock = {
           {
             number: {
               filter: "none",
-              "font-size": "5xl",
-              "font-weight": 700,
+
               mobile: {
                 filter: "none",
                 "text-align": "center",
@@ -359,7 +340,16 @@ export const Cards3: IBlock = {
         ],
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        main_title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };

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

@@ -72,25 +72,25 @@ const DEFAULT_CONTENT = {
     kind: "custom",
     data: {
       id: "UpLVWyg9E9QC",
-      location: "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs.png",
+      location: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs.png",
       mimetype: "image/png",
       kind: "image",
       srcset: {
         "1080w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
         "1200w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
         "1920w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
         "320w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
         "640w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
         "750w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
         "828w":
-          "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
-        path: "https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-320w.webp 320w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-750w.webp 750w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-640w.webp 640w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp 1200w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp 1920w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-828w.webp 828w, https://space.levo.in.net/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp 1080w",
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
+        path: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp 1080w",
       },
     },
   },
@@ -280,22 +280,11 @@ export const Cards4: IBlock = {
           filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
         },
         main_title: {
-          "font-size": "5xl",
-          "font-weight": "700",
           color: "text-1",
-          "line-height": "1.2",
-          tablet: {
-            "font-size": "3xl",
-          },
-          mobile: {
-            "font-size": "2xl",
-          },
           filter: "none",
         },
         header_button: {
           color: "text-3",
-          "font-size": "base",
-          "font-weight": "500",
           display: "flex",
           "align-items": "center",
           "column-gap": "xs",
@@ -321,8 +310,6 @@ export const Cards4: IBlock = {
           {
             title: {
               filter: "none",
-              "font-size": "3xl",
-              "font-weight": 700,
             },
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
@@ -332,7 +319,7 @@ export const Cards4: IBlock = {
               "padding-bottom": "4xl",
               "padding-left": "4xl",
               "padding-right": "4xl",
-              "border-radius": "xl",
+              "border-radius": "base",
               mobile: {
                 filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
                 "padding-top": "xl",
@@ -350,7 +337,6 @@ export const Cards4: IBlock = {
             },
             details: {
               filter: "none",
-              "font-size": "base",
             },
             ctas_levoGroup: {
               filter: "none",
@@ -378,13 +364,11 @@ export const Cards4: IBlock = {
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
             ],
@@ -392,8 +376,6 @@ export const Cards4: IBlock = {
           {
             title: {
               filter: "none",
-              "font-size": "3xl",
-              "font-weight": 700,
             },
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
@@ -403,7 +385,7 @@ export const Cards4: IBlock = {
               "padding-bottom": "4xl",
               "padding-left": "4xl",
               "padding-right": "4xl",
-              "border-radius": "xl",
+              "border-radius": "base",
               mobile: {
                 filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
                 "padding-top": "xl",
@@ -421,7 +403,6 @@ export const Cards4: IBlock = {
             },
             details: {
               filter: "none",
-              "font-size": "base",
             },
             ctas_levoGroup: {
               filter: "none",
@@ -449,13 +430,11 @@ export const Cards4: IBlock = {
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
             ],
@@ -463,8 +442,6 @@ export const Cards4: IBlock = {
           {
             title: {
               filter: "none",
-              "font-size": "3xl",
-              "font-weight": 700,
             },
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
@@ -474,7 +451,7 @@ export const Cards4: IBlock = {
               "padding-bottom": "4xl",
               "padding-left": "4xl",
               "padding-right": "4xl",
-              "border-radius": "xl",
+              "border-radius": "base",
               mobile: {
                 filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
                 "padding-top": "xl",
@@ -492,7 +469,6 @@ export const Cards4: IBlock = {
             },
             details: {
               filter: "none",
-              "font-size": "base",
             },
             ctas_levoGroup: {
               filter: "none",
@@ -520,13 +496,11 @@ export const Cards4: IBlock = {
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
             ],
@@ -534,8 +508,6 @@ export const Cards4: IBlock = {
           {
             title: {
               filter: "none",
-              "font-size": "3xl",
-              "font-weight": 700,
             },
             card: {
               filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
@@ -545,7 +517,7 @@ export const Cards4: IBlock = {
               "padding-bottom": "4xl",
               "padding-left": "4xl",
               "padding-right": "4xl",
-              "border-radius": "xl",
+              "border-radius": "base",
               mobile: {
                 filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
                 "padding-top": "xl",
@@ -563,7 +535,6 @@ export const Cards4: IBlock = {
             },
             details: {
               filter: "none",
-              "font-size": "base",
             },
             ctas_levoGroup: {
               filter: "none",
@@ -591,13 +562,11 @@ export const Cards4: IBlock = {
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
               {
                 button: {
                   filter: "none",
-                  "border-radius": "3xl",
                 },
               },
             ],
@@ -621,6 +590,15 @@ export const Cards4: IBlock = {
       },
       content: DEFAULT_CONTENT,
       config: {
+        main_title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+
         "cards.0.ctas.0.button": {
           selectedVariants: {
             Button_Variants: "Primary",

package/src/blocks/cards/cards-4.tsx

@@ -1,50 +1,50 @@
 import {
-    Box,
-    Button,
-    Container,
-    Heading,
-    type ILevoBlockBaseProps,
-    Section,
-    Typography,
+  Box,
+  Button,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import React from "react";
 
 import type { ICards4Content } from "./cards-4.schema";
 
 const Cards4: React.FC<ILevoBlockBaseProps<ICards4Content>> = ({ content }) => (
-    <Section elementKey="layout">
-        <Container elementKey="container">
-            <Box elementKey="header_section">
-                <Heading elementKey="main_title" />
-                <Button elementKey="header_button" />
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_section">
+        <Heading elementKey="main_title" />
+        <Button elementKey="header_button" />
+      </Box>
+      <Box elementKey="grid_levoGroup" data-levo_group>
+        {(content?.grid ?? []).map((_: any, index: number) => (
+          <Box
+            key={`cards-4-${index}`}
+            data-levo_group_item
+            elementKey={`grid.${index}.card`}
+          >
+            <Box elementKey={`grid.${index}.content_wrapper`}>
+              <Heading elementKey={`grid.${index}.title`} />
+              <Typography elementKey={`grid.${index}.details`} />
             </Box>
-            <Box elementKey="grid_levoGroup" data-levo_group>
-                {(content?.grid ?? []).map((_: any, index: number) => (
-                    <Box
-                        key={`cards-4-${index}`}
-                        data-levo_group_item
-                        elementKey={`grid.${index}.card`}
-                    >
-                        <Box elementKey={`grid.${index}.content_wrapper`}>
-                            <Heading elementKey={`grid.${index}.title`} />
-                            <Typography elementKey={`grid.${index}.details`} />
-                        </Box>
-                        <Box elementKey={`grid.${index}.ctas_levoGroup`} data-levo_group>
-                            {(content?.grid?.[index]?.ctas ?? []).map(
-                                (_: any, ctaIndex: number) => (
-                                    <Button
-                                        key={`cta-${ctaIndex}`}
-                                        data-levo_group_item
-                                        elementKey={`grid.${index}.ctas.${ctaIndex}.button`}
-                                    />
-                                ),
-                            )}
-                        </Box>
-                    </Box>
-                ))}
+            <Box elementKey={`grid.${index}.ctas_levoGroup`} data-levo_group>
+              {(content?.grid?.[index]?.ctas ?? []).map(
+                (_: any, ctaIndex: number) => (
+                  <Button
+                    key={`cta-${ctaIndex}`}
+                    data-levo_group_item
+                    elementKey={`grid.${index}.ctas.${ctaIndex}.button`}
+                  />
+                ),
+              )}
             </Box>
-        </Container>
-    </Section>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
 );
 
-export default Cards4;
+export default Cards4;

package/src/blocks/cards/cards-5.schema.ts

@@ -174,13 +174,13 @@ export const Cards5: IBlock = {
           width: "100%",
           height: "100%",
           "object-fit": "cover",
-          "border-radius": "lg",
+          "border-radius": "base",
         },
         right_section: {
           flex: "1",
           position: "relative",
           "min-height": "400px",
-          "border-radius": "lg",
+          "border-radius": "base",
           overflow: "hidden",
         },
         background_image: {
@@ -197,17 +197,16 @@ export const Cards5: IBlock = {
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          "background-color": "background-1",
           "padding-top": "xl",
           "padding-bottom": "xl",
           "padding-left": "lg",
           "padding-right": "lg",
-          "border-radius": "lg",
-          "box-shadow":
-            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+          "border-radius": "base",
+          "box-shadow": "default",
           "z-index": "2",
           "text-align": "center",
           "max-width": "320px",
+          "background-color": "background-2",
           width: "90%",
           mobile: {
             "max-width": "280px",
@@ -218,47 +217,29 @@ export const Cards5: IBlock = {
           },
         },
         title: {
-          "font-size": "2xl",
-          "font-weight": "700",
           color: "text-1",
+          "font-size": "base",
           "margin-bottom": "base",
-          "line-height": "1.3",
-          mobile: {
-            "font-size": "xl",
-          },
         },
         description: {
-          "font-size": "base",
           color: "text-2",
           "margin-bottom": "lg",
-          "line-height": "1.6",
           mobile: {
-            "font-size": "sm",
             "margin-bottom": "base",
           },
         },
-        cta: {
-          "background-color": "background-2",
-          color: "text-1",
-          "padding-top": "sm",
-          "padding-bottom": "sm",
-          "padding-left": "lg",
-          "padding-right": "lg",
-          "border-radius": "base",
-          "font-weight": "600",
-          border: "none",
-          cursor: "pointer",
-          mobile: {
-            "padding-top": "xs",
-            "padding-bottom": "xs",
-            "padding-left": "base",
-            "padding-right": "base",
-            "font-size": "sm",
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
           },
         },
       },
-      content: DEFAULT_CONTENT,
-      config: {},
     },
   ],
 };