@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,23 +1,72 @@
 import type { IBlock } from "@levo-so/studio";
 
-const IMAGE_MEDIA = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA_1 = {
+  id: "R6e60NbOMtalw",
+  filename: "features-1-1.png",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-1-1-1d7EKLgEHNI6p-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "jfwWnpeTXvRds",
+  filename: "features-1-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-1-2-A8svq1Bv7gAEI-640w.webp 640w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "zucCxwW4c368T",
+  filename: "features-1-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-1-3-JtaGxEUPSmGKF-1200w.webp 1200w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_4 = {
+  id: "mox8S3I3oM9Gz",
+  filename: "features-1-4.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr.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/features-1-4-R6e6INbOMtpAr-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-1-4-R6e6INbOMtpAr-828w.webp 828w",
   },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -29,51 +78,56 @@ const DEFAULT_CONTENT = {
   cta_wrapper: null,
   description:
     "Empower your financial institution with advanced AI solutions for optimized growth, security, and client satisfaction.",
-  cta_button: "Request a Demo",
+  cta_buttons_levoGroup: null,
+  cta_buttons: [{ cta_button: "Request a Demo" }, { cta_button: "Learn More" }],
   services: [
     {
       card: null,
-      image: IMAGE_MEDIA,
+      image: MEDIA_1,
       content_wrapper: null,
       text_wrapper: null,
       label: "01",
       title: "Custom Financial Platforms",
       description:
         "We build secure, scalable online banking and finance platforms tailored for institutional excellence.",
-      cta: "Request Demo",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Request Demo" }, { cta: "Learn More" }],
     },
     {
       card: null,
-      image: IMAGE_MEDIA,
+      image: MEDIA_2,
       content_wrapper: null,
       text_wrapper: null,
       label: "02",
       title: "AI Automation in Finance",
       description:
         "Automate client services, compliance, and reporting with advanced AI tailored for financial institutions.",
-      cta: "See How",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "See How" }, { cta: "View Demo" }],
     },
     {
       card: null,
-      image: IMAGE_MEDIA,
+      image: MEDIA_3,
       content_wrapper: null,
       text_wrapper: null,
       label: "03",
       title: "Branded Client Portals",
       description:
         "Deliver seamless, secure digital experiences with bespoke UI/UX for your clients and investors.",
-      cta: "Explore More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Explore More" }, { cta: "Get Started" }],
     },
     {
       card: null,
-      image: IMAGE_MEDIA,
+      image: MEDIA_4,
       content_wrapper: null,
       text_wrapper: null,
       label: "04",
       title: "Enterprise Security Solutions",
       description:
         "Implement robust security measures and compliance frameworks designed for enterprise-level financial operations.",
-      cta: "Learn More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Learn More" }, { cta: "Contact Us" }],
     },
   ],
 };
@@ -122,9 +176,17 @@ export const Features3: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "cta_button",
-      label: "Cta Button",
-      field_interface: "ButtonWidget",
+      key: "cta_buttons",
+      label: "CTA Buttons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta_button",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "services",
@@ -150,7 +212,7 @@ export const Features3: IBlock = {
         {
           key: "label",
           label: "Label",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "text_wrapper",
@@ -168,9 +230,17 @@ export const Features3: IBlock = {
           field_interface: "TypographyWidget",
         },
         {
-          key: "cta",
-          label: "Cta",
-          field_interface: "ButtonWidget",
+          key: "ctas",
+          label: "CTA Buttons Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
       ],
     },
@@ -180,15 +250,7 @@ export const Features3: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "max-width": "72rem",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "base",
-          "padding-right": "base",
-          "padding-top": "7xl",
-          "padding-bottom": "7xl",
-        },
+        container: {},
         header_wrapper: {
           display: "flex",
           "flex-direction": "row",
@@ -211,16 +273,10 @@ export const Features3: IBlock = {
           },
         },
         title: {
-          "font-size": "3xl",
-          "font-weight": "600",
-          color: "text-1",
-          "line-height": "1.15",
-          "margin-bottom": "0",
           tablet: {
             "margin-bottom": "base",
           },
           mobile: {
-            "font-size": "2xl",
             "margin-bottom": "xs",
           },
         },
@@ -239,9 +295,14 @@ export const Features3: IBlock = {
             width: "100%",
           },
         },
