@levo-so/blocks 0.1.58 → 0.1.60

package/src/blocks/features/features-6.schema.ts

@@ -1,5 +1,78 @@
 import type { IBlock } from "@levo-so/studio";
 
+const MEDIA_1 = {
+  id: "9GF4q5AuLeQq",
+  filename: "features-6-1.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/features-6-1-rSCClLkzWgz1-828w.webp 828w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_2 = {
+  id: "uY20Yb6ksugq",
+  filename: "features-6-2.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/features-6-2-LkpnHvjTnrTj-1080w.webp 1080w",
+  },
+  mimetype: "image/png",
+};
+const MEDIA_3 = {
+  id: "hjBIvKro3Lkc",
+  filename: "features-6-3.png",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr.png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/features-6-3-HXVrtirVUgVr-640w.webp 640w",
+  },
+  mimetype: "image/png",
+};
+
 const DUMMY_IMAGE = {
   id: "7141014160938075687",
   location: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
@@ -28,10 +101,12 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   title: "Featured Solutions",
+  description:
+    "Featured Solutions Featured Solutions Featured Solutions Featured Solutions Featured Solutions Featured Solutions Featured Solutions Featured Solutions ",
   features: [
     {
       card: null,
-      image: DUMMY_IMAGE,
+      image: MEDIA_1,
       content_wrapper: null,
       meta_container: null,
       date_wrapper: null,
@@ -44,11 +119,12 @@ const DEFAULT_CONTENT = {
       feature_title: "Digital Transformation Solutions",
       description:
         "Streamline your business operations with our comprehensive digital transformation platform designed for modern enterprises.",
-      cta: "Learn More",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Learn More" }, { cta: "View Demo" }],
     },
     {
       card: null,
-      image: DUMMY_IMAGE,
+      image: MEDIA_2,
       content_wrapper: null,
       meta_container: null,
       date_wrapper: null,
@@ -61,11 +137,12 @@ const DEFAULT_CONTENT = {
       feature_title: "Cloud Infrastructure Management",
       description:
         "Scale your applications seamlessly with our advanced cloud infrastructure solutions and automated deployment systems.",
-      cta: "Get Started",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Get Started" }, { cta: "Free Trial" }],
     },
     {
       card: null,
-      image: DUMMY_IMAGE,
+      image: MEDIA_3,
       content_wrapper: null,
       meta_container: null,
       date_wrapper: null,
@@ -78,11 +155,12 @@ const DEFAULT_CONTENT = {
       feature_title: "Business Intelligence Platform",
       description:
         "Make data-driven decisions with our powerful analytics platform that provides real-time insights and reporting capabilities.",
-      cta: "Explore Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Explore Now" }, { cta: "Case Studies" }],
     },
     {
       card: null,
-      image: DUMMY_IMAGE,
+      image: MEDIA_1,
       content_wrapper: null,
       meta_container: null,
       date_wrapper: null,
@@ -95,7 +173,8 @@ const DEFAULT_CONTENT = {
       feature_title: "Cybersecurity Framework",
       description:
         "Protect your digital assets with our comprehensive cybersecurity solutions and threat detection systems.",
-      cta: "Secure Now",
+      ctas_levoGroup: null,
+      ctas: [{ cta: "Secure Now" }, { cta: "Security Audit" }],
     },
   ],
   "carousel-navigation-container": null,
@@ -123,6 +202,11 @@ export const Features6: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
     {
       key: "title",
       label: "Section Title",
@@ -134,6 +218,17 @@ export const Features6: IBlock = {
         max_characters: 40,
       },
     },
+    {
+      key: "description",
+      label: "Section Description",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the feature section that introduces the carousel of featured solutions or products.",
+        min_characters: 10,
+        max_characters: 40,
+      },
+    },
     {
       key: "features",
       label: "Features",
@@ -257,15 +352,17 @@ export const Features6: IBlock = {
           },
         },
         {
-          key: "cta",
-          label: "Call to Action",
-          field_interface: "ButtonWidget",
-          hint: {
-            prompt_description:
-              "Action button encouraging users to learn more or engage with the featured solution.",
-            min_characters: 8,
-            max_characters: 20,
-          },
+          key: "ctas",
+          label: "CTA Buttons Group",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "cta",
+              label: "CTA Button",
+              field_interface: "ButtonWidget",
+            },
+          ],
         },
       ],
     },
