@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,25 +1,59 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_IMAGE = {
-  id: "7141014160938075687",
-  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+const MEDIA_1 = {
+  id: "74dGgDI5SuDxp",
+  filename: "hero-8-1.png",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-8-1-eg6wFl4GZxLtF-828w.webp 828w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "pKkevltJxha9k",
+  filename: "hero-8-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-8-2-DNP35s1aEu6ho-750w.webp 750w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "rSCtjlLkzA4Ps",
+  filename: "hero-8-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz.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-8-3-1d791LgEXOxKz-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-8-3-1d791LgEXOxKz-828w.webp 828w",
   },
+  mimetype: "image/png",
 };
 
+const MEDIA_ARR = [MEDIA_1, MEDIA_2, MEDIA_3];
+
 const DEFAULT_SLIDES_COUNT = 3;
 
 const DEFAULT_CONTENT = {
@@ -27,21 +61,26 @@ const DEFAULT_CONTENT = {
   container: null,
   header_section: null,
   title: "Dream homes Delivered",
-  cta: "Contact Us",
+  description:
+    "Dream homes Delivered Dream homes Delivered Dream homes Delivered Dream homes Delivered Dream homes Delivered",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "Contact Us" }, { cta: "Learn More" }],
   carousel_main_container: null,
   carousel_navigation: null,
   carousel_navigation_arrow_left: "←",
   carousel_navigation_arrow_right: "→",
 
-  slides: Array(DEFAULT_SLIDES_COUNT).fill({
-    slide_wrapper: null,
-    left_container: null,
-    description:
-      "Discover stunning properties in prime locations tailored to your lifestyle.",
-    slide_cta: "Explore Projects",
-    right_container: null,
-    image: DUMMY_IMAGE,
-  }),
+  slides: Array(DEFAULT_SLIDES_COUNT)
+    .fill(0)
+    .map((_, index) => ({
+      slide_wrapper: null,
+      left_container: null,
+      description: "Discover stunning properties in prime locations tailored to your lifestyle.",
+      slide_ctas_levoGroup: null,
+      slide_ctas: [{ slide_cta: "Explore Projects" }, { slide_cta: "View Gallery" }],
+      right_container: null,
+      image: MEDIA_ARR[index],
+    })),
 };
 
 export type IHero8Content = typeof DEFAULT_CONTENT;
@@ -81,6 +120,11 @@ export const Hero8: IBlock = {
           "Container for the main title and CTA button at the top. No content—structural only.",
       },
     },
+    {
+      key: "header_content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Main Title",
@@ -93,15 +137,28 @@ export const Hero8: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "Main CTA",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Primary call-to-action button for the hero section. Use action-oriented text like 'Get Started', 'Learn More', 'Contact Us'.",
-        min_characters: 8,
-        max_characters: 20,
-      },
+      key: "description",
+      label: "Main Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctas",
+      label: "Main CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "Main CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary call-to-action button for the hero section. Use action-oriented text like 'Get Started', 'Learn More', 'Contact Us'.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+      ],
     },
     {
       key: "carousel_main_container",
@@ -117,8 +174,7 @@ export const Hero8: IBlock = {
       label: "Carousel Navigation",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for carousel navigation arrows. No content—structural only.",
+        prompt_description: "Container for carousel navigation arrows. No content—structural only.",
       },
     },
     {
@@ -179,15 +235,17 @@ export const Hero8: IBlock = {
           },
         },
         {
-          key: "slide_cta",
-          label: "Slide CTA",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description:
-              "Call-to-action button for each slide. Use action-oriented text that relates to the slide content.",
-            min_characters: 8,
-            max_characters: 20,
-          },
+          key: "slide_ctas",
+          label: "Slide CTA Buttons Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "slide_cta",
+              label: "Slide CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
         {
           key: "right_container",
@@ -224,17 +282,8 @@ export const Hero8: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "3xl",
-          "padding-bottom": "3xl",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "xl",
-          "padding-right": "xl",
-        },
+        layout: {},
+        container: {},
         header_section: {
           display: "flex",
           "justify-content": "space-between",
@@ -247,20 +296,17 @@ export const Hero8: IBlock = {
           },
         },
         title: {
-          color: "text-1",
           mobile: {
             "text-align": "center",
           },
         },
