@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/tabs/tab-2.schema.ts

@@ -1,5 +1,30 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA = {
+  id: "n3q3fSsDYQrj",
+  filename: "tabs-2-bg-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/tabs-2-bg-1-30WTpd1Q0qCc-750w.webp 750w",
+  },
+  mimetype: "image/png",
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -7,6 +32,8 @@ const DEFAULT_CONTENT = {
   left_container: null,
   right_container: null,
   title: "Industries We Serve",
+  description:
+    "Industries We Serve Industries We Serve Industries We Serve Industries We Serve Industries We Serve ",
   tabs_levoGroup: null,
   tabs_tabList: null,
   tabs: [
@@ -17,7 +44,15 @@ const DEFAULT_CONTENT = {
       card_title: "Cement Industry",
       card_description:
         "Robust conveyors engineered for heavy-duty cement handling, ensuring seamless material flow from raw mix to final dispatch.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
     {
       TabsTrigger: "Food Industry",
@@ -26,7 +61,15 @@ const DEFAULT_CONTENT = {
       card_title: "Food Industry",
       card_description:
         "Hygienic conveyor systems designed for food-grade applications, maintaining quality and safety standards throughout the process.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
     {
       TabsTrigger: "Insulation Industry",
@@ -35,7 +78,15 @@ const DEFAULT_CONTENT = {
       card_title: "Insulation Industry",
       card_description:
         "Specialized conveyor solutions for handling insulation materials with precision and care, optimized for lightweight materials.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
     {
       TabsTrigger: "Steel & Sponge Industry",
@@ -44,7 +95,15 @@ const DEFAULT_CONTENT = {
       card_title: "Steel & Sponge Industry",
       card_description:
         "Heavy-duty conveyor systems built to withstand extreme conditions in steel manufacturing and sponge iron production.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
     {
       TabsTrigger: "Power Industry",
@@ -53,7 +112,15 @@ const DEFAULT_CONTENT = {
       card_title: "Power Industry",
       card_description:
         "Reliable conveyor solutions for power plants, handling coal, ash, and other materials with maximum efficiency.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
     {
       TabsTrigger: "General Engineering",
@@ -62,7 +129,15 @@ const DEFAULT_CONTENT = {
       card_title: "General Engineering",
       card_description:
         "Versatile conveyor systems adaptable to various engineering applications, providing flexible solutions for diverse needs.",
-      card_cta: "Know More",
+      card_ctas_levoGroup: null,
+      card_ctas: [
+        {
+          card_cta: "Know More",
+        },
+        {
+          card_cta: "Learn More",
+        },
+      ],
     },
   ],
 };
@@ -97,11 +172,21 @@ export const Tab2: IBlock = {
       label: "Left Container",
       field_interface: "BoxWidget",
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
     },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "tabs_levoGroup",
       label: "Tabs Group",
@@ -149,9 +234,17 @@ export const Tab2: IBlock = {
           field_interface: "TypographyWidget",
         },
         {
-          key: "card_cta",
-          label: "Card CTA",
-          field_interface: "ButtonWidget",
+          key: "card_ctas",
+          label: "Card CTA Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "card_cta",
+              label: "Card CTA",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
       ],
     },
@@ -161,15 +254,8 @@ export const Tab2: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-        },
-        container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
-        },
+        layout: {},
+        container: {},
         main_content_wrapper: {
           display: "flex",
           tablet: {
@@ -187,7 +273,6 @@ export const Tab2: IBlock = {
           "justify-content": "start",
           "align-items": "center",
           "min-height": "600px",
-          "background-color": "gray",
           "background-size": "cover",
           width: "50%",
           "padding-left": "2xl",
@@ -203,19 +288,14 @@ export const Tab2: IBlock = {
           mobile: {
             "padding-bottom": "24xl",
           },
+          "background-color": "brand",
         },
         title: {
-          "font-size": "36px",
-          "font-weight": "700",
-          color: "text-1",
-          "line-height": "1.2",
-          tablet: {
-            "font-size": "32px",
-            "text-align": "center",
-          },
-          mobile: {
-            "font-size": "28px",
-          },
+          "text-align": "center",
+          color: "brandForeground",
+        },
+        description: {
+          "text-align": "center",
         },
         tabs_levoGroup: {},
         tabs_tabList: {
@@ -235,9 +315,11 @@ export const Tab2: IBlock = {
           "background-color": "transparent",
         },
         right_container: {
+          "background-image": `url("${MEDIA.location}")`,
+          "background-position": "50% 50%",
+          "background-size": "cover",
           flex: "1",
           "min-height": "600px",
-          "background-color": "lightGray",
           display: "flex",
           "justify-content": "center",
           "align-items": "center",
@@ -257,7 +339,6 @@ export const Tab2: IBlock = {
         tabs: [
           {
             TabsTrigger: {
-              width: "30%",
               "background-color": "white",
               "padding-left": "md",
               "padding-right": "md",
@@ -268,6 +349,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -289,47 +371,29 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
           {
             TabsTrigger: {
-              width: "30%",
               "background-color": "white",
               "padding-left": "md",
               "padding-right": "md",
@@ -340,6 +404,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -361,47 +426,29 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
           {
             TabsTrigger: {
-              width: "30%",
               "background-color": "white",
               "padding-left": "md",
               "padding-right": "md",
@@ -412,6 +459,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -433,50 +481,32 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
           {
             TabsTrigger: {
-              width: "40%",
               "background-color": "white",
-              "padding-left": "2xl",
-              "padding-right": "2xl",
+              "padding-left": "md",
+              "padding-right": "md",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "border-radius": "3xl",
@@ -484,6 +514,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -505,50 +536,32 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
           {
             TabsTrigger: {
-              width: "40%",
               "background-color": "white",
-              "padding-left": "2xl",
-              "padding-right": "2xl",
+              "padding-left": "md",
+              "padding-right": "md",
               "padding-top": "xs",
               "padding-bottom": "xs",
               "border-radius": "3xl",
@@ -556,6 +569,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -577,47 +591,29 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
           {
             TabsTrigger: {
-              width: "33%",
               "background-color": "white",
               "padding-left": "md",
               "padding-right": "md",
@@ -628,6 +624,7 @@ export const Tab2: IBlock = {
               tablet: {
                 width: "auto",
               },
+              width: "fit-content",
             },
             tab_content: {
               width: "100%",
@@ -649,43 +646,26 @@ export const Tab2: IBlock = {
               },
             },
             card_title: {
-              "font-size": "24px",
-              "font-weight": "700",
-              color: "text-1",
+              "font-weight": 700,
               "margin-bottom": "16px",
-              "line-height": "1.3",
-              tablet: {
-                "font-size": "20px",
-              },
             },
             card_description: {
-              "font-size": "16px",
-              "line-height": "1.6",
-              color: "text-2",
               "margin-bottom": "24px",
-              tablet: {
-                "font-size": "14px",
-              },
             },
-            card_cta: {
-              "padding-top": "12px",
-              "padding-bottom": "12px",
-              "padding-left": "24px",
-              "padding-right": "24px",
-              "border-radius": "lg",
-              "background-color": "primary",
-              color: "white",
-              "font-weight": "600",
-              "font-size": "14px",
-              display: "inline-flex",
+            card_ctas_levoGroup: {
+              display: "flex",
+              "column-gap": "md",
+              "row-gap": "base",
               "align-items": "center",
-              "column-gap": "8px",
-              "transition-property": "all",
-              "transition-duration": "200ms",
-              "&:hover": {
-                "background-color": "primary-dark",
-              },
             },
+            card_ctas: [
+              {
+                card_cta: {},
+              },
+              {
+                card_cta: {},
+              },
+            ],
           },
         ],
       },
@@ -693,74 +673,24 @@ export const Tab2: IBlock = {
       config: {
         title: {
           heading: {
-            level: 2,
+            level: "2",
           },
           selectedVariants: {
-            Heading_Level: "H2",
+            Heading_Level: "H3",
           },
         },
-        tabs: [
-          {
-            card_title: {
-              heading: {
-                level: 3,
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-          },
-          {
-            card_title: {
-              heading: {
-                level: 3,
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-          },
-          {
+        tabs: Array(6)
+          .fill(0)
+          .map((v) => ({
             card_title: {
               heading: {
                 level: 3,
               },
               selectedVariants: {
-                Heading_Level: "H3",
+                Heading_Level: "H5",
               },
             },
-          },
-          {
-            card_title: {
-              heading: {
-                level: 3,
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-          },
-          {
-            card_title: {
-              heading: {
-                level: 3,
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-          },
-          {
-            card_title: {
-              heading: {
-                level: 3,
-              },
-              selectedVariants: {
-                Heading_Level: "H3",
-              },
-            },
-          },
-        ],
+          })),
       },
     },
   ],