@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/hero/hero-7.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: "k5KwTxRcqRdf",
+  filename: "hero-7-3.png",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "n3qNfSsUos2B",
+  filename: "hero-7-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-7-2-UpLSWh31w3py-1920w.webp 1920w",
+  },
   mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "k5KwTxRcqRdf",
+  filename: "hero-7-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr.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-7-3-74duDI5Su5qr-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/hero-7-3-74duDI5Su5qr-750w.webp 750w",
   },
+  mimetype: "image/png",
 };
 
+const MEDIA_ARR = [MEDIA_1, MEDIA_2, MEDIA_3];
+
 const DUMMY_ICON = {
   kind: "icon",
   data: {
@@ -38,29 +72,31 @@ const DEFAULT_CONTENT = {
   slider_dots: null,
   slider_dot: null,
 
-  slides: Array(DEFAULT_SLIDES_COUNT).fill({
-    slide_wrapper: null,
-    background_image: DUMMY_IMAGE,
-    content_wrapper: null,
-    metadata_wrapper: null,
-    date_time_wrapper: null,
-    date_wrapper: null,
-    calendar_icon: DUMMY_ICON,
-    date: "September 28, 2025",
-    time_wrapper: null,
-    time_icon: DUMMY_ICON,
-    time: "10 min read",
-    title:
-      "Wellness isn't a destination — it's the small choices you make each day that shape a healthier, calmer you",
-    description:
-      "Discover the power of mindful living and how small daily practices can transform your overall well-being and bring lasting peace to your life.",
-    author_wrapper: null,
-    avatar: DUMMY_ICON,
-    author_name: "Lily Morphine",
-    ctas_wrapper: null,
-    primary_cta: "Read Article",
-    secondary_cta: "Save for Later",
-  }),
+  slides: Array(DEFAULT_SLIDES_COUNT)
+    .fill(0)
+    .map((v, index) => ({
+      slide_wrapper: null,
+      background_image: MEDIA_ARR[index],
+      content_wrapper: null,
+      metadata_wrapper: null,
+      date_time_wrapper: null,
+      date_wrapper: null,
+      calendar_icon: DUMMY_ICON,
+      date: "September 28, 2025",
+      time_wrapper: null,
+      time_icon: DUMMY_ICON,
+      time: "10 min read",
+      title:
+        "Wellness isn't a destination — it's the small choices you make each day that shape a healthier, calmer you",
+      description:
+        "Discover the power of mindful living and how small daily practices can transform your overall well-being and bring lasting peace to your life.",
+      author_wrapper: null,
+      avatar: DUMMY_ICON,
+      author_name: "Lily Morphine",
+      ctas_wrapper: null,
+      primary_cta: "Read Article",
+      secondary_cta: "Save for Later",
+    })),
 };
 
 export type IHero7Content = typeof DEFAULT_CONTENT;
@@ -96,8 +132,7 @@ export const Hero7: IBlock = {
       label: "Slider Dots",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for carousel navigation dots. No content—structural only.",
+        prompt_description: "Container for carousel navigation dots. No content—structural only.",
       },
     },
     {
@@ -105,8 +140,7 @@ export const Hero7: IBlock = {
       label: "Slider Dot",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Individual carousel navigation dot. No content—structural only.",
+        prompt_description: "Individual carousel navigation dot. No content—structural only.",
       },
     },
     {
@@ -227,6 +261,11 @@ export const Hero7: IBlock = {
             max_characters: 15,
           },
         },
+        {
+          key: "title_container",
+          label: "Title Container",
+          field_interface: "BoxWidget",
+        },
         {
           key: "title",
           label: "Title",
@@ -238,14 +277,18 @@ export const Hero7: IBlock = {
             max_characters: 80,
           },
         },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
 
         {
           key: "author_wrapper",
           label: "Author Wrapper",
           field_interface: "BoxWidget",
           hint: {
-            prompt_description:
-              "Container for author avatar and name. No content—structural only.",
+            prompt_description: "Container for author avatar and name. No content—structural only.",
           },
         },
         {
@@ -290,6 +333,10 @@ export const Hero7: IBlock = {
           height: "100vh",
           "min-height": "600px",
           overflow: "hidden",
+          "padding-top": "none",
+          "padding-bottom": "none",
+          "padding-left": "none",
+          "padding-right": "none",
         },
         slider_dots: {
           position: "absolute",

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

@@ -2,7 +2,6 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
   Box,
   Carousel,
   CarouselContent,
@@ -10,6 +9,7 @@ import {
   Container,
   Heading,
   Icon,
+  type ILevoBlockBaseProps,
   Section,
   Typography,
 } from "@levo-so/studio";
@@ -70,7 +70,10 @@ const Hero7: React.FC<ILevoBlockBaseProps<IHero7Content>> = ({ content }) => {
                         </Box>
                       </Box>
                     </Box>
-                    <Heading elementKey={`slides.${index}.title`} />
+                    <Box elementKey="title_container">
+                      <Heading elementKey={`slides.${index}.title`} />
+                      <Typography elementKey={`slides.${index}.description`} />
+                    </Box>
                     <Box elementKey={`slides.${index}.author_wrapper`}>
                       <Icon elementKey={`slides.${index}.avatar`} />
                       <Typography elementKey={`slides.${index}.author_name`} />
@@ -93,8 +96,7 @@ const Hero7: React.FC<ILevoBlockBaseProps<IHero7Content>> = ({ content }) => {
                 style={{
                   height: "10px",
                   width: dotIndex + 1 === current ? "40px" : "10px",
-                  backgroundColor:
-                    dotIndex + 1 === current ? "#fff" : "#D9D9D9",
+                  backgroundColor: dotIndex + 1 === current ? "#fff" : "#D9D9D9",
                   borderRadius: "9999px",
                   marginRight: "4px",
                   transition: "all 0.3s ease",