@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -1,23 +1,67 @@
 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: "OaJSLqfjJnrh",
+  filename: "cta-2-1.jpg",
   kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4.jpg",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-1d79LgEHfjk4-320w.webp 320w",
+  },
+  mimetype: "image/jpeg",
+};
+
+const MEDIA_2 = {
+  id: "A8s91BvhprIr",
+  filename: "carousel-2-2-new.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/carousel-2-2-new-T71AnwU1WaP6-750w.webp 750w",
+  },
   mimetype: "image/png",
+};
+
+const MEDIA_3 = {
+  id: "KQ5FRQXeGJVXT",
+  filename: "carousel-2-3.jpg",
+  kind: "image",
+  path: "WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR.jpg",
+  location: "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR.jpg",
+  metadata: {
+    etag: '"ebf93e4ef37f20570526391e64562b1c"',
+    mimetype: "image/jpeg",
+    size: 79539,
+  },
   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/carousel-2-3-T71EBnwUbeAMR-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/carousel-2-3-T71EBnwUbeAMR-1080w.webp 1080w",
   },
+  tags: [],
+  created_at: "2025-12-20T08:42:52.998Z",
+  updated_at: "2025-12-20T08:42:52.998Z",
+  created_by: null,
+  updated_by: null,
 };
 
 const DEFAULT_CONTENT = {
@@ -49,7 +93,7 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_1,
     },
     {
       card: null,
@@ -71,12 +115,12 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_2,
     },
     {
       card: null,
       info: null,
-      "name-position-wrapper": null,
+      "name-posiMEDIA_1ion-wrapper": null,
       name: "Lisa Kudro",
       description: "Senior Fitness Trainer",
       social: [
@@ -93,7 +137,7 @@ const DEFAULT_CONTENT = {
           },
         },
       ],
-      img: DEFAULT_IMAGE,
+      img: MEDIA_3,
     },
   ],
   "carousel-navigation-container": null,
@@ -122,7 +166,15 @@ const DEFAULT_CONTENT = {
     },
   },
   cta_wrapper: null,
-  cta: "Explore All Trainers",
+  ctas_levoGroup: null,
+  ctas: [
+    {
+      cta: "Explore All Trainers",
+    },
+    {
+      cta: "Apply Now",
+    },
+  ],
 };
 
 export type ICarousel2Content = typeof DEFAULT_CONTENT;
