@levo-so/blocks 0.1.58 → 0.1.60

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

@@ -226,7 +226,7 @@ export const Hero3: IBlock = {
       config: {
         title: {
           heading: {
-            level: 1,
+            level: "1",
           },
           selectedVariants: {
             Heading_Level: "H1",
@@ -256,19 +256,42 @@ export const Hero3: IBlock = {
             Heading_Level: "H1",
           },
         },
+        features: [
+          {
+            title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+        ],
       },
       content: DEFAULT_CONTENT,
       styles: {
-        container: {
-          "max-width": "72rem",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "base",
-          "padding-right": "base",
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          "background-color": "background-1",
-        },
+        container: {},
         header_wrapper: {
           "margin-bottom": "3xl",
         },
@@ -293,11 +316,9 @@ export const Hero3: IBlock = {
           },
         },
         title: {
-          color: "text-1",
           "max-width": "36rem",
         },
         description: {
-          color: "text-2",
           "max-width": "28rem",
           "margin-top": "xs",
         },
@@ -338,13 +359,7 @@ export const Hero3: IBlock = {
             icon: {
               color: "brand",
             },
-            title: {
-              color: "text-1",
-              "margin-bottom": "xs",
-            },
-            description: {
-              color: "text-2",
-            },
+            description: {},
           },
           {
             card: {
@@ -371,13 +386,7 @@ export const Hero3: IBlock = {
             icon: {
               color: "brand",
             },
-            title: {
-              color: "text-1",
-              "margin-bottom": "xs",
-            },
-            description: {
-              color: "text-2",
-            },
+            description: {},
           },
           {
             card: {
@@ -404,15 +413,14 @@ export const Hero3: IBlock = {
             icon: {
               color: "brand",
             },
-            title: {
-              color: "text-1",
-              "margin-bottom": "xs",
-            },
-            description: {
-              color: "text-2",
-            },
+            description: {},
           },
         ],
+        features_levoGroupItem: {
+          title: {
+            "margin-bottom": "xs",
+          },
+        },
       },
     },
   ],

package/src/blocks/hero/hero-4.schema.ts

@@ -1,23 +1,76 @@
 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: "ZnM7UkWOHJ8a",
+  filename: "hero-defauly.png",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-defauly-qW3Y1jcCxtM6-1920w.webp 1920w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "CISNrrDGAzAU",
+  filename: "hero-4-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-4-2-w9fMJutqwfWi-320w.webp 320w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "XZbtbcwEoYoF",
+  filename: "hero-4-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o.png",
   srcset: {
     "1080w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-1080w.webp",
     "1200w":
-      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-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/hero-4-3-1d7MLgEXzj4o-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-1200w.webp 1200w",
   },
+  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -29,29 +82,41 @@ const DEFAULT_CONTENT = {
       wrapper: null,
       headerWrapper: null,
       title: "Your Trusted Partner in Financial Excellence",
-      cta: "Get Started",
-      image: DEFAULT_IMAGE,
+      description:
+        "Your Trusted Partner in Financial Excellence Your Trusted Partner in Financial Excellence Your Trusted Partner in Financial Excellence Your Trusted Partner in Financial Excellence ",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Get Started" }, { cta: "Learn More" }],
+      image: MEDIA_1,
     },
     {
       wrapper: null,
       headerWrapper: null,
       title: "Smart Investment Solutions for Your Future",
-      cta: "Invest Now",
-      image: DEFAULT_IMAGE,
+      description:
+        "Smart Investment Solutions for Your Future Smart Investment Solutions for Your Future Smart Investment Solutions for Your Future Smart Investment Solutions for Your Future ",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Invest Now" }, { cta: "Learn More" }],
+      image: MEDIA_2,
     },
     {
       wrapper: null,
       headerWrapper: null,
       title: "Secure Digital Banking at Your Fingertips",
-      cta: "Open Account",
-      image: DEFAULT_IMAGE,
+      description:
+        "Secure Digital Banking at Your Fingertips Secure Digital Banking at Your Fingertips Secure Digital Banking at Your Fingertips Secure Digital Banking at Your Fingertips ",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Open Account" }, { cta: "Learn More" }],
+      image: MEDIA_3,
     },
     {
       wrapper: null,
       headerWrapper: null,
       title: "Expert Financial Planning for Business Growth",
-      cta: "Learn More",
-      image: DEFAULT_IMAGE,
+      description:
+        "Expert Financial Planning for Business Growth Expert Financial Planning for Business Growth Expert Financial Planning for Business Growth Expert Financial Planning for Business Growth ",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Learn More" }, { cta: "Get Started" }],
+      image: MEDIA_1,
     },
   ],
 };
@@ -100,15 +165,39 @@ export const Hero4: IBlock = {
           label: "Header Wrapper",
           field_interface: "BoxWidget",
         },
+        {
+          key: "header",
+          label: "Header",
+          field_interface: "BoxWidget",
+        },
         {
           key: "title",
           label: "Title",
           field_interface: "HeadingWidget",
         },
         {
-          key: "cta",
-          label: "CTA Button",
-          field_interface: "ButtonWidget",
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          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 hero slide interactions",
+            min_items: 1,
+            max_items: 3,
+          },
         },
         {
           key: "image",
@@ -123,22 +212,9 @@ export const Hero4: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-left": "2xl",
-          "padding-right": "2xl",
-          "padding-top": "4xl",
-          "padding-bottom": "3xl",
-          mobile: {
-            "padding-top": "2xl",
-            "padding-left": "base",
-            "padding-right": "base",
-            "padding-bottom": "2xl",
-          },
-        },
+        layout: {},
         container: {
           position: "relative",
-          "margin-left": "auto",
-          "margin-right": "auto",
         },
         slider_dots: {
           position: "absolute",
@@ -175,7 +251,7 @@ export const Hero4: IBlock = {
           {
             headerWrapper: {
               display: "flex",
-              "align-items": "end",
+              "align-items": "start",
               "justify-content": "space-between",
               "margin-bottom": "lg",
               mobile: {
@@ -196,19 +272,22 @@ export const Hero4: IBlock = {
               },
             },
             title: {
-              "max-width": "42rem",
-              color: "text-1",
               "margin-bottom": "md",
               tablet: {
                 "text-align": "center",
               },
-              mobile: {
-                "text-align": "center",
-              },
             },
-            cta: {
-              "box-shadow": "default",
+            ctas_levoGroup: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              "column-gap": "sm",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map((v) => ({
+                cta: {},
+              })),
             image: {
               width: "100%",
               height: "100%",
@@ -226,17 +305,39 @@ export const Hero4: IBlock = {
                 "row-gap": "sm",
               },
             },
+            header: {
+              "max-width": "42rem",
+            },
+            description: {
+              tablet: {
+                "text-align": "center",
+              },
+            },
           },
           {
+            ctas_levoGroup: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              "column-gap": "sm",
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map((v) => ({
+                cta: {},
+              })),
             headerWrapper: {
               display: "flex",
-              "align-items": "end",
+              "align-items": "start",
               "justify-content": "space-between",
               "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "padding-left": "sm",
+                "padding-top": "sm",
+                "padding-right": "sm",
                 "row-gap": "md",
                 "margin-bottom": "md",
               },
@@ -248,18 +349,10 @@ export const Hero4: IBlock = {
               },
             },
             title: {
-              "max-width": "42rem",
-              color: "text-1",
               "margin-bottom": "md",
               tablet: {
                 "text-align": "center",
               },
-              mobile: {
-                "text-align": "center",
-              },
-            },
-            cta: {
-              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -278,17 +371,39 @@ export const Hero4: IBlock = {
                 "row-gap": "sm",
               },
             },
+            header: {
+              "max-width": "42rem",
+            },
+            description: {
+              tablet: {
+                "text-align": "center",
+              },
+            },
           },
           {
+            ctas_levoGroup: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              "column-gap": "sm",
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map((v) => ({
+                cta: {},
+              })),
             headerWrapper: {
               display: "flex",
-              "align-items": "end",
+              "align-items": "start",
               "justify-content": "space-between",
               "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "padding-left": "sm",
+                "padding-top": "sm",
+                "padding-right": "sm",
                 "row-gap": "md",
                 "margin-bottom": "md",
               },
@@ -300,18 +415,10 @@ export const Hero4: IBlock = {
               },
             },
             title: {
-              "max-width": "42rem",
-              color: "text-1",
               "margin-bottom": "md",
               tablet: {
                 "text-align": "center",
               },
-              mobile: {
-                "text-align": "center",
-              },
-            },
-            cta: {
-              "box-shadow": "default",
             },
             image: {
               width: "100%",
@@ -330,17 +437,28 @@ export const Hero4: IBlock = {
                 "row-gap": "sm",
               },
             },
+            header: {
+              "max-width": "42rem",
+            },
+            description: {
+              tablet: {
+                "text-align": "center",
+              },
+            },
           },
           {
             headerWrapper: {
               display: "flex",
-              "align-items": "end",
+              "align-items": "start",
               "justify-content": "space-between",
               "margin-bottom": "lg",
               mobile: {
                 "flex-direction": "column",
                 "align-items": "center",
                 "justify-content": "center",
+                "padding-left": "sm",
+                "padding-top": "sm",
+                "padding-right": "sm",
                 "row-gap": "md",
                 "margin-bottom": "md",
               },
@@ -352,19 +470,22 @@ export const Hero4: IBlock = {
               },
             },
             title: {
-              "max-width": "42rem",
-              color: "text-1",
               "margin-bottom": "md",
               tablet: {
                 "text-align": "center",
               },
-              mobile: {
-                "text-align": "center",
-              },
             },
-            cta: {
-              "box-shadow": "default",
+            ctas_levoGroup: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              "column-gap": "sm",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map((v) => ({
+                cta: {},
+              })),
             image: {
               width: "100%",
               height: "100%",
@@ -382,6 +503,14 @@ export const Hero4: IBlock = {
                 "row-gap": "sm",
               },
             },
+            header: {
+              "max-width": "42rem",
+            },
+            description: {
+              tablet: {
+                "text-align": "center",
+              },
+            },
           },
         ],
       },
@@ -419,6 +548,72 @@ export const Hero4: IBlock = {
             Heading_Level: "H1",
           },
         },
