@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/content/content-6.tsx

@@ -45,7 +45,20 @@ const Content6: React.FC<ILevoBlockBaseProps<IContent6Content>> = ({
                 <Typography elementKey={`companies.${index}.location_header`} />
                 <Typography elementKey={`companies.${index}.location_value`} />
               </Box>
-              <Button elementKey={`companies.${index}.cta`} />
+              <Box
+                elementKey={`companies.${index}.ctas_levoGroup`}
+                data-levo_group
+              >
+                {(content?.companies?.[index]?.ctas ?? []).map(
+                  (_: any, ctaIndex: number) => (
+                    <Button
+                      key={`companies.${index}.ctas.${ctaIndex}.cta`}
+                      elementKey={`companies.${index}.ctas.${ctaIndex}.cta`}
+                      data-levo_group_item
+                    />
+                  )
+                )}
+              </Box>
             </Box>
             {index < (content.companies?.length ?? 0) - 1 && (
               <Box
@@ -56,6 +69,15 @@ const Content6: React.FC<ILevoBlockBaseProps<IContent6Content>> = ({
           </React.Fragment>
         ))}
       </Box>
+      <Box elementKey={`bottom_ctas_levoGroup`} data-levo_group>
+        {(content?.bottom_ctas ?? []).map((_: any, index: number) => (
+          <Button
+            key={`bottom_ctas.${index}.bottom_cta`}
+            elementKey={`bottom_ctas.${index}.bottom_cta`}
+            data-levo_group_item
+          />
+        ))}
+      </Box>
     </Container>
   </Section>
 );

package/src/blocks/content/content-7.schema.ts

@@ -5,7 +5,13 @@ const DEFAULT_CONTENT = {
   container: null,
   header_wrapper: null,
   title: "Our Service",
-  view_all_cta: "View All Service",
+  description:
+    "Our Service Our Service Our Service Our Service Our Service Our Service",
+  view_all_ctas_levoGroup: null,
+  view_all_ctas: [
+    { view_all_cta: "View All Service" },
+    { view_all_cta: "Learn More" },
+  ],
   services_levoGroup: null,
   services: [
     {
@@ -41,7 +47,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       service_description:
         "We specialize in building fully customized homes designed around your vision. we ensure every detail—from foundation to finishing—matches your expectations.",
-      cta: "Know More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Know More" }, { cta: "Get Quote" }],
     },
     {
       service_item: null,
@@ -76,7 +83,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       service_description:
         "Beautiful, functional, and personalized designs that bring style and comfort.",
-      cta: "Know More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Know More" }, { cta: "Get Quote" }],
     },
     {
       service_item: null,
@@ -111,7 +119,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       service_description:
         "Upgrade, expand, or redesign your existing space with smart solutions that blend durability.",
-      cta: "Know More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Know More" }, { cta: "Get Quote" }],
     },
     {
       service_item: null,
@@ -146,7 +155,8 @@ const DEFAULT_CONTENT = {
       content_wrapper: null,
       service_description:
         "Seamless execution with clear timelines, cost transparency, and expert supervision.",
-      cta: "Know More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Know More" }, { cta: "Get Quote" }],
     },
   ],
   view_all_cta_rightIcon: {
@@ -187,15 +197,33 @@ export const Content7: IBlock = {
       label: "Header Wrapper",
       field_interface: "BoxWidget",
     },
+    {
+      key: "header_content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
     },
     {
-      key: "view_all_cta",
-      label: "View All CTA",
-      field_interface: "ButtonWidget",
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "view_all_ctas",
+      label: "View All CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "view_all_cta",
+          label: "View All CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "services_levoGroup",
@@ -244,9 +272,23 @@ export const Content7: IBlock = {
           field_interface: "TypographyWidget",
         },
         {
-          key: "cta",
-          label: "CTA Button",
-          field_interface: "ButtonWidget",
+          key: "ctas",
+          label: "CTA Buttons",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Group of call-to-action buttons for service details and quotes",
+            min_items: 1,
+            max_items: 3,
+          },
         },
       ],
     },
