@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,44 +1,86 @@
 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",
-    "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/hero-4-3-1d7MLgEXzj4o-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-4-3-1d7MLgEXzj4o-1200w.webp",
+    "1920w": "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 = {
   layout: null,
   headerWrapper: null,
   title: "Your Trusted Partner in Financial Excellence",
-  cta: "Get Started",
+  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",
+    },
+  ],
   slider_dots: null,
   slider_dot: null,
   images: [
     {
-      image: DEFAULT_IMAGE,
+      image: MEDIA_1,
     },
     {
-      image: DEFAULT_IMAGE,
+      image: MEDIA_2,
     },
     {
-      image: DEFAULT_IMAGE,
+      image: MEDIA_3,
     },
     {
-      image: DEFAULT_IMAGE,
+      image: MEDIA_1,
     },
   ],
 };
@@ -66,15 +108,33 @@ export const Hero5: IBlock = {
       label: "Header Wrapper",
       field_interface: "BoxWidget",
     },
+    {
+      key: "header-content",
+      label: "Header Content",
+      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 Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "slider_dots",
@@ -107,23 +167,6 @@ export const Hero5: IBlock = {
       styles: {
         container: {
           position: "relative",
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          tablet: {
-            "padding-bottom": "3xl",
-            "padding-left": "2xl",
-            "padding-right": "2xl",
-            "padding-top": "3xl",
-          },
-          mobile: {
-            "padding-bottom": "2xl",
-            "padding-left": "base",
-            "padding-right": "base",
-            "padding-top": "2xl",
-          },
         },
         slider_dots: {
           position: "absolute",
@@ -168,18 +211,32 @@ export const Hero5: IBlock = {
           },
         },
         title: {
-          color: "text-1",
           tablet: {
             "text-align": "center",
           },
         },
-        cta: {
-          tablet: {
-            filter: "none",
-          },
-          mobile: {
-            filter: "none",
-          },
+        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: {
+              tablet: {
+                filter: "none",
+              },
+              mobile: {
+                filter: "none",
+              },
+            },
+          })),
+        "header-content": {
+          "max-width": "88%",
         },
       },
       content: DEFAULT_CONTENT,

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

@@ -2,16 +2,17 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
-  Button,
-  Heading,
-  Image,
-  Container,
-  Section,
   Box,
+  Button,
   Carousel,
   CarouselContent,
   CarouselItem,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
@@ -39,18 +40,26 @@ const Hero5: React.FC<ILevoBlockBaseProps<IHero5Content>> = ({ content }) => {
     <Section elementKey="layout">
       <Container elementKey="container">
         <Box elementKey="headerWrapper">
-          <Heading elementKey="title" />
-          <Button elementKey="cta" />
+          <Box elementKey="header-content">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <Box elementKey={`ctas_levoGroup`} data-levo_group>
+            {(content?.ctas ?? []).map((_: any, index: number) => (
+              <Button
+                key={`ctas.${index}.cta`}
+                elementKey={`ctas.${index}.cta`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
         </Box>
 
         <Carousel elementKey="images_levoGroup" setApi={setApi} data-levo_group>
           <CarouselContent className="h-full">
             {(content?.images ?? [])?.map((_, index) => (
               <CarouselItem key={index} className="relative h-full w-full">
-                <Image
-                  elementKey={`images.${index}.image`}
-                  alt={`hero image ${index + 1}`}
-                />
+                <Image elementKey={`images.${index}.image`} alt={`hero image ${index + 1}`} />
               </CarouselItem>
             ))}
           </CarouselContent>