@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,639 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header: null,
+  title: "Explore Our Program",
+  "carousel-navigation-container": null,
+  "carousel-navigation": null,
+  "carousel-navigation-arrow-left": " ",
+  "carousel-navigation-arrow-right": " ",
+  cards: [
+    {
+      card: null,
+      header: null,
+      icon: DUMMY_IMAGE,
+      content: null,
+      card_title: "Cardio",
+      description:
+        "This class introduces the fundamental principles of Pilates, focusing on controlled movement...",
+      cta: "Explore More",
+    },
+    {
+      card: null,
+      header: null,
+      icon: DUMMY_IMAGE,
+      content: null,
+      card_title: "Fat Burn",
+      description:
+        "This class introduces the fundamental principles of Pilates, focusing on controlled movement...",
+      cta: "Explore More",
+    },
+    {
+      card: null,
+      header: null,
+      icon: DUMMY_IMAGE,
+      content: null,
+      card_title: "Muscle Gain",
+      description:
+        "This class introduces the fundamental principles of Pilates, focusing on controlled movement...",
+      cta: "Explore More",
+    },
+    {
+      card: null,
+      header: null,
+      icon: DUMMY_IMAGE,
+      content: null,
+      card_title: "Weight Gain",
+      description:
+        "This class introduces the fundamental principles of Pilates, focusing on controlled movement...",
+      cta: "Explore More",
+    },
+  ],
+  "carousel-navigation-arrow-left_leftIcon": {
+    kind: "icon",
+    data: {
+      id: "arrow-left",
+      label: "Arrow Left",
+      tags: ["arrow", "custom", "directional", "left"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.57043 18.82C9.38043 18.82 9.19043 18.75 9.04043 18.6L2.97043 12.53C2.68043 12.24 2.68043 11.76 2.97043 11.47L9.04043 5.4C9.33043 5.11 9.81043 5.11 10.1004 5.4C10.3904 5.69 10.3904 6.17 10.1004 6.46L4.56043 12L10.1004 17.54C10.3904 17.83 10.3904 18.31 10.1004 18.6C9.96043 18.75 9.76043 18.82 9.57043 18.82Z" fill="currentColor"/>\n<path d="M20.4999 12.75H3.66992C3.25992 12.75 2.91992 12.41 2.91992 12C2.91992 11.59 3.25992 11.25 3.66992 11.25H20.4999C20.9099 11.25 21.2499 11.59 21.2499 12C21.2499 12.41 20.9099 12.75 20.4999 12.75Z" fill="currentColor"/>\n</svg>',
+    },
+  },
+  "carousel-navigation-arrow-right_rightIcon": {
+    kind: "icon",
+    data: {
+      id: "arrow-right-1",
+      label: "Arrow Right 1",
+      tags: ["arrow", "custom", "directional", "right"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.4301 18.82C14.2401 18.82 14.0501 18.75 13.9001 18.6C13.6101 18.31 13.6101 17.83 13.9001 17.54L19.4401 12L13.9001 6.46C13.6101 6.17 13.6101 5.69 13.9001 5.4C14.1901 5.11 14.6701 5.11 14.9601 5.4L21.0301 11.47C21.3201 11.76 21.3201 12.24 21.0301 12.53L14.9601 18.6C14.8101 18.75 14.6201 18.82 14.4301 18.82Z" fill="currentColor"/>\n<path d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z" fill="currentColor"/>\n</svg>',
+    },
+  },
+};
+
+export type ICards6Content = typeof DEFAULT_CONTENT;
+
+export const Cards6: IBlock = {
+  category_id: "cards",
+  title: "Cards 6",
+  key: "cards-6",
+  version: "v1",
+  prompt_description:
+    "A carousel of program cards with icons, titles, descriptions, and CTA buttons, featuring navigation arrows for browsing through different program options.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Main layout container for the cards carousel section with proper spacing and alignment.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Container wrapper that centers the content and provides consistent padding across devices.",
+      },
+    },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Header section containing the main title and navigation controls, positioned above the carousel.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the cards section. Should be engaging and describe the program offerings clearly.",
+        min_characters: 12,
+        max_characters: 35,
+      },
+    },
+    {
+      key: "carousel-navigation-container",
+      label: "Carousel Navigation Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation arrows, positioned on the right side of the header.",
+      },
+    },
+    {
+      key: "carousel-navigation-container-mobile",
+      label: "Carousel Navigation Container Mobile",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the navigation arrows for mobile view, positioned below the cards.",
+      },
+    },
+    {
+      key: "carousel-navigation",
+      label: "Carousel Navigation",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Navigation controls wrapper containing the left and right arrow buttons for carousel control.",
+      },
+    },
+    {
+      key: "carousel-navigation-arrow-left",
+      label: "Carousel Navigation Arrow Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Left navigation arrow button to navigate to previous cards in the carousel.",
+      },
+    },
+    {
+      key: "carousel-navigation-arrow-right",
+      label: "Carousel Navigation Arrow Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Right navigation arrow button to navigate to next cards in the carousel.",
+      },
+    },
+    {
+      key: "cards",
+      label: "Cards",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual card container that holds the header, description, and CTA button.",
+          },
+        },
+        {
+          key: "header",
+          label: "Header",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Header container that holds the icon and title in a flex layout.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Program icon or image representing the specific fitness program or service offered.",
+            orientation: "square",
+            size: "medium",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "content",
+          label: "Content",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Content wrapper containing the text elements and CTA button for the card.",
+          },
+        },
+        {
+          key: "card_title",
+          label: "Card Title",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Title of the fitness program or service. Should be concise and descriptive.",
+            min_characters: 4,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief description of the program, highlighting key benefits or features.",
+            min_characters: 50,
+            max_characters: 120,
+          },
+        },
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for users to learn more or sign up for the program.",
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of program cards showcasing different fitness programs or services. Each card should represent a distinct offering with relevant visual and textual content.",
+        min_items: 3,
+        max_items: 6,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        header: {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "lg",
+          },
+        },
+        title: {
+          color: "text-1",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        "carousel-navigation-container": {
+          display: "flex",
+          "justify-content": "flex-end",
+          mobile: {
+            display: "none",
+          },
+        },
+        "carousel-navigation-container-mobile": {
+          display: "none",
+          mobile: {
+            display: "flex",
+            "justify-content": "center",
+            "margin-top": "xl",
+          },
+        },
+        "carousel-navigation": {
+          display: "flex",
+          "column-gap": "sm",
+          "align-items": "center",
+        },
+        "carousel-navigation-arrow-left": {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "background-color": "white",
+          color: "text-2",
+          cursor: "pointer",
+          "padding-top": "none",
+          "padding-bottom": "none",
+          "padding-left": "none",
+          "padding-right": "none",
+          "border-color": "border",
+          "border-width": "1px",
+          "border-style": "solid",
+          width: "48px",
+          height: "48px",
+          "border-radius": "base",
+          "box-shadow": "default",
+          transition: "opacity 0.3s ease, cursor 0.3s ease",
+          mobile: {
+            width: "40px",
+            height: "40px",
+          },
+        },
+        "carousel-navigation-arrow-right": {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "background-color": "white",
+          color: "text-2",
+          cursor: "pointer",
+          "padding-top": "none",
+          "padding-bottom": "none",
+          "padding-left": "none",
+          "padding-right": "none",
+          "border-color": "border",
+          "border-width": "1px",
+          "border-style": "solid",
+          width: "48px",
+          height: "48px",
+          "border-radius": "base",
+          "box-shadow": "default",
+          transition: "opacity 0.3s ease, cursor 0.3s ease",
+          mobile: {
+            width: "40px",
+            height: "40px",
+          },
+        },
+        cards_levoGroup: {
+          number_of_slides: 3,
+          mobile: {
+            number_of_slides: 1,
+          },
+          tablet: {
+            number_of_slides: 2,
+          },
+        },
+        cards: [
+          {
+            card: {
+              "background-color": "brandSecondary",
+              "border-radius": "base",
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "lg",
+              mobile: {
+                "padding-top": "lg",
+                "padding-bottom": "lg",
+                "padding-left": "base",
+                "padding-right": "base",
+                "row-gap": "base",
+              },
+            },
+            header: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+              width: "100%",
+              "justify-content": "center",
+            },
+            icon: {
+              width: "24px",
+              height: "24px",
+              "border-radius": "base",
+              "flex-shrink": "0",
+              mobile: {
+                width: "20px",
+                height: "20px",
+              },
+            },
+            content: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "none",
+            },
+            card_title: {
+              "text-align": "left",
+              "margin-bottom": "none",
+              flex: "1",
+            },
+            description: {
+              color: "text-2",
+              "text-align": "left",
+              "margin-bottom": "lg",
+              "line-height": "1.6",
+              mobile: {
+                "margin-bottom": "base",
+              },
+            },
+            cta: {},
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+              "border-radius": "base",
+              "flex-shrink": "0",
+              mobile: {
+                width: "20px",
+                height: "20px",
+              },
+            },
+            header: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+              width: "100%",
+              "justify-content": "start",
+            },
+            card: {
+              "background-color": "brandSecondary",
+              "border-radius": "base",
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "lg",
+              mobile: {
+                "padding-top": "lg",
+                "padding-bottom": "lg",
+                "padding-left": "base",
+                "padding-right": "base",
+                "row-gap": "base",
+              },
+            },
+            content: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "none",
+            },
+            description: {
+              color: "text-2",
+              "text-align": "left",
+              "margin-bottom": "lg",
+              "line-height": "1.6",
+              mobile: {
+                "margin-bottom": "base",
+              },
+            },
+            cta: {},
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+              "border-radius": "base",
+              "flex-shrink": "0",
+              mobile: {
+                width: "20px",
+                height: "20px",
+              },
+            },
+            header: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+              width: "100%",
+              "justify-content": "start",
+            },
+            card: {
+              "background-color": "brandSecondary",
+              "border-radius": "base",
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "lg",
+              mobile: {
+                "padding-top": "lg",
+                "padding-bottom": "lg",
+                "padding-left": "base",
+                "padding-right": "base",
+                "row-gap": "base",
+              },
+            },
+            content: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "none",
+            },
+            description: {
+              color: "text-2",
+              "text-align": "left",
+              "margin-bottom": "lg",
+              "line-height": "1.6",
+              mobile: {
+                "margin-bottom": "base",
+              },
+            },
+            cta: {},
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+              "border-radius": "base",
+              "flex-shrink": "0",
+              mobile: {
+                width: "20px",
+                height: "20px",
+              },
+            },
+            header: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+              width: "100%",
+              "justify-content": "start",
+            },
+            card: {
+              "background-color": "brandSecondary",
+              "border-radius": "base",
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "lg",
+              mobile: {
+                "padding-top": "lg",
+                "padding-bottom": "lg",
+                "padding-left": "base",
+                "padding-right": "base",
+                "row-gap": "base",
+              },
+            },
+            content: {
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "none",
+            },
+            description: {
+              color: "text-2",
+              "text-align": "left",
+              "margin-bottom": "lg",
+              "line-height": "1.6",
+              mobile: {
+                "margin-bottom": "base",
+              },
+            },
+            cta: {},
+          },
+        ],
+        "carousel-navigation-arrow-left_leftIcon": {
+          height: "24px",
+          width: "24px",
+        },
+        "carousel-navigation-arrow-right_rightIcon": {
+          height: "24px",
+          width: "24px",
+        },
+      },
+      config: {
+        cards_levoGroup: {
+          carousel: {
+            loop: true,
+          },
+        },
+        "carousel-navigation-arrow-left": {
+          button_icons: {
+            left: {
+              enabled: true,
+            },
+          },
+        },
+        "carousel-navigation-arrow-right": {
+          button_icons: {
+            right: {
+              enabled: true,
+            },
+          },
+        },
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+    },
+  ],
+};