@@ -290,16 +387,8 @@ export const Features6: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          "padding-top": "5xl",
-          "padding-bottom": "5xl",
-          "padding-left": "2xl",
-          "padding-right": "2xl",
-        },
+        layout: {},
         container: {
-          "max-width": "1280px",
-          "margin-left": "auto",
-          "margin-right": "auto",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "3xl",
@@ -365,8 +454,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             date_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             category_wrapper: {
@@ -379,8 +466,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             category_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             text_container: {
@@ -389,29 +474,22 @@ export const Features6: IBlock = {
               "row-gap": "base",
             },
             feature_title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              "font-weight": 600,
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
               width: "500px",
             },
-            cta: {
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "font-size": "sm",
-              "font-weight": "500",
-              width: "fit-content",
-              cursor: "pointer",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
           {
             card: {
@@ -470,8 +548,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             date_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             category_wrapper: {
@@ -484,8 +560,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             category_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             text_container: {
@@ -494,29 +568,22 @@ export const Features6: IBlock = {
               "row-gap": "base",
             },
             feature_title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              "font-weight": 600,
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
               width: "500px",
             },
-            cta: {
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "font-size": "sm",
-              "font-weight": "500",
-              width: "fit-content",
-              cursor: "pointer",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
           {
             card: {
@@ -575,8 +642,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             date_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             category_wrapper: {
@@ -589,8 +654,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             category_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             text_container: {
@@ -599,29 +662,22 @@ export const Features6: IBlock = {
               "row-gap": "base",
             },
             feature_title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              "font-weight": 600,
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
               width: "500px",
             },
-            cta: {
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "font-size": "sm",
-              "font-weight": "500",
-              width: "fit-content",
-              cursor: "pointer",
+            ctas_levoGroup: {
+              display: "flex",
+              "flex-direction": "row",
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
           {
             card: {
@@ -680,8 +736,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             date_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             category_wrapper: {
@@ -694,8 +748,6 @@ export const Features6: IBlock = {
               height: "16px",
             },
             category_text: {
-              "font-size": "sm",
-              color: "text-2",
               "font-weight": "500",
             },
             text_container: {
@@ -704,110 +756,22 @@ export const Features6: IBlock = {
               "row-gap": "base",
             },
             feature_title: {
-              "font-size": "xl",
-              "font-weight": "600",
-              color: "text-1",
-              "line-height": "1.3",
+              "font-weight": 600,
             },
             description: {
-              "font-size": "base",
-              color: "text-2",
-              "line-height": "1.5",
               width: "500px",
             },
-            cta: {
-              "background-color": "brand",
-              color: "brandForeground",
-              "padding-top": "xs",
-              "padding-bottom": "xs",
-              "padding-left": "base",
-              "padding-right": "base",
-              "font-size": "sm",
-              "font-weight": "500",
-              width: "fit-content",
-              cursor: "pointer",
-            },
-          },
-          {
-            card: {
-              display: "flex",
-              "flex-direction": "row",
-              "border-radius": "base",
-              overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-              mobile: {
-                "flex-direction": "column",
-              },
-              "padding-left": "xl",
-              "padding-right": "xl",
-              "padding-top": "xl",
-              "padding-bottom": "xl",
-            },
-            image: {
-              width: "320px",
-              height: "240px",
-              "object-fit": "cover",
-              "border-radius": "base",
-              mobile: {
-                width: "100%",
-                height: "200px",
-              },
-            },
-          },
-          {
-            card: {
-              display: "flex",
-              "flex-direction": "row",
-              "border-radius": "base",
-              overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-              mobile: {
-                "flex-direction": "column",
-              },
-              "padding-left": "xl",
-              "padding-right": "xl",
-              "padding-top": "xl",
-              "padding-bottom": "xl",
-            },
-            image: {
-              width: "320px",
-              height: "240px",
-              "object-fit": "cover",
-              "border-radius": "base",
-              mobile: {
-                width: "100%",
-                height: "200px",
-              },
-            },
-          },
-          {
-            card: {
+            ctas_levoGroup: {
               display: "flex",
               "flex-direction": "row",
-              "border-radius": "base",
-              overflow: "hidden",
-              "box-shadow":
-                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-              mobile: {
-                "flex-direction": "column",
-              },
-              "padding-left": "xl",
-              "padding-right": "xl",
-              "padding-top": "xl",
-              "padding-bottom": "xl",
-            },
-            image: {
-              width: "320px",
-              height: "240px",
-              "object-fit": "cover",
-              "border-radius": "base",
-              mobile: {
-                width: "100%",
-                height: "200px",
-              },
+              "column-gap": "md",
+              "row-gap": "md",
+              "flex-wrap": "wrap",
+              "align-items": "center",
             },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({ cta: {} })),
           },
         ],
         "carousel-navigation-container": {
@@ -843,6 +807,89 @@ export const Features6: IBlock = {
             Heading_Level: "H2",
           },
         },
+        features: [
+          {
+            date_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            category_text: {
+              selectedVariants: {
+                Typography_Variants: "Small",
+              },
+            },
+            feature_title: {
+              heading: {
+                level: "4",
+              },
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            description: {
+              selectedVariants: {},
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            feature_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            feature_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            feature_title: {
+              selectedVariants: {
+                Heading_Level: "H5",
+              },
+            },
+            ctas: Array(2)
+              .fill(0)
+              .map(() => ({
+                cta: {
+                  selectedVariants: {},
+                },
+              })),
+          },
+        ],
       },
     },
   ],

package/src/blocks/features/features-6.tsx

@@ -41,7 +41,10 @@ const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
-        <Heading elementKey="title" />
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
 
         <Carousel
           elementKey="features_levoGroup"
@@ -83,7 +86,18 @@ const Feature6: React.FC<ILevoBlockBaseProps<IFeature6Content>> = ({
                       <Typography
                         elementKey={`features.${index}.description`}
                       />
-                      <Button elementKey={`features.${index}.cta`} />
+                      <Box
+                        elementKey={`features.${index}.ctas_levoGroup`}
+                        data-levo_group
+                      >
+                        {(content?.features?.[index]?.ctas ?? []).map((_, ctaIndex) => (
+                          <Button
+                            key={`features.${index}.ctas.${ctaIndex}.cta`}
+                            elementKey={`features.${index}.ctas.${ctaIndex}.cta`}
+                            data-levo_group_item
+                          />
+                        ))}
+                      </Box>
                     </Box>
                   </Box>
                 </Box>