+        cta_buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          gap: "sm",
+        },
+        cta_buttons: Array(2).map(() => ({})),
         description: {
-          color: "text-2",
-          "font-size": "base",
           "margin-bottom": "0",
           "margin-right": "2xl",
           tablet: {
@@ -250,7 +311,6 @@ export const Features3: IBlock = {
             "max-width": "36rem",
           },
           mobile: {
-            "font-size": "sm",
             "margin-bottom": "lg",
           },
         },
@@ -283,19 +343,26 @@ export const Features3: IBlock = {
               "column-gap": "3xs",
             },
             label: {
-              color: "text-1",
+              "font-weight": 700,
             },
             title: {
-              color: "text-1",
               "margin-bottom": "2xs",
+              "font-weight": 700,
             },
             description: {
-              color: "text-2",
               "margin-bottom": "2xs",
             },
-            cta: {
-              width: "fit-content",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             content_wrapper: {
               display: "flex",
               "column-gap": "base",
@@ -319,19 +386,26 @@ export const Features3: IBlock = {
               "column-gap": "3xs",
             },
             label: {
-              color: "text-1",
+              "font-weight": 700,
             },
             title: {
-              color: "text-1",
               "margin-bottom": "2xs",
+              "font-weight": 700,
             },
             description: {
-              color: "text-2",
               "margin-bottom": "2xs",
             },
-            cta: {
-              width: "fit-content",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             content_wrapper: {
               display: "flex",
               "column-gap": "base",
@@ -355,19 +429,26 @@ export const Features3: IBlock = {
               "column-gap": "3xs",
             },
             label: {
-              color: "text-1",
+              "font-weight": 700,
             },
             title: {
-              color: "text-1",
               "margin-bottom": "2xs",
+              "font-weight": 700,
             },
             description: {
-              color: "text-2",
               "margin-bottom": "2xs",
             },
-            cta: {
-              width: "fit-content",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             content_wrapper: {
               display: "flex",
               "column-gap": "base",
@@ -391,19 +472,26 @@ export const Features3: IBlock = {
               "column-gap": "3xs",
             },
             label: {
-              color: "text-1",
+              "font-weight": 700,
             },
             title: {
-              color: "text-1",
               "margin-bottom": "2xs",
+              "font-weight": 700,
             },
             description: {
-              color: "text-2",
               "margin-bottom": "2xs",
             },
-            cta: {
-              width: "fit-content",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
             content_wrapper: {
               display: "flex",
               "column-gap": "base",
@@ -417,7 +505,106 @@ export const Features3: IBlock = {
           heading: {
             level: 2,
           },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
         },
+        services: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+            label: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+            label: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+            label: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+            label: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/features/features-3.tsx

@@ -1,19 +1,17 @@
 import {
-  type ILevoBlockBaseProps,
+  Box,
   Button,
+  Container,
   Heading,
+  type ILevoBlockBaseProps,
   Image,
-  Typography,
-  Container,
   Section,
-  Box,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IFeatures3Content } from "./features-3.schema";
 
-const Features3: React.FC<ILevoBlockBaseProps<IFeatures3Content>> = ({
-  content,
-}) => (
+const Features3: React.FC<ILevoBlockBaseProps<IFeatures3Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_wrapper">
@@ -22,16 +20,20 @@ const Features3: React.FC<ILevoBlockBaseProps<IFeatures3Content>> = ({
         </Box>
         <Typography elementKey="description" />
         <Box elementKey="cta_wrapper">
-          <Button elementKey="cta_button" />
+          <Box elementKey="cta_buttons_levoGroup" data-levo_group>
+            {(content?.cta_buttons ?? []).map((_: any, index: number) => (
+              <Button
+                key={`cta_buttons.${index}.cta_button`}
+                elementKey={`cta_buttons.${index}.cta_button`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
       </Box>
       <Box data-levo_group elementKey="services_levoGroup">
         {(content.services ?? []).map((_, index) => (
-          <Box
-            data-levo_group_item
-            elementKey={`services.${index}.card`}
-            key={index}
-          >
+          <Box data-levo_group_item elementKey={`services.${index}.card`} key={index}>
             <Image
               elementKey={`services.${index}.image`}
               width={600}
@@ -39,11 +41,19 @@ const Features3: React.FC<ILevoBlockBaseProps<IFeatures3Content>> = ({
               alt={`Service ${index + 1} illustration`}
             />
             <Box elementKey={`services.${index}.content_wrapper`}>
-              <Typography elementKey={`services.${index}.label`} />
+              <Heading elementKey={`services.${index}.label`} />
               <Box elementKey={`services.${index}.text_wrapper`}>
                 <Heading elementKey={`services.${index}.title`} />
                 <Typography elementKey={`services.${index}.description`} />
-                <Button elementKey={`services.${index}.cta`} />
+                <Box elementKey={`services.${index}.ctas_levoGroup`} data-levo_group>
+                  {(content?.services?.[index]?.ctas ?? []).map((_, ctaIndex) => (
+                    <Button
+                      key={`services.${index}.ctas.${ctaIndex}.cta`}
+                      elementKey={`services.${index}.ctas.${ctaIndex}.cta`}
+                      data-levo_group_item
+                    />
+                  ))}
+                </Box>
               </Box>
             </Box>
           </Box>