-        cta: {
-          "background-color": "background-2",
-          color: "text-1",
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "border-color": "border",
+        ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          gap: "sm",
         },
+        ctas: Array(2).map(() => ({})),
         carousel_main_container: {
           "margin-bottom": "xl",
         },
@@ -271,89 +317,193 @@ export const Hero8: IBlock = {
           "align-items": "center",
           "margin-top": "lg",
         },
-        carousel_navigation_arrow_left: {
-          "background-color": "background-2",
-          color: "text-1",
-          "padding-top": "sm",
-          "padding-bottom": "sm",
-          "padding-left": "base",
-          "padding-right": "base",
-          "border-color": "border",
-          "border-radius": "base",
-        },
-        carousel_navigation_arrow_right: {
-          "background-color": "background-2",
-          color: "text-1",
-          "padding-top": "sm",
-          "padding-bottom": "sm",
-          "padding-left": "base",
-          "padding-right": "base",
-          "border-color": "border",
-          "border-radius": "base",
-        },
-        slides: Array(DEFAULT_SLIDES_COUNT).fill({
-          slide_wrapper: {
-            display: "grid",
-            "grid-template-columns": "1fr 1fr",
-            "column-gap": "2xl",
-            "align-items": "center",
-            "min-height": "400px",
-            mobile: {
-              "grid-template-columns": "1fr",
-              "row-gap": "xl",
-              "min-height": "auto",
+        carousel_navigation_arrow_left: {},
+        carousel_navigation_arrow_right: {},
+        slides: [
+          {
+            slide_wrapper: {
+              display: "grid",
+              "grid-template-columns": "1fr 1fr",
+              "column-gap": "2xl",
+              "align-items": "center",
+              "min-height": "400px",
+              mobile: {
+                "grid-template-columns": "1fr",
+                "row-gap": "xl",
+                "min-height": "auto",
+              },
             },
-          },
-          left_container: {
-            display: "flex",
-            "flex-direction": "column",
-            "row-gap": "lg",
-            mobile: {
-              "text-align": "center",
-              "row-gap": "base",
+            left_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              mobile: {
+                "text-align": "center",
+                "row-gap": "base",
+              },
             },
-          },
-          description: {
-            "font-size": "lg",
-            "line-height": "1.6",
-            color: "text-1",
-            "max-width": "500px",
-            mobile: {
-              "font-size": "base",
-              "max-width": "100%",
+            description: {
+              "max-width": "500px",
+              mobile: {
+                "max-width": "100%",
+              },
             },
-          },
-          slide_cta: {
-            "background-color": "background-2",
-            color: "text-1",
-            "padding-top": "sm",
-            "padding-bottom": "sm",
-            "padding-left": "lg",
-            "padding-right": "lg",
-            "border-color": "border",
-            "align-self": "flex-start",
-            mobile: {
-              "align-self": "center",
+            slide_ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
+              "align-self": "flex-start",
+              mobile: {
+                "align-self": "center",
+              },
+            },
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({ slide_cta: {} })),
+            right_container: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              mobile: {
+                order: "-1",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "300px",
+              "object-fit": "cover",
+              "border-radius": "base",
+              mobile: {
+                height: "250px",
+              },
             },
           },
-          right_container: {
-            display: "flex",
-            "justify-content": "center",
-            "align-items": "center",
-            mobile: {
-              order: "-1",
+          {
+            slide_wrapper: {
+              display: "grid",
+              "grid-template-columns": "1fr 1fr",
+              "column-gap": "2xl",
+              "align-items": "center",
+              "min-height": "400px",
+              mobile: {
+                "grid-template-columns": "1fr",
+                "row-gap": "xl",
+                "min-height": "auto",
+              },
+            },
+            left_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              mobile: {
+                "text-align": "center",
+                "row-gap": "base",
+              },
+            },
+            description: {
+              "max-width": "500px",
+              mobile: {
+                "max-width": "100%",
+              },
+            },
+            slide_ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
+              "align-self": "flex-start",
+              mobile: {
+                "align-self": "center",
+              },
+            },
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({ slide_cta: {} })),
+            right_container: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              mobile: {
+                order: "-1",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "300px",
+              "object-fit": "cover",
+              "border-radius": "base",
+              mobile: {
+                height: "250px",
+              },
             },
           },
-          image: {
-            width: "100%",
-            height: "300px",
-            "object-fit": "cover",
-            "border-radius": "base",
-            mobile: {
-              height: "250px",
+          {
+            slide_wrapper: {
+              display: "grid",
+              "grid-template-columns": "1fr 1fr",
+              "column-gap": "2xl",
+              "align-items": "center",
+              "min-height": "400px",
+              mobile: {
+                "grid-template-columns": "1fr",
+                "row-gap": "xl",
+                "min-height": "auto",
+              },
+            },
+            left_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              mobile: {
+                "text-align": "center",
+                "row-gap": "base",
+              },
+            },
+            description: {
+              "max-width": "500px",
+              mobile: {
+                "max-width": "100%",
+              },
+            },
+            slide_ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
+              "align-self": "flex-start",
+              mobile: {
+                "align-self": "center",
+              },
+            },
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({ slide_cta: {} })),
+            right_container: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              mobile: {
+                order: "-1",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "300px",
+              "object-fit": "cover",
+              "border-radius": "base",
+              mobile: {
+                height: "250px",
+              },
             },
           },
-        }),
+        ],
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -370,6 +520,60 @@ export const Hero8: IBlock = {
             Heading_Level: "H1",
           },
         },
