@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/pricing/pricing-1.tsx

@@ -16,7 +16,10 @@ const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({
 }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
-      <Heading elementKey="title" />
+      <Box elementKey="header">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
       <Box elementKey="pricing_cards_levoGroup" data-levo_group>
         {(content.pricing_cards ?? []).map((_, index) => (
           <Box
@@ -50,7 +53,18 @@ const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({
               </Box>
 
               {/* CTA Button */}
-              <Button elementKey={`pricing_cards.${index}.cta`} />
+              <Box
+                elementKey={`pricing_cards.${index}.ctas_levoGroup`}
+                data-levo_group
+              >
+                {content.pricing_cards?.[index]?.ctas?.map((_, ctaIndex) => (
+                  <Button
+                    key={ctaIndex}
+                    elementKey={`pricing_cards.${index}.ctas.${ctaIndex}.cta`}
+                    data-levo_group_item
+                  />
+                ))}
+              </Box>
             </Box>
 
             {/* Features section */}

package/src/blocks/products/products-listing-1.schema.ts

@@ -1,23 +1,104 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA_1 = {
+  id: "iPDjefZlgPh1M",
+  filename: "product-listing-1-1.png",
   kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-1-R6ertNbOMvUa0-1200w.webp 1200w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "XZbHubcwuDQuO",
+  filename: "product-listing-1-2.png",
+  kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-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",
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1920w.webp 1920w",
   },
+  mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "oildArpqXyWvw",
+  filename: "product-listing-1-3.png",
+  kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-3-k5KMbTxRrITlf-1200w.webp 1200w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_4 = {
+  id: "6HgbtxxyDY0T7",
+  filename: "product-listing-1-4.png",
+  kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/product-listing-1-4-T71RynwUbPcTF-1200w.webp 1200w",
+  },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -28,30 +109,31 @@ const DEFAULT_CONTENT = {
   cta_box: null,
   description:
     "Our intelligent, scalable, and user-friendly products leverage AI to enhance performance, automation, and user engagement.",
-  cta: "View More",
+  buttons_levoGroup: null,
+  buttons: [{ button: "View More" }, { button: "Learn More" }],
   products_levoGroup: null,
   products: [
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_1,
       title: "Websites",
       price: "$25.00",
     },
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_2,
       title: "Mobile Apps",
       price: "$25.00",
     },
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_3,
       title: "Chatbots",
       price: "$25.00",
     },
     {
       card: null,
-      image: DEFAULT_IMAGE,
+      image: MEDIA_4,
       title: "Platforms",
       price: "$25.00",
     },
@@ -97,9 +179,17 @@ export const ProductsListing1: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "button_1",
-      label: "Button 1",
-      field_interface: "ButtonWidget",
+      key: "buttons",
+      label: "Buttons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "products",
@@ -135,10 +225,7 @@ export const ProductsListing1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
+        container: {},
         header_box: {
           display: "flex",
           "flex-direction": "column",
@@ -161,9 +248,14 @@ export const ProductsListing1: IBlock = {
           "justify-content": "center",
           "align-items": "center",
         },
-        description: {
-          "max-width": "28rem",
+        description: {},
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          gap: "sm",
         },
+        buttons: Array(2).map(() => ({})),
         products_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -182,7 +274,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -195,7 +286,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -208,7 +298,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -221,7 +310,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -239,28 +327,51 @@ export const ProductsListing1: IBlock = {
           {
             title: {
               selectedVariants: {
-                Heading_Level: "H5",
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
               },
             },
           },
           {
             title: {
               selectedVariants: {
-                Heading_Level: "H5",
+                Heading_Level: "H4",
+              },
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
               },
             },
           },
           {
             title: {
               selectedVariants: {
-                Heading_Level: "H5",
+                Heading_Level: "H4",
+              },
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
               },
             },
           },
           {
             title: {
               selectedVariants: {
-                Heading_Level: "H5",
+                Heading_Level: "H4",
+              },
+            },
+            price: {
+              selectedVariants: {
+                Typography_Variants: "Large",
               },
             },
           },

package/src/blocks/products/products-listing-1.tsx

@@ -20,7 +20,15 @@ const ProductsListing1: React.FC<
         <Heading elementKey="title" />
         <Box elementKey="cta_box">
           <Typography elementKey="description" />
-          <Button elementKey="button_1" />
+          <Box elementKey="buttons_levoGroup" data-levo_group>
+            {(content?.buttons ?? []).map((_, index: number) => (
+              <Button
+                key={`buttons.${index}.button`}
+                elementKey={`buttons.${index}.button`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
       </Box>
       <Box data-levo_group elementKey="products_levoGroup">