@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,31 +1,79 @@
 import type { IBlock } from "@levo-so/studio";
 
-// Extract image object into a constant for reusability
-const FEATURE_IMAGE = {
-  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",
 };
 
 // Array of features content
 const FEATURES_CONTENT = [
   {
     card: null,
-    image: FEATURE_IMAGE,
+    image: MEDIA_1,
     content_wrapper: null,
     number: null,
     text_wrapper: null,
@@ -36,7 +84,7 @@ const FEATURES_CONTENT = [
   },
   {
     card: null,
-    image: FEATURE_IMAGE,
+    image: MEDIA_2,
     content_wrapper: null,
     number: null,
     text_wrapper: null,
@@ -47,7 +95,7 @@ const FEATURES_CONTENT = [
   },
   {
     card: null,
-    image: FEATURE_IMAGE,
+    image: MEDIA_3,
     content_wrapper: null,
     number: null,
     text_wrapper: null,
@@ -58,7 +106,7 @@ const FEATURES_CONTENT = [
   },
   {
     card: null,
-    image: FEATURE_IMAGE,
+    image: MEDIA_4,
     content_wrapper: null,
     number: null,
     text_wrapper: null,
@@ -78,7 +126,8 @@ 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" }],
   features_levoGroup: null,
   features: FEATURES_CONTENT,
 };
@@ -164,9 +213,17 @@ export const Features2: 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: "features_levoGroup",
@@ -203,7 +260,7 @@ export const Features2: IBlock = {
         {
           key: "label",
           label: "Label",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "title",
@@ -223,10 +280,7 @@ export const Features2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        container: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
+        container: {},
         header_wrapper: {
           display: "flex",
           "flex-direction": "row",
@@ -261,6 +315,13 @@ export const Features2: IBlock = {
             width: "50%",
           },
         },
+        cta_buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "sm",
+        },
+        cta_buttons: Array(2).map(() => ({})),
         features_levoGroup: {
           number_of_slides: 2.5,
           "margin-top": "7xl",
@@ -298,14 +359,10 @@ export const Features2: IBlock = {
               flex: "1 1 0%",
             },
             label: {
-              "font-size": "4xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1",
               "min-width": "4rem",
             },
             title: {
-              "font-weight": 600,
+              "font-weight": 700,
             },
           },
           {
@@ -334,14 +391,10 @@ export const Features2: IBlock = {
               flex: "1 1 0%",
             },
             label: {
-              "font-size": "4xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1",
               "min-width": "4rem",
             },
             title: {
-              "font-weight": 600,
+              "font-weight": 700,
             },
           },
           {
@@ -370,14 +423,10 @@ export const Features2: IBlock = {
               flex: "1 1 0%",
             },
             label: {
-              "font-size": "4xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1",
               "min-width": "4rem",
             },
             title: {
-              "font-weight": "600",
+              "font-weight": 700,
             },
           },
           {
@@ -406,14 +455,10 @@ export const Features2: IBlock = {
               flex: "1 1 0%",
             },
             label: {
-              "font-size": "4xl",
-              "font-weight": "700",
-              color: "text-1",
-              "line-height": "1",
               "min-width": "4rem",
             },
             title: {
-              "font-weight": "600",
+              "font-weight": 700,
             },
           },
         ],
@@ -465,6 +510,62 @@ export const Features2: IBlock = {
             },
           ],
         },
+        features: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            label: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            label: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            label: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+            label: {
+              selectedVariants: {
+                Heading_Level: "H3",
+              },
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -1,22 +1,20 @@
 import {
-  type ILevoBlockBaseProps,
-  Button,
-  Heading,
-  Image,
-  Typography,
-  Container,
-  Section,
   Box,
+  Button,
   Carousel,
   CarouselContent,
   CarouselItem,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IFeatures2Content } from "./features-2.schema";
 
-const Features2: React.FC<ILevoBlockBaseProps<IFeatures2Content>> = ({
-  content,
-}) => (
+const Features2: React.FC<ILevoBlockBaseProps<IFeatures2Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
       <Box elementKey="header_wrapper">
@@ -25,7 +23,15 @@ const Features2: React.FC<ILevoBlockBaseProps<IFeatures2Content>> = ({
         </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>
       <Carousel
@@ -48,7 +54,7 @@ const Features2: React.FC<ILevoBlockBaseProps<IFeatures2Content>> = ({
                   height={192}
                 />
                 <Box elementKey={`features.${index}.content_wrapper`}>
-                  <Typography elementKey={`features.${index}.label`} />
+                  <Heading elementKey={`features.${index}.label`} />
                   <Box elementKey={`features.${index}.text_wrapper`}>
                     <Heading elementKey={`features.${index}.title`} />
                     <Typography elementKey={`features.${index}.description`} />