@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,29 +1,18 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Button,
-  Container,
-  Heading,
-  Icon,
-  Section,
-  Typography,
-} from "@levo-so/studio";
+import { Box, Button, Container, Heading, Icon, Section, Typography } from "@levo-so/studio";
 
 import type { IPricing1Content } from "./pricing-1.schema";
 
-const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({
-  content,
-}) => (
+const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({ content }) => (
   <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
-            key={index}
-            data-levo_group_item
-            elementKey={`pricing_cards.${index}.card`}
-          >
+          <Box key={index} data-levo_group_item elementKey={`pricing_cards.${index}.card`}>
             {/* Title and Badge Container */}
             <Box elementKey={`pricing_cards.${index}.title_badge_container`}>
               {/* Badge for popular plans */}
@@ -35,9 +24,7 @@ const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({
             </Box>
 
             {/* Primary Content Container */}
-            <Box
-              elementKey={`pricing_cards.${index}.primary_content_container`}
-            >
+            <Box elementKey={`pricing_cards.${index}.primary_content_container`}>
               {/* Plan description */}
               <Typography elementKey={`pricing_cards.${index}.description`} />
 
@@ -50,32 +37,35 @@ 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 */}
             <Box elementKey={`pricing_cards.${index}.features_wrapper`}>
               <Heading elementKey={`pricing_cards.${index}.features_title`} />
-              <Box
-                elementKey={`pricing_cards.${index}.features_levoGroup`}
-                data-levo_group
-              >
-                {(content.pricing_cards?.[index]?.features ?? []).map(
-                  (_, featureIndex) => (
-                    <Box
-                      key={featureIndex}
-                      data-levo_group_item
-                      elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_container`}
-                    >
-                      <Icon
-                        elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_item`}
-                      />
-                      <Typography
-                        elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_text`}
-                      />
-                    </Box>
-                  ),
-                )}
+              <Box elementKey={`pricing_cards.${index}.features_levoGroup`} data-levo_group>
+                {(content.pricing_cards?.[index]?.features ?? []).map((_, featureIndex) => (
+                  <Box
+                    key={featureIndex}
+                    data-levo_group_item
+                    elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_container`}
+                  >
+                    <Icon
+                      elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_item`}
+                    />
+                    <Typography
+                      elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_text`}
+                    />
+                  </Box>
+                ))}
               </Box>
             </Box>
           </Box>

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

@@ -1,23 +1,72 @@
 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://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/product-listing-1-2-OaJNDLqfjAZ3o-1200w.webp",
+    "1920w": "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://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",
+    "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 +77,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 +147,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 +193,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 +216,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 +242,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -195,7 +254,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -208,7 +266,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -221,7 +278,6 @@ export const ProductsListing1: IBlock = {
               width: "100%",
               display: "block",
             },
-
             price: {
               "margin-top": "4xs",
             },
@@ -239,28 +295,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

@@ -1,35 +1,37 @@
 import {
-  type ILevoBlockBaseProps,
+  Box,
   Button,
+  Container,
   Heading,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IProductsListing1Content } from "./products-listing-1.schema";
 
-const ProductsListing1: React.FC<
-  ILevoBlockBaseProps<IProductsListing1Content>
-> = ({ content }) => (
+const ProductsListing1: React.FC<ILevoBlockBaseProps<IProductsListing1Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_box">
         <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">
         {(content.products ?? []).map((_, index) => (
-          <Box
-            data-levo_group_item
-            elementKey={`products.${index}.card`}
-            key={index}
-          >
+          <Box data-levo_group_item elementKey={`products.${index}.card`} key={index}>
             <Image
               alt="product image"
               elementKey={`products.${index}.image`}