@levo-so/blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,849 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  id: "7141014160938075687",
+  location: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Featured Solutions",
+  features: [
+    {
+      card: null,
+      image: DUMMY_IMAGE,
+      content_wrapper: null,
+      meta_container: null,
+      date_wrapper: null,
+      date_icon: DUMMY_IMAGE,
+      date_text: "March 15, 2024",
+      category_wrapper: null,
+      category_icon: DUMMY_IMAGE,
+      category_text: "Enterprise",
+      text_container: null,
+      feature_title: "Digital Transformation Solutions",
+      description:
+        "Streamline your business operations with our comprehensive digital transformation platform designed for modern enterprises.",
+      cta: "Learn More",
+    },
+    {
+      card: null,
+      image: DUMMY_IMAGE,
+      content_wrapper: null,
+      meta_container: null,
+      date_wrapper: null,
+      date_icon: DUMMY_IMAGE,
+      date_text: "March 20, 2024",
+      category_wrapper: null,
+      category_icon: DUMMY_IMAGE,
+      category_text: "Technology",
+      text_container: null,
+      feature_title: "Cloud Infrastructure Management",
+      description:
+        "Scale your applications seamlessly with our advanced cloud infrastructure solutions and automated deployment systems.",
+      cta: "Get Started",
+    },
+    {
+      card: null,
+      image: DUMMY_IMAGE,
+      content_wrapper: null,
+      meta_container: null,
+      date_wrapper: null,
+      date_icon: DUMMY_IMAGE,
+      date_text: "March 25, 2024",
+      category_wrapper: null,
+      category_icon: DUMMY_IMAGE,
+      category_text: "Analytics",
+      text_container: null,
+      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",
+    },
+    {
+      card: null,
+      image: DUMMY_IMAGE,
+      content_wrapper: null,
+      meta_container: null,
+      date_wrapper: null,
+      date_icon: DUMMY_IMAGE,
+      date_text: "March 30, 2024",
+      category_wrapper: null,
+      category_icon: DUMMY_IMAGE,
+      category_text: "Security",
+      text_container: null,
+      feature_title: "Cybersecurity Framework",
+      description:
+        "Protect your digital assets with our comprehensive cybersecurity solutions and threat detection systems.",
+      cta: "Secure Now",
+    },
+  ],
+  "carousel-navigation-container": null,
+  "carousel-navigation": null,
+  "carousel-navigation-pill": null,
+};
+
+export type IFeature6Content = typeof DEFAULT_CONTENT;
+
+export const Features6: IBlock = {
+  category_id: "features",
+  title: "Features 6",
+  key: "features-6",
+  version: "v1",
+  prompt_description:
+    "Carousel-based feature showcase with cards containing images, metadata, and call-to-action buttons",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "title",
+      label: "Section Title",
+      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",
+      kind: "group",
+      field_interface: "CarouselWidget",
+      hint: {
+        prompt_description:
+          "Collection of feature cards displayed in a carousel format, each highlighting a different solution or product offering.",
+        min_items: 3,
+        max_items: 6,
+      },
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Feature Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Visual representation of the feature or solution, displayed on the left side of each card.",
+            orientation: "landscape",
+            size: "medium",
+            usecase: "other",
+          },
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "meta_container",
+          label: "Metadata Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "date_wrapper",
+          label: "Date Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "date_icon",
+          label: "Date Icon",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Small calendar or date icon displayed next to the date information.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "date_text",
+          label: "Date Text",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Date when the feature was launched or last updated, formatted as 'Month DD, YYYY'.",
+            min_characters: 10,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "category_wrapper",
+          label: "Category Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "category_icon",
+          label: "Category Icon",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Small icon representing the category or type of the featured solution.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "category_text",
+          label: "Category Text",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Category or tag that classifies the type of solution (e.g., Enterprise, Technology, Analytics).",
+            min_characters: 5,
+            max_characters: 15,
+          },
+        },
+        {
+          key: "text_container",
+          label: "Text Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "feature_title",
+          label: "Feature Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Title of the specific feature or solution being showcased in the card.",
+            min_characters: 15,
+            max_characters: 50,
+          },
+        },
+        {
+          key: "description",
+          label: "Feature Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief description explaining the benefits and value proposition of the featured solution.",
+            min_characters: 60,
+            max_characters: 150,
+          },
+        },
+        {
+          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: "carousel-navigation-container",
+      label: "Navigation Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel-navigation",
+      label: "Navigation Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel-navigation-pill",
+      label: "Navigation Pill",
+      field_interface: "BoxWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        features_levoGroup: {
+          width: "100%",
+        },
+        features: [
+          {
+            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",
+              },
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "flex-grow": "1",
+              "row-gap": "base",
+            },
+            meta_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "lg",
+              "padding-bottom": "base",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "flex-start",
+                "row-gap": "xs",
+              },
+            },
+            date_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            date_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            date_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            category_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            category_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            category_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            feature_title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            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",
+              },
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "flex-grow": "1",
+              "row-gap": "base",
+            },
+            meta_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "lg",
+              "padding-bottom": "base",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "flex-start",
+                "row-gap": "xs",
+              },
+            },
+            date_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            date_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            date_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            category_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            category_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            category_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            feature_title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            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",
+              },
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "flex-grow": "1",
+              "row-gap": "base",
+            },
+            meta_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "lg",
+              "padding-bottom": "base",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "flex-start",
+                "row-gap": "xs",
+              },
+            },
+            date_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            date_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            date_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            category_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            category_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            category_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            feature_title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            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",
+              },
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "flex-grow": "1",
+              "row-gap": "base",
+            },
+            meta_container: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "lg",
+              "padding-bottom": "base",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "flex-start",
+                "row-gap": "xs",
+              },
+            },
+            date_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            date_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            date_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            category_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            category_icon: {
+              width: "16px",
+              height: "16px",
+            },
+            category_text: {
+              "font-size": "sm",
+              color: "text-2",
+              "font-weight": "500",
+            },
+            text_container: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            feature_title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            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: {
+              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",
+              },
+            },
+          },
+        ],
+        "carousel-navigation-container": {
+          display: "flex",
+          "justify-content": "center",
+          "margin-top": "2xl",
+        },
+        "carousel-navigation": {
+          display: "flex",
+          "column-gap": "sm",
+          "align-items": "center",
+        },
+        "carousel-navigation-pill": {
+          width: "8px",
+          height: "8px",
+          "border-radius": "8px",
+          "background-color": "var(--color-border)",
+          cursor: "pointer",
+          transition: "all 0.3s ease",
+          "&:hover": {
+            "background-color": "var(--color-brand-secondary)",
+          },
+          filter: "none",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};