@levo-so/blocks 0.1.59 → 0.1.60

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

@@ -1,62 +1,49 @@
 import type { IBlock } from "@levo-so/studio";
 
+const DEFAULT_MEDIA = {
+  id: "01TbGtz7hzVKW",
+  filename: "cards-2-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   card_wrapper: null,
   content_wrapper: null,
+  buttons_levoGroup: null,
+  buttons: [
+    {
+      button: "Book A Demo",
+    },
+    {
+      button: "Learn More",
+    },
+  ],
   title: "Achieve More with Less Efforts",
   description:
     "We processes more than 10k job applications every week with 500+ employers. Book a demo to see how we can help you in scaling your placements.",
-  button: "Book A Demo",
-  image_desktop: {
-    id: "7141014160938075687",
-    location:
-      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
-  image_mobile: {
-    id: "7141014160938075687",
-    location:
-      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  image_desktop: DEFAULT_MEDIA,
+  image_mobile: DEFAULT_MEDIA,
 };
 
 export type ICard2Content = typeof DEFAULT_CONTENT;
@@ -128,15 +115,23 @@ export const Cards2: IBlock = {
       },
     },
     {
-      key: "button",
-      label: "Button",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Primary call to action button text, inviting users to book a demo or take the next step. Tone is direct, action-oriented, and concise.",
-        min_characters: 10,
-        max_characters: 24,
-      },
+      key: "buttons",
+      label: "Card Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "button",
+          label: "Card Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary call to action button text, inviting users to book a demo or take the next step. Tone is direct, action-oriented, and concise.",
+            min_characters: 10,
+            max_characters: 24,
+          },
+        },
+      ],
     },
     {
       key: "image_wrapper",
@@ -178,33 +173,16 @@ export const Cards2: IBlock = {
       key: "default",
       styles: {
         layout: {
-          width: "100%",
-          "background-color": "background-1",
-        },
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "7xl",
-          "padding-right": "7xl",
-          "media:max:480px": {
-            "padding-left": "lg",
-            "padding-right": "lg",
-          },
-          "media:max:768px": {
-            "padding-left": "5xl",
-            "padding-right": "5xl",
-          },
+          "background-color": "brand",
         },
+        container: {},
         card_wrapper: {
           display: "flex",
           "flex-direction": "row",
           "align-items": "center",
           "justify-content": "space-between",
           "border-radius": "base",
-
-          "media:max:768px": {
+          tablet: {
             "flex-direction": "column",
             "padding-left": "none",
             "justify-content": "center",
@@ -219,14 +197,14 @@ export const Cards2: IBlock = {
           "margin-bottom": "7xl",
           "max-width": "36rem",
           "row-gap": "xl",
-          "media:max:768px": {
+          tablet: {
             "row-gap": "xs",
             padding: "2xl",
             "max-width": "none",
             "margin-left": "none",
             "margin-top": "none",
           },
-          "media:max:480px": {
+          mobile: {
             "margin-left": "0",
             "margin-top": "0",
             "margin-bottom": "0",
@@ -238,14 +216,19 @@ export const Cards2: IBlock = {
         description: {
           color: "brandForeground",
         },
-        button: {
-          width: "fit-content",
-          "background-color": "brandSecondary",
-          color: "brandSecondaryForeground",
-          _hover: {
-            opacity: 0.85,
-          },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
         },
+        buttons: Array(2)
+          .fill(0)
+          .map(() => ({
+            button: {},
+          })),
         image_desktop: {
           width: "auto",
           "align-self": "end",
@@ -281,9 +264,21 @@ export const Cards2: IBlock = {
             level: 2,
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H3",
           },
         },
+        buttons: [
+          {
+            button: {
+              selectedVariants: {},
+            },
+          },
+          {
+            button: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -11,14 +11,22 @@ import {
 
 import type { ICard2Content } from "./cards-2.schema";
 
-const Cards2: React.FC<ILevoBlockBaseProps<ICard2Content>> = ({}) => (
+const Cards2: React.FC<ILevoBlockBaseProps<ICard2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="card_wrapper">
         <Box elementKey="content_wrapper">
           <Heading elementKey="title" />
           <Typography elementKey="description" />
-          <Button elementKey="button" />
+          <Box elementKey="buttons_levoGroup" data-levo_group>
+            {(content.buttons ?? []).map((_: any, index: number) => (
+              <Button
+                key={`buttons.${index}.button`}
+                elementKey={`buttons.${index}.button`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
         <Box elementKey="image_wrapper">
           <Image

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

@@ -1,5 +1,30 @@
 import type { IBlock } from "@levo-so/studio";
 
+const IMG = {
+  id: "HXVK4tirkNvhr",
+  filename: "cards-3-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -8,29 +33,7 @@ const DEFAULT_CONTENT = {
   main_title: "Schedule a productivity boost",
   description:
     "Take control of your time and energy with smart planning tools. Build better habits, stay focused, and get more done—every day.",
-  hero_image: {
-    id: "7141014160938075687",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/png",
-    srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
-      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
-    },
-  },
+  hero_image: IMG,
   stats_section: null,
   stats_cards: [
     {
@@ -138,22 +141,8 @@ export const Cards3: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-          "padding-left": "base",
-          "padding-right": "base",
-          "background-color": "background-1",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          mobile: {
-            filter: "none",
-          },
-          filter: "none",
-        },
+        layout: {},
+        container: {},
         hero_section: {
           display: "flex",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -192,26 +181,17 @@ export const Cards3: IBlock = {
           },
         },
         main_title: {
-          color: "text-1",
+          width: "500px",
           mobile: {
-            filter: "none",
             width: "100%",
             "text-align": "center",
           },
-          filter: "none",
-          width: "500px",
         },
         description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
           mobile: {
-            "font-size": "base",
-            filter: "none",
             width: "100%",
             "text-align": "center",
           },
-          filter: "none",
           width: "400px",
         },
         hero_image: {
@@ -286,56 +266,50 @@ export const Cards3: IBlock = {
               },
             },
             number: {
-              filter: "none",
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
-            label: {
-              filter: "none",
-            },
+            label: {},
+            card: {},
           },
           {
             number: {
-              filter: "none",
-
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
             separator: {
               filter: "none",
-              width: "1px",
               height: "100px",
+              width: "1px",
               "background-color": "black",
               mobile: {
                 filter: "none",
                 display: "none",
               },
-              tablet: {
-                filter: "none",
-              },
-            },
-            label: {
-              filter: "none",
-              "font-weight": 500,
             },
+            label: {},
+            card: {},
           },
           {
             number: {
-              filter: "none",
-
               mobile: {
-                filter: "none",
                 "text-align": "center",
               },
             },
-            label: {
+            label: {},
+            separator: {
               filter: "none",
-              "font-weight": 500,
+              height: "100px",
+              width: "1px",
+              "background-color": "black",
+              mobile: {
+                filter: "none",
+                display: "none",
+              },
             },
+            card: {},
           },
         ],
       },
@@ -349,6 +323,37 @@ export const Cards3: IBlock = {
             Heading_Level: "H2",
           },
         },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        stats_cards: [
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+          {
+            label: {
+              selectedVariants: {},
+            },
+            card: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],