@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/content/content-9.tsx

@@ -1,26 +1,27 @@
 import {
-  type ILevoBlockBaseProps,
-  Heading,
-  Image,
-  Typography,
-  Container,
-  Section,
-  Box,
-  AccordionRoot,
+  AccordionContent,
   AccordionItem,
+  AccordionRoot,
   AccordionTrigger,
-  AccordionContent,
+  Box,
+  Container,
+  Heading,
   Icon,
+  type ILevoBlockBaseProps,
+  Image,
+  Section,
+  Typography,
 } from "@levo-so/studio";
 
 import type { IContent9Content } from "./content-9.schema";
 
-const Content9: React.FC<ILevoBlockBaseProps<IContent9Content>> = ({
-  content,
-}) => (
+const Content9: React.FC<ILevoBlockBaseProps<IContent9Content>> = ({ content }) => (
   <Section elementKey="layout">
     <Container elementKey="container">
-      <Heading elementKey="title" />
+      <Box elementKey="header">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
 
       <Box elementKey="accordions_container">
         <AccordionRoot
@@ -42,41 +43,28 @@ const Content9: React.FC<ILevoBlockBaseProps<IContent9Content>> = ({
                     <Icon elementKey={`sections.${index}.icon`} />
                     <Typography elementKey={`sections.${index}.label`} />
                   </Box>
-                  <Typography elementKey={`sections.${index}.title`} />
+                  <Heading elementKey={`sections.${index}.title`} />
                 </Box>
               </AccordionTrigger>
               <AccordionContent elementKey={`sections.${index}.content`}>
                 <Box elementKey={`sections.${index}.container`}>
-                  <Box
-                    elementKey={`sections.${index}.cards_levoGroup`}
-                    data-levo_group
-                  >
-                    {(content.sections?.[index]?.cards ?? []).map(
-                      (_, cardIndex) => (
-                        <Box
-                          key={cardIndex}
-                          data-levo_group_item
-                          elementKey={`sections.${index}.cards.${cardIndex}.card`}
-                        >
-                          <Box
-                            elementKey={`sections.${index}.cards.${cardIndex}.label_container`}
-                          >
-                            <Box
-                              elementKey={`sections.${index}.cards.${cardIndex}.label_divider`}
-                            />
-                            <Typography
-                              elementKey={`sections.${index}.cards.${cardIndex}.label`}
-                            />
-                          </Box>
-                          <Typography
-                            elementKey={`sections.${index}.cards.${cardIndex}.title`}
-                          />
-                          <Typography
-                            elementKey={`sections.${index}.cards.${cardIndex}.description`}
-                          />
+                  <Box elementKey={`sections.${index}.cards_levoGroup`} data-levo_group>
+                    {(content.sections?.[index]?.cards ?? []).map((_, cardIndex) => (
+                      <Box
+                        key={cardIndex}
+                        data-levo_group_item
+                        elementKey={`sections.${index}.cards.${cardIndex}.card`}
+                      >
+                        <Box elementKey={`sections.${index}.cards.${cardIndex}.label_container`}>
+                          <Box elementKey={`sections.${index}.cards.${cardIndex}.label_divider`} />
+                          <Typography elementKey={`sections.${index}.cards.${cardIndex}.label`} />
                         </Box>
-                      ),
-                    )}
+                        <Heading elementKey={`sections.${index}.cards.${cardIndex}.title`} />
+                        <Typography
+                          elementKey={`sections.${index}.cards.${cardIndex}.description`}
+                        />
+                      </Box>
+                    ))}
                   </Box>
                 </Box>
               </AccordionContent>

package/src/blocks/cta/cta-1.schema.ts

@@ -15,8 +15,7 @@ const DEFAULT_CONTENT = {
   ctaIcon: {
     id: "9GFRzqRPswl8h",
     kind: "image",
-    location:
-      "https://static.levocdn.com/WLZ1TXTD/arrow-right-tryvMJ0Z2DosG.svg",
+    location: "https://static.levocdn.com/WLZ1TXTD/arrow-right-tryvMJ0Z2DosG.svg",
     srcset: {},
   },
   cta2_rightIcon: {
@@ -27,20 +26,13 @@ const DEFAULT_CONTENT = {
       kind: "image",
       location: "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO.png",
       srcset: {
-        "1080w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp",
-        "1200w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp",
-        "1920w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp",
-        "320w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-320w.webp",
-        "640w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-640w.webp",
-        "750w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-750w.webp",
-        "828w":
-          "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-828w.webp",
+        "1080w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp",
+        "1200w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp",
+        "1920w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp",
+        "320w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-320w.webp",
+        "640w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-640w.webp",
+        "750w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-750w.webp",
+        "828w": "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-828w.webp",
         path: "https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp 1920w",
       },
       mimetype: "image/png",
@@ -74,8 +66,7 @@ export const Cta1: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description:
-          "Main container for centering and constraining the content width.",
+        prompt_description: "Main container for centering and constraining the content width.",
       },
     },
     {
@@ -83,8 +74,7 @@ export const Cta1: IBlock = {
       label: "Header Container",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for the header content, used for layout and spacing.",
+        prompt_description: "Container for the header content, used for layout and spacing.",
       },
     },
     {
@@ -138,66 +128,34 @@ export const Cta1: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          "padding-top": "6xl",
-          "padding-bottom": "6xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          tablet: {
-            "padding-top": "4xl",
-            "padding-bottom": "4xl",
-            "padding-left": "lg",
-            "padding-right": "lg",
-            filter: "none",
-          },
-          mobile: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-            filter: "none",
-          },
-          filter: "none",
-        },
+        layout: {},
         container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "flex-direction": "row",
           "align-items": "center",
-          "text-align": "center",
-          filter: "none",
           mobile: {
-            filter: "none",
             "flex-direction": "column",
             "row-gap": "base",
           },
           tablet: {
-            filter: "none",
             "flex-direction": "column",
             "row-gap": "base",
           },
           "justify-content": "space-between",
         },
         title: {
-          color: "text-1",
-          "margin-bottom": "2xl",
+          "margin-bottom": "4xs",
+          "max-width": "500px",
           tablet: {
-            filter: "none",
             "text-align": "center",
             "margin-bottom": "xl",
             "max-width": "100%",
           },
           mobile: {
-            filter: "none",
             "text-align": "center",
             "margin-bottom": "lg",
             "max-width": "100%",
           },
-          filter: "none",
-          "text-align": "left",
-          "max-width": "500px",
         },
         ctas_levoGroup: {
           filter: "none",
@@ -225,79 +183,12 @@ export const Cta1: IBlock = {
         ctas: [
           {
             button: {
-              "background-color": "background-2",
-              color: "white",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "2xl",
-              "padding-right": "2xl",
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "xs",
-              "border-width": "0px",
-              "border-style": "none",
-              "border-color": "border",
-              tablet: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                filter: "none",
-                "min-width": "100%",
-                width: "auto",
-                "border-style": "none",
-                "border-width": "0px",
-              },
-              mobile: {
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                filter: "none",
-                width: "100%",
-                "min-width": "100%",
-              },
-              filter: "none",
-              "flex-direction": "row",
-              "justify-content": "center",
-              "min-width": "100%",
               width: "100%",
             },
           },
           {
             button: {
-              filter: "none",
-              display: "flex",
-              "column-gap": "xs",
-              "align-items": "center",
-              "justify-content": "center",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "2xl",
-              "padding-right": "2xl",
-              "min-width": "100%",
-              tablet: {
-                filter: "none",
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "min-width": "100%",
-                "border-style": "none",
-                "border-width": "0px",
-              },
-              mobile: {
-                filter: "none",
-                width: "100%",
-                "padding-top": "xs",
-                "padding-bottom": "xs",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "min-width": "100%",
-              },
               width: "100%",
-              "border-style": "none",
-              "border-width": "0px",
             },
           },
         ],
@@ -312,13 +203,8 @@ export const Cta1: IBlock = {
         cta2_rightIcon: {
           width: "20px",
         },
-        "header-container": {
-          filter: "none",
-        },
+        "header-container": {},
         description: {
-          filter: "none",
-          color: "text-2",
-          "text-align": "left",
           "max-width": "500px",
         },
       },
@@ -347,6 +233,15 @@ export const Cta1: IBlock = {
             },
           },
         },
+        ctas: [
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
       },
     },
   ],

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