@@ -149,8 +201,7 @@ export const Carousel2: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description:
-          "Main container providing padding and centering for the team section.",
+        prompt_description: "Main container providing padding and centering for the team section.",
       },
     },
     {
@@ -284,10 +335,9 @@ export const Carousel2: IBlock = {
         {
           key: "name",
           label: "Member Name",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
           hint: {
-            prompt_description:
-              "Full name of the team member. Use professional, clear naming.",
+            prompt_description: "Full name of the team member. Use professional, clear naming.",
             min_characters: 8,
             max_characters: 30,
           },
@@ -297,8 +347,7 @@ export const Carousel2: IBlock = {
           label: "Description/Position",
           field_interface: "TypographyWidget",
           hint: {
-            prompt_description:
-              "Full name of the team member. Use professional, clear naming.",
+            prompt_description: "Full name of the team member. Use professional, clear naming.",
             min_characters: 8,
             max_characters: 30,
           },
@@ -347,15 +396,23 @@ export const Carousel2: IBlock = {
       },
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
-      hint: {
-        prompt_description:
-          "Call-to-action button to encourage further engagement with the team or company.",
-        min_characters: 10,
-        max_characters: 30,
-      },
+      key: "ctas",
+      label: "CTA Buttons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button to encourage further engagement with the team or company.",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+      ],
     },
   ],
   layouts: [
@@ -382,25 +439,57 @@ export const Carousel2: IBlock = {
             },
           },
         },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        team: [
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            name: {
+              selectedVariants: {
+                Heading_Level: "H4",
+              },
+              heading: {
+                level: "4",
+              },
+            },
+          },
+        ],
       },
       content: DEFAULT_CONTENT,
       styles: {
-        layout: {
-          "background-color": "white",
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-          },
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "xl",
-          "padding-right": "xl",
-        },
+        layout: {},
+        container: {},
         header: {
           "margin-bottom": "3xl",
           mobile: {
@@ -422,23 +511,12 @@ export const Carousel2: IBlock = {
           "max-width": "600px",
         },
         title: {
-          "font-size": "5xl",
-          "font-weight": "700",
-          color: "text-1",
-          "line-height": "1.2",
-          "margin-bottom": "none",
-          width: "100%",
           mobile: {
-            "font-size": "3xl",
             "text-align": "center",
           },
         },
         description: {
-          "font-size": "lg",
-          color: "text-2",
-          "line-height": "1.6",
           "text-align": "left",
-          "margin-bottom": "none",
           mobile: {
             "text-align": "center",
           },
@@ -488,12 +566,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -556,12 +628,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -624,12 +690,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -692,12 +752,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -760,12 +814,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -828,12 +876,6 @@ export const Carousel2: IBlock = {
               "row-gap": "4xs",
             },
             name: {},
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -897,12 +939,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -961,12 +997,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -1025,12 +1055,6 @@ export const Carousel2: IBlock = {
             name: {
               color: "white",
             },
-            description: {
-              "font-size": "base",
-              color: "text-2",
-              "font-weight": "400",
-              display: "none",
-            },
             social_levoGroup: {
               display: "flex",
               "justify-content": "center",
@@ -1063,18 +1087,17 @@ export const Carousel2: IBlock = {
             "margin-top": "2xl",
           },
         },
-        cta: {
-          "background-color": "brand",
-          color: "white",
-          "padding-top": "base",
-          "padding-bottom": "base",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          "border-radius": "lg",
-          "font-size": "base",
-          "font-weight": "600",
-          "border-style": "none",
+        ctas_levoGroup: {
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "sm",
         },
+        ctas: [
+          {
+            cta: {},
+          },
+        ],
+
         "carousel-navigation-container": {
           display: "flex",
           "justify-content": "center",
@@ -1122,6 +1145,9 @@ export const Carousel2: IBlock = {
           width: "22px",
           "font-size": "22px",
         },
+        team_levoGroupItem: {
+          description: {},
+        },
       },
     },
   ],

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

@@ -2,26 +2,24 @@
 
 import type { CarouselApi } from "@levo-so/studio";
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Typography,
-  Container,
-  Section,
+  Box,
+  Button,
   Carousel,
   CarouselContent,
   CarouselItem,
-  Box,
+  Container,
+  Heading,
   Icon,
-  Button,
+  type ILevoBlockBaseProps,
   Media,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 import { useEffect, useState } from "react";
 
 import type { ICarousel2Content } from "./carousel-2.schema";
 
-const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
-  content,
-}) => {
+const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({ content }) => {
   const [api, setApi] = useState<CarouselApi>();
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
@@ -92,19 +90,13 @@ const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
             {(content?.team ?? [])?.map((_: any, index: number) => (
               <CarouselItem key={index} data-levo_group_item>
                 <Box elementKey={`team.${index}.card`}>
-                  <Media
-                    elementKey={`team.${index}.img`}
-                    alt="Team member photo"
-                  />
+                  <Media elementKey={`team.${index}.img`} alt="Team member photo" />
                   <Box elementKey={`team.${index}.info`}>
                     <Box elementKey={`team.${index}.name-position-wrapper`}>
-                      <Typography elementKey={`team.${index}.name`} />
+                      <Heading elementKey={`team.${index}.name`} />
                       <Typography elementKey={`team.${index}.description`} />
                     </Box>
-                    <Box
-                      elementKey={`team.${index}.social_levoGroup`}
-                      data-levo_group
-                    >
+                    <Box elementKey={`team.${index}.social_levoGroup`} data-levo_group>
                       {(content?.team?.[index]?.social ?? [])?.map(
                         (_: any, socialIndex: number) => (
                           <Icon
@@ -149,7 +141,11 @@ const Carousel2: React.FC<ILevoBlockBaseProps<ICarousel2Content>> = ({
           </Box>
         )}
         <Box elementKey="cta_wrapper">
-          <Button elementKey="cta" />
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {content?.ctas?.map((_, index) => (
+              <Button key={index} elementKey={`ctas.${index}.cta`} data-levo_group_item />
+            ))}
+          </Box>
         </Box>
       </Container>
     </Section>