+        slides: [
+          {
+            title: {
+              heading: {
+                level: "1",
+              },
+              selectedVariants: {
+                Heading_Level: "H1",
+              },
+            },
+            header: {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H1",
+              },
+              heading: {
+                level: "1",
+              },
+            },
+            header: {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H1",
+              },
+              heading: {
+                level: "1",
+              },
+            },
+            header: {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            title: {
+              selectedVariants: {
+                Heading_Level: "H1",
+              },
+              heading: {
+                level: "1",
+              },
+            },
+            header: {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+        ],
       },
     },
   ],

package/src/blocks/hero/hero-4.tsx

@@ -12,6 +12,7 @@ import {
   Carousel,
   CarouselContent,
   CarouselItem,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
@@ -47,8 +48,24 @@ const Hero4: React.FC<ILevoBlockBaseProps<IHero4Content>> = ({ content }) => {
                   data-levo_group_item
                 >
                   <Box elementKey={`slides.${index}.headerWrapper`}>
-                    <Heading elementKey={`slides.${index}.title`} />
-                    <Button elementKey={`slides.${index}.cta`} />
+                    <Box elementKey={`slides.${index}.header`}>
+                      <Heading elementKey={`slides.${index}.title`} />
+                      <Typography elementKey={`slides.${index}.description`} />
+                    </Box>
+                    <Box
+                      elementKey={`slides.${index}.ctas_levoGroup`}
+                      data-levo_group
+                    >
+                      {(content?.slides?.[index]?.ctas ?? []).map(
+                        (_: any, ctaIndex: number) => (
+                          <Button
+                            key={`slides.${index}.ctas.${ctaIndex}.cta`}
+                            elementKey={`slides.${index}.ctas.${ctaIndex}.cta`}
+                            data-levo_group_item
+                          />
+                        )
+                      )}
+                    </Box>
                   </Box>
                   <Image
                     elementKey={`slides.${index}.image`}