+        slides: [
+          {
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                slide_cta: {
+                  selectedVariants: {},
+                },
+              })),
+          },
+          {
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                slide_cta: {
+                  selectedVariants: {},
+                },
+              })),
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+          },
+          {
+            slide_ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                slide_cta: {
+                  selectedVariants: {},
+                },
+              })),
+            description: {
+              selectedVariants: {
+                Typography_Variants: "Lead",
+              },
+            },
+          },
+        ],
+        carousel_navigation_arrow_right: {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+        carousel_navigation_arrow_left: {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
       },
     },
   ],

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

@@ -2,7 +2,6 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
   Box,
   Button,
   Carousel,
@@ -10,6 +9,7 @@ import {
   CarouselItem,
   Container,
   Heading,
+  type ILevoBlockBaseProps,
   Image,
   Section,
   Typography,
@@ -56,22 +56,35 @@ const Hero8: React.FC<ILevoBlockBaseProps<IHero8Content>> = ({ content }) => {
     <Section elementKey="layout">
       <Container elementKey="container">
         <Box elementKey="header_section">
-          <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, ctaIndex: number) => (
+              <Button key={ctaIndex} elementKey={`ctas.${ctaIndex}.cta`} data-levo_group_item />
+            ))}
+          </Box>
         </Box>
         <Box elementKey="carousel_main_container">
-          <Carousel
-            elementKey="slides_levoGroup"
-            setApi={setApi}
-            data-levo_group
-          >
+          <Carousel elementKey="slides_levoGroup" setApi={setApi} data-levo_group>
             <CarouselContent>
               {(content?.slides ?? []).map((_: any, index: number) => (
                 <CarouselItem key={index} data-levo_group_item>
                   <Box elementKey={`slides.${index}.slide_wrapper`}>
                     <Box elementKey={`slides.${index}.left_container`}>
                       <Typography elementKey={`slides.${index}.description`} />
-                      <Button elementKey={`slides.${index}.slide_cta`} />
+                      <Box elementKey={`slides.${index}.slide_ctas_levoGroup`} data-levo_group>
+                        {(content?.slides?.[index]?.slide_ctas ?? []).map(
+                          (_: any, ctaIndex: number) => (
+                            <Button
+                              key={`slides.${index}.slide_ctas.${ctaIndex}.slide_cta`}
+                              elementKey={`slides.${index}.slide_ctas.${ctaIndex}.slide_cta`}
+                              data-levo_group_item
+                            />
+                          ),
+                        )}
+                      </Box>
                       {count > 0 && index === current && (
                         <Box elementKey="carousel_navigation">
                           <Button
@@ -96,10 +109,7 @@ const Hero8: React.FC<ILevoBlockBaseProps<IHero8Content>> = ({ content }) => {
                       )}
                     </Box>
                     <Box elementKey={`slides.${index}.right_container`}>
-                      <Image
-                        elementKey={`slides.${index}.image`}
-                        alt="Slide image"
-                      />
+                      <Image elementKey={`slides.${index}.image`} alt="Slide image" />
                     </Box>
                   </Box>
                 </CarouselItem>