@@ -256,30 +298,8 @@ export const Content7: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "background-color": "var(--color-background-secondary)",
-          "padding-top": "48px",
-          "padding-bottom": "48px",
-          "padding-left": "48px",
-          "padding-right": "48px",
-          tablet: {
-            "padding-top": "32px",
-            "padding-bottom": "32px",
-            "padding-left": "24px",
-            "padding-right": "24px",
-          },
-          mobile: {
-            "padding-top": "24px",
-            "padding-bottom": "24px",
-            "padding-left": "16px",
-            "padding-right": "16px",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         header_wrapper: {
           display: "flex",
           "justify-content": "space-between",
@@ -296,10 +316,11 @@ export const Content7: IBlock = {
           },
         },
         title: {},
-        view_all_cta: {
+        view_all_ctas_levoGroup: {
           display: "flex",
           "column-gap": "xs",
         },
+        view_all_ctas: Array(2).map(() => ({})),
         services_levoGroup: {
           display: "flex",
           "flex-direction": "column",
@@ -339,16 +360,7 @@ export const Content7: IBlock = {
               },
             },
             service_title: {
-              "font-size": "24px",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
-              mobile: {
-                "font-size": "18px",
-              },
+              "font-weight": 600,
             },
             right_container: {
               "flex-grow": "1",
@@ -388,20 +400,22 @@ export const Content7: IBlock = {
               "flex-direction": "column",
               "row-gap": "16px",
             },
-            service_description: {
-              "font-size": "16px",
-              color: "text-2",
-              "line-height": "1.6",
-              tablet: {
-                "font-size": "14px",
-              },
-              mobile: {
-                "font-size": "14px",
-              },
-            },
-            cta: {
-              width: "fit-content",
+            service_description: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "xs",
+              "row-gap": "xs",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  width: "fit-content",
+                },
+              })),
           },
           {
             service_item: {
@@ -436,16 +450,7 @@ export const Content7: IBlock = {
               },
             },
             service_title: {
-              "font-size": "24px",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
-              mobile: {
-                "font-size": "18px",
-              },
+              "font-weight": 600,
             },
             right_container: {
               "flex-grow": "1",
@@ -485,20 +490,22 @@ export const Content7: IBlock = {
               "flex-direction": "column",
               "row-gap": "16px",
             },
-            service_description: {
-              "font-size": "16px",
-              color: "text-2",
-              "line-height": "1.6",
-              tablet: {
-                "font-size": "14px",
-              },
-              mobile: {
-                "font-size": "14px",
-              },
-            },
-            cta: {
-              width: "fit-content",
+            service_description: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "xs",
+              "row-gap": "xs",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  width: "fit-content",
+                },
+              })),
           },
           {
             service_item: {
@@ -533,16 +540,7 @@ export const Content7: IBlock = {
               },
             },
             service_title: {
-              "font-size": "24px",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
-              mobile: {
-                "font-size": "18px",
-              },
+              "font-weight": 600,
             },
             right_container: {
               "flex-grow": "1",
@@ -582,20 +580,22 @@ export const Content7: IBlock = {
               "flex-direction": "column",
               "row-gap": "16px",
             },
-            service_description: {
-              "font-size": "16px",
-              color: "text-2",
-              "line-height": "1.6",
-              tablet: {
-                "font-size": "14px",
-              },
-              mobile: {
-                "font-size": "14px",
-              },
-            },
-            cta: {
-              width: "fit-content",
+            service_description: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "xs",
+              "row-gap": "xs",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  width: "fit-content",
+                },
+              })),
           },
           {
             service_item: {
@@ -604,6 +604,7 @@ export const Content7: IBlock = {
               "column-gap": "48px",
               "padding-top": "32px",
               "padding-bottom": "32px",
+              "border-bottom": "1px solid var(--color-border)",
               tablet: {
                 "column-gap": "24px",
                 "padding-top": "24px",
@@ -629,16 +630,7 @@ export const Content7: IBlock = {
               },
             },
             service_title: {
-              "font-size": "24px",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
-              mobile: {
-                "font-size": "18px",
-              },
+              "font-weight": 600,
             },
             right_container: {
               "flex-grow": "1",
@@ -678,20 +670,22 @@ export const Content7: IBlock = {
               "flex-direction": "column",
               "row-gap": "16px",
             },
-            service_description: {
-              "font-size": "16px",
-              color: "text-2",
-              "line-height": "1.6",
-              tablet: {
-                "font-size": "14px",
-              },
-              mobile: {
-                "font-size": "14px",
-              },
-            },
-            cta: {
-              width: "fit-content",
+            service_description: {},
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "xs",
+              "row-gap": "xs",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  width: "fit-content",
+                },
+              })),
           },
         ],
         view_all_cta_rightIcon: {
@@ -707,16 +701,62 @@ export const Content7: IBlock = {
             Heading_Level: "H2",
           },
         },