@@ -1,59 +1,51 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA_1 = {
+  id: "6Hgb5xxyg1bHs",
+  filename: "cta-2-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm.png",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-1-XZbHqbcweGmtm-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
+const MEDIA_2 = {
+  id: "4JO6jlk23HzSb",
+  filename: "cta-2-2.jpg",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF.jpg",
+  srcset: {
+    "1080w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1080w.webp",
+    "1200w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1200w.webp",
+    "1920w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1920w.webp",
+    "320w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-320w.webp",
+    "640w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-640w.webp",
+    "750w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-750w.webp",
+    "828w": "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cta-2-2-sR8GfjjdTwkQF-1080w.webp 1080w",
+  },
+  mimetype: "image/jpeg",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   contentContainer: null,
 
   // Left image
-  leftImage: {
-    id: "left-fitness-image",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/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",
-    },
-  },
+  leftImage: MEDIA_1,
 
   // Right image
-  rightImage: {
-    id: "right-fitness-image",
-    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
-    kind: "image",
-    mimetype: "image/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",
-    },
-  },
+  rightImage: MEDIA_2,
 
   // Center content
   title: "Your Transformation Starts Today",
@@ -103,7 +95,7 @@ export const Cta2: IBlock = {
     {
       key: "title",
       label: "Main Title",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "description",
@@ -136,29 +128,16 @@ export const Cta2: IBlock = {
       title: "Default",
       key: "default",
       content: DEFAULT_CONTENT,
-      config: {},
-      styles: {
-        layout: {
-          "padding-top": "4xl",
-          "padding-bottom": "4xl",
-          "padding-left": "xl",
-          "padding-right": "xl",
-          tablet: {
-            "padding-top": "3xl",
-            "padding-bottom": "3xl",
-            "padding-left": "base",
-            "padding-right": "base",
-          },
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-            "padding-left": "base",
-            "padding-right": "base",
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
           },
         },
+      },
+      styles: {
+        layout: {},
         container: {
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "align-items": "center",
           "justify-content": "space-between",
@@ -213,11 +192,9 @@ export const Cta2: IBlock = {
         },
         title: {
           "margin-bottom": "base",
-          "text-color": "text-1",
         },
         description: {
           "margin-bottom": "lg",
-          "text-color": "text-2",
         },
         buttons_levoGroup: {
           display: "flex",

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

@@ -3,8 +3,8 @@ import {
   Button,
   Container,
   Heading,
-  Image,
   type ILevoBlockBaseProps,
+  Image,
   Section,
   Typography,
 } from "@levo-so/studio";
@@ -20,11 +20,7 @@ const Cta2: React.FC<ILevoBlockBaseProps<ICta2Content>> = ({ content }) => (
         <Typography elementKey="description" />
         <Box elementKey="buttons_levoGroup" data-levo_group>
           {(content?.buttons ?? []).map((_: any, index: number) => (
-            <Button
-              key={index}
-              data-levo_group_item
-              elementKey={`buttons.${index}.text`}
-            />
+            <Button key={index} data-levo_group_item elementKey={`buttons.${index}.text`} />
           ))}
         </Box>
       </Box>