@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,746 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  content_wrapper: null,
+  text_wrapper: null,
+  label: "Portfolio",
+  title: "Investment Solutions That Work",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  hero_ctas: [
+    {
+      button: "Learn More",
+    },
+  ],
+  hero_images: [
+    {
+      image: {
+        id: "7141014160938075687",
+        location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "1080w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          "1200w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+          "1920w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+          "320w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "750w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+          "828w":
+            "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+          path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+        },
+      },
+    },
+  ],
+};
+
+export type IHero1Content = typeof DEFAULT_CONTENT;
+
+export const Hero1: IBlock = {
+  category_id: "hero",
+  title: "Hero 1",
+  key: "hero-1",
+  version: "v1",
+  prompt_description:
+    "Large image on the left with a bold headline, supporting text, and a prominent call-to-action button arranged vertically on the right.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall horizontal split layout of this hero section block, with a large left panel for the hero image and a right panel containing text and a button. This should create a visually balanced, modern hero section.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Provides structural alignment and padding for the hero section, ensuring content is centered within the available viewport. Use a moderate max-width and generous horizontal padding for a clean, professional look.",
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A flexbox container holding the hero image on the left and the text/button stack on the right. Ensure space between elements and vertical centering to create a polished, spacious hero layout.",
+      },
+    },
+    {
+      key: "text_wrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A vertical stack grouping the heading, subtitle, and call-to-action button together. Should align items to the left and provide ample vertical spacing for readability and focus.",
+      },
+    },
+    {
+      key: "label_wrapper",
+      label: "Label Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "horizontal_divider",
+      label: "Horizontal Divider",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "label",
+      label: "Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Small label text that appears before the main title. Use this for category tags, announcements, or brief descriptive text.",
+        min_characters: 4,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading of the hero section. Use a clear, confident, and succinct statement that communicates the value proposition or main service offered. Keep the tone professional, trustworthy, and aspirational.",
+        min_characters: 24,
+        max_characters: 48,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Brief supporting copy under the main heading. Summarize offerings or benefits in a concise, informative manner. Maintain a helpful, expert, and approachable tone. This should be 1-2 short sentences.",
+        min_characters: 80,
+        max_characters: 180,
+      },
+    },
+    {
+      key: "hero_ctas",
+      label: "Call to Action",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button label. Use clear, actionable language that invites the user to learn more or take the next step. The tone should be direct and encouraging.",
+            min_characters: 8,
+            max_characters: 18,
+          },
+        },
+      ],
+    },
+    {
+      key: "hero_images",
+      label: "Hero Images",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "MediaWidget",
+          hint: {
+            prompt_description:
+              "A large, visually impactful image to the left of the hero section. Use a simple, brand-relevant illustration, product, or landscape. Should be clean, professional, and not distract from the text. Avoid excessive detail or text in the image.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+      ],
+    },
+  ],
+
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          width: "100%",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          flex: "1",
+          "flex-direction": "row-reverse",
+          "align-items": "center",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          width: "50%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          mobile: {
+            width: "100%",
+          },
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+        },
+        label: {
+          color: "text-2",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          color: "text-2",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          gap: "base",
+          "flex-wrap": "wrap",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+        hero_images_levoGroup: {
+          width: "50%",
+          mobile: {
+            width: "100%",
+          },
+        },
+        hero_images: [
+          {
+            image: {
+              width: "100%",
+              "border-radius": "base",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+    {
+      title: "Card",
+      key: "card",
+      styles: {
+        layout: {
+          width: "100%",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          padding: "base",
+          "background-color": "background-1",
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "border-radius": "base",
+          "background-color": "white",
+          "box-shadow": "default",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          width: "50%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          mobile: {
+            width: "100%",
+          },
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+        },
+        label: {
+          color: "text-2",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          color: "text-2",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          gap: "base",
+          "flex-wrap": "wrap",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+        hero_images_levoGroup: {
+          width: "50%",
+          mobile: {
+            width: "100%",
+          },
+        },
+        hero_images: [
+          {
+            image: {
+              width: "100%",
+              "border-radius": "base",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+    {
+      title: "Card Image Left",
+      key: "card_image_left",
+      styles: {
+        layout: {
+          width: "100%",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          padding: "base",
+          "background-color": "background-1",
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          flex: "1",
+          "flex-direction": "row-reverse",
+          "align-items": "center",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "border-radius": "base",
+          "background-color": "white",
+          "box-shadow": "default",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          width: "50%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          mobile: {
+            width: "100%",
+          },
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+        },
+        label: {
+          color: "text-2",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          color: "text-2",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          gap: "base",
+          "flex-wrap": "wrap",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+        hero_images_levoGroup: {
+          width: "50%",
+          mobile: {
+            width: "100%",
+          },
+        },
+        hero_images: [
+          {
+            image: {
+              width: "100%",
+              "border-radius": "base",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+    {
+      title: "Full Background Image",
+      key: "full_background_image",
+      styles: {
+        layout: {
+          position: "relative",
+          width: "100%",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          flex: "1",
+          "flex-direction": "row",
+          "justify-content": "flex-start",
+          "align-items": "center",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "padding-left": "4xl",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          tablet: {
+            "padding-left": "2xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "flex-direction": "column",
+          },
+        },
+        content_wrapper: {
+          position: "relative",
+          "z-index": "1",
+          display: "flex",
+          width: "100%",
+          "max-width": "50%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          mobile: {
+            width: "100%",
+            "max-width": "100%",
+          },
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+        },
+        label: {
+          color: "white",
+        },
+        title: {
+          color: "white",
+        },
+        description: {
+          color: "white",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          gap: "base",
+          "flex-wrap": "wrap",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+        hero_images_levoGroup: {
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          bottom: "0",
+          right: "0",
+          padding: "lg",
+          mobile: {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: "0",
+            left: "0",
+            bottom: "0",
+            right: "0",
+            padding: "sm",
+          },
+        },
+        hero_images: [
+          {
+            image: {
+              "border-radius": "base",
+              width: "100%",
+              height: "100%",
+              "object-fit": "cover",
+              "object-position": "center",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+    {
+      title: "Vertical Content",
+      key: "vertical_content",
+      styles: {
+        layout: {
+          position: "relative",
+          width: "100%",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          flex: "1",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          mobile: {
+            "padding-left": "lg",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "flex-direction": "column",
+          },
+        },
+        content_wrapper: {
+          position: "relative",
+          "z-index": "1",
+          display: "flex",
+          width: "100%",
+          "max-width": "50%",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "lg",
+          mobile: {
+            width: "100%",
+          },
+        },
+        text_wrapper: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "text-align": "center",
+          "row-gap": "base",
+        },
+        label: {
+          color: "text-2",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          color: "text-2",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          gap: "base",
+          "flex-wrap": "wrap",
+          "justify-content": "center",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+        hero_images_levoGroup: {
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          bottom: "0",
+          right: "0",
+          padding: "lg",
+          mobile: {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: "0",
+            left: "0",
+            bottom: "0",
+            right: "0",
+            padding: "sm",
+          },
+        },
+        hero_images: [
+          {
+            image: {
+              width: "100%",
+              "border-radius": "base",
+            },
+          },
+        ],
+        label_wrapper: {
+          display: "flex",
+          "justify-content": "center",
+          "align-items": "center",
+          "flex-direction": "row",
+        },
+        horizontal_divider: {
+          width: "60px",
+          height: "2px",
+          "background-color": " #00C896",
+          "padding-top": "none",
+          "padding-bottom": "none",
+          "margin-top": "none",
+          "margin-bottom": "none",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+  ],
+};