-        view_all_cta: {
-          selectedVariants: {
-            Button_Variants: "Ghost",
-          },
+        view_all_ctas: Array(2).map(() => ({
+          selectedVariants: {},
           button_icons: {
             right: {
               enabled: true,
             },
+            left: {
+              enabled: true,
+            },
           },
-        },
+        })),
+        services: [
+          {
+            service_title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            service_description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            service_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            service_description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            service_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            service_description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            service_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            service_description: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/content/content-7.tsx

@@ -18,8 +18,19 @@ const Content7: React.FC<ILevoBlockBaseProps<IContent7Content>> = ({
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_wrapper">
-        <Heading elementKey="title" />
-        <Button elementKey="view_all_cta" />
+        <Box elementKey="header_content">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="view_all_ctas_levoGroup" data-levo_group>
+          {(content?.view_all_ctas ?? []).map((_: any, index: number) => (
+            <Button
+              key={`view_all_ctas.${index}.view_all_cta`}
+              elementKey={`view_all_ctas.${index}.view_all_cta`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
       </Box>
       <Box elementKey="services_levoGroup" data-levo_group>
         {(content.services ?? []).map((_: any, index: number) => (
@@ -40,7 +51,20 @@ const Content7: React.FC<ILevoBlockBaseProps<IContent7Content>> = ({
                 <Typography
                   elementKey={`services.${index}.service_description`}
                 />
-                <Button elementKey={`services.${index}.cta`} />
+                <Box
+                  elementKey={`services.${index}.ctas_levoGroup`}
+                  data-levo_group
+                >
+                  {(content?.services?.[index]?.ctas ?? []).map(
+                    (_: any, ctaIndex: number) => (
+                      <Button
+                        key={`services.${index}.ctas.${ctaIndex}.cta`}
+                        elementKey={`services.${index}.ctas.${ctaIndex}.cta`}
+                        data-levo_group_item
+                      />
+                    ),
+                  )}
+                </Box>
               </Box>
             </Box>
           </Box>

package/src/blocks/content/content-8.schema.ts

@@ -7,7 +7,15 @@ const DEFAULT_CONTENT = {
   icon_wrapper: null,
   description:
     "Transform your business with our comprehensive platform designed for modern enterprises seeking growth and efficiency.",
-  cta: "Get Started",
+  content_ctas_levoGroup: null,
+  content_ctas: [
+    {
+      cta: "Get Started",
+    },
+    {
+      cta: "Learn More",
+    },
+  ],
   icon: {
     kind: "icon",
     data: {
@@ -62,9 +70,17 @@ export const Content8: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
+      key: "content_ctas",
+      label: "Content CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
   ],
   layouts: [
@@ -73,20 +89,12 @@ export const Content8: IBlock = {
       title: "Default",
       styles: {
         layout: {
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "none",
-          "padding-right": "none",
           "background-color": "background-2",
         },
         container: {
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "justify-content": "space-between",
           "align-items": "center",
-          "padding-left": "none",
-          "padding-right": "none",
         },
         inner_container: {
           display: "flex",
@@ -110,16 +118,18 @@ export const Content8: IBlock = {
         },
         description: {
           color: "text-1",
-          "font-size": "lg",
-          "line-height": "1.6",
           "max-width": "600px",
-          "margin-left": "auto",
-          "margin-right": "auto",
         },
         cta: {},
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+      },
     },
   ],
 };