@levo-so/blocks 0.1.54 → 0.1.58

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

@@ -0,0 +1,741 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  events: [
+    {
+      title: "Celebrating 25 Years of Innovation",
+      subtitle: "Digital Transformation Excellence",
+      description: "<p>Celebrating 25 Years of Innovation</p>",
+      year: "2025",
+      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",
+        },
+      },
+    },
+    {
+      title: "New Office in Australia",
+      subtitle: "Expanded into ANZ Region",
+      description: "<p>New Office in Australia expanded into ANZ region</p>",
+      year: "2023",
+      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",
+        },
+      },
+    },
+    {
+      title: "Opened Office in Philippines",
+      subtitle: "Connecting Large Client Base",
+      description:
+        "<p>Opened Office on Philippines that connects large client base</p>",
+      year: "2016",
+      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",
+        },
+      },
+    },
+    {
+      title: "First International Office in India",
+      subtitle: "Global Expansion Beginning",
+      description:
+        "<p>Opened our first office in India, the first global expansion</p>",
+      year: "2005",
+      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",
+        },
+      },
+    },
+  ],
+  title: "Our Journey Through the Years",
+  description:
+    "<p>Lorem Ipsum was founded in Silicon Valley to help large enterprises maintain consistent branding across printed materials. By 2004, the company evolved into a business consulting firm.</p>",
+};
+
+export type ITimeline1 = typeof DEFAULT_CONTENT;
+
+export const Timeline1: IBlock = {
+  category_id: "timeline",
+  title: "Timeline 1",
+  key: "timeline-1",
+  version: "v1",
+  prompt_description:
+    "A timeline block that displays company milestones and events in a chronological order with alternating left-right layout, featuring images, titles, subtitles, and descriptions.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_wrapper",
+      label: "Header Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "center_line",
+      label: "Center Line",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "events",
+      label: "Timeline Events",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "timeline_line",
+          label: "Line",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "timeline_dot",
+          label: "Dot",
+          field_interface: "BoxWidget",
+        },
+
+        {
+          key: "timeline_wrapper",
+          label: "Timeline Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "timeline_dot_wrapper",
+          label: "Timeline Dot Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "description",
+          label: "Event Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "A detailed description of the event, milestone, or achievement. Should provide meaningful context.",
+            min_characters: 20,
+            max_characters: 150,
+          },
+        },
+        {
+          key: "year",
+          label: "Event Year",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "The year when the event occurred. Should be a 4-digit year format.",
+            min_characters: 4,
+            max_characters: 4,
+          },
+        },
+        {
+          key: "image",
+          label: "Event Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "An image that represents the event or milestone. Should be relevant and high-quality.",
+          },
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          width: "100%",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          position: "relative",
+        },
+        events: [
+          {
+            wrapper: {
+              display: "flex",
+              "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+              "align-items": "center",
+              gap: "2xl",
+              "flex-direction": "row-reverse",
+              mobile: {
+                "flex-direction": "column",
+                width: "100%",
+              },
+            },
+            year: {
+              "background-color": "brand",
+              width: "fit-content",
+              "font-size": "xl",
+              "padding-left": "base",
+              "padding-right": "base",
+              "padding-top": "6xs",
+              "padding-bottom": "6xs",
+              color: "white",
+              "border-radius": "3xl",
+              mobile: {
+                "font-size": "sm",
+                "margin-right": "16xl",
+              },
+              "margin-right": "14xl",
+              tablet: {
+                "margin-right": "12xl",
+              },
+            },
+            timeline_right: {
+              display: "flex",
+              "justify-content": "end",
+              "column-gap": "6xl",
+              "margin-left": "sm",
+              position: "relative",
+              "align-items": "center",
+            },
+            timeline_left: {
+              display: "block",
+            },
+            timeline_dot: {
+              "background-color": "brand",
+              position: "absolute",
+              right: "50%",
+              height: "1.5rem",
+              width: "1.5rem",
+              "border-radius": "9999px",
+              transform: "translateX(50%) translateY(-50%)",
+              "box-shadow": "0 0 0 0.75rem rgba(215, 106, 43, 0.1)",
+              "z-index": "2",
+            },
+            timeline_line: {
+              width: "65px",
+              "background-color": "brand",
+              position: "absolute",
+              right: "57%",
+              height: "0.25rem",
+              transform: "translateX(100%) translateY(-50%)",
+              "border-radius": "3xl",
+              tablet: {
+                "margin-right": "4xl",
+              },
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              width: "40%",
+              mobile: {
+                width: "100%",
+              },
+            },
+            description: {
+              color: "text-1",
+              "font-size": "2xl",
+              "font-weight": 700,
+              mobile: {
+                "font-size": "lg",
+              },
+              "z-index": "50",
+            },
+            timeline_wrapper: {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              "margin-bottom": "none",
+              tablet: {
+                "column-gap": "none",
+              },
+            },
+            timeline_dot_wrapper: {},
+            image: {
+              mobile: {},
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+              "align-items": "center",
+              gap: "2xl",
+              mobile: {
+                width: "100%",
+                "flex-direction": "column",
+              },
+            },
+            year: {
+              "background-color": "brand",
+              width: "fit-content",
+              "font-size": "xl",
+              "padding-left": "base",
+              "padding-right": "base",
+              "padding-top": "6xs",
+              "padding-bottom": "6xs",
+              color: "white",
+              "border-radius": "3xl",
+              mobile: {
+                "font-size": "sm",
+                "margin-left": "13xl",
+              },
+              "margin-left": "10xl",
+              tablet: {
+                "margin-left": "8xl",
+              },
+            },
+            timeline_left: {
+              position: "relative",
+              display: "flex",
+              width: "100%",
+              "align-items": "center",
+              "justify-content": "start",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              width: "40%",
+              mobile: {
+                width: "100%",
+              },
+            },
+            description: {
+              color: "text-1",
+              "font-size": "2xl",
+              "font-weight": 700,
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+            timeline_dot: {
+              "background-color": "brand",
+              position: "absolute",
+              right: "50%",
+              height: "1.5rem",
+              width: "1.5rem",
+              "border-radius": "9999px",
+              transform: "translateX(50%) translateY(-50%)",
+              "box-shadow": "0 0 0 0.75rem rgba(215, 106, 43, 0.1)",
+              "z-index": "2",
+            },
+            timeline_right: {
+              "background-color": "icon-secondary",
+            },
+            timeline_line: {
+              "background-color": "brand",
+              position: "absolute",
+              left: "57%",
+              height: "0.25rem",
+              width: "65px",
+              transform: "translateX(-100%) translateY(-50%)",
+              "border-radius": "3xl",
+              tablet: {
+                "margin-left": "5xl",
+              },
+            },
+            timeline_wrapper: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              "column-gap": "8xl",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+              "align-items": "center",
+              gap: "2xl",
+              "flex-direction": "row-reverse",
+              mobile: {
+                width: "100%",
+                "flex-direction": "column",
+              },
+            },
+            year: {
+              "background-color": "brand",
+              width: "fit-content",
+              "font-size": "xl",
+              "padding-left": "base",
+              "padding-right": "base",
+              "padding-top": "6xs",
+              "padding-bottom": "6xs",
+              color: "white",
+              "border-radius": "3xl",
+              mobile: {
+                "font-size": "sm",
+                "margin-right": "16xl",
+              },
+              "margin-right": "14xl",
+              tablet: {
+                "margin-right": "12xl",
+              },
+            },
+            timeline_right: {
+              display: "flex",
+              "justify-content": "end",
+              "column-gap": "6xl",
+              "margin-left": "sm",
+              position: "relative",
+              "align-items": "center",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              width: "40%",
+              mobile: {
+                width: "100%",
+              },
+            },
+            description: {
+              color: "text-1",
+              "font-size": "2xl",
+              "font-weight": 700,
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+            timeline_dot: {
+              "background-color": "brand",
+              position: "absolute",
+              right: "50%",
+              height: "1.5rem",
+              width: "1.5rem",
+              "border-radius": "9999px",
+              transform: "translateX(50%) translateY(-50%)",
+              "box-shadow": "0 0 0 0.75rem rgba(215, 106, 43, 0.1)",
+              "z-index": "2",
+            },
+            timeline_line: {
+              width: "65px",
+              "background-color": "brand",
+              position: "absolute",
+              right: "57%",
+              height: "0.25rem",
+              transform: "translateX(100%) translateY(-50%)",
+              "border-radius": "3xl",
+              tablet: {
+                "margin-right": "4xl",
+              },
+            },
+            timeline_wrapper: {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+              "align-items": "center",
+              gap: "2xl",
+              mobile: {
+                width: "100%",
+                "flex-direction": "column",
+              },
+            },
+            year: {
+              "background-color": "brand",
+              width: "fit-content",
+              "font-size": "xl",
+              "padding-left": "base",
+              "padding-right": "base",
+              "padding-top": "6xs",
+              "padding-bottom": "6xs",
+              color: "white",
+              "border-radius": "3xl",
+              mobile: {
+                "font-size": "sm",
+                "margin-right": "none",
+                "margin-left": "13xl",
+              },
+              "margin-left": "10xl",
+              tablet: {
+                "margin-left": "8xl",
+              },
+            },
+            timeline_left: {
+              position: "relative",
+              display: "flex",
+              width: "100%",
+              "align-items": "center",
+              "justify-content": "start",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              width: "40%",
+              mobile: {
+                width: "100%",
+              },
+            },
+            description: {
+              color: "text-1",
+              "font-size": "2xl",
+              "font-weight": 700,
+              mobile: {
+                "font-size": "lg",
+              },
+            },
+            timeline_dot: {
+              "background-color": "brand",
+              position: "absolute",
+              right: "50%",
+              height: "1.5rem",
+              width: "1.5rem",
+              "border-radius": "9999px",
+              transform: "translateX(50%) translateY(-50%)",
+              "box-shadow": "0 0 0 0.75rem rgba(215, 106, 43, 0.1)",
+              "z-index": "2",
+            },
+            timeline_line: {
+              "background-color": "brand",
+              position: "absolute",
+              left: "57%",
+              height: "0.25rem",
+              width: "65px",
+              transform: "translateX(-100%) translateY(-50%)",
+              "border-radius": "3xl",
+              tablet: {
+                "margin-left": "5xl",
+              },
+            },
+            timeline_wrapper: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              "column-gap": "8xl",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+              "align-items": "center",
+              gap: "2xl",
+            },
+            year: {
+              "background-color": "brand",
+              width: "fit-content",
+              "font-size": "xl",
+              "padding-left": "base",
+              "padding-right": "base",
+              "padding-top": "6xs",
+              "padding-bottom": "6xs",
+              color: "white",
+              "border-radius": "3xl",
+              mobile: {
+                "font-size": "sm",
+              },
+              "margin-left": "10xl",
+            },
+            timeline_left: {
+              position: "relative",
+              display: "flex",
+              width: "100%",
+              "align-items": "center",
+              "justify-content": "start",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              width: "40%",
+            },
+            description: {
+              color: "text-1",
+              "font-size": "2xl",
+              "font-weight": 700,
+              mobile: {
+                "font-size": "base",
+              },
+            },
+            timeline_dot: {
+              "background-color": "brand",
+              position: "absolute",
+              left: "50%",
+              height: "1.5rem",
+              width: "1.5rem",
+              "border-radius": "9999px",
+              transform: "translateX(-50%) translateY(-50%)",
+            },
+            timeline_line: {
+              "background-color": "brand",
+              position: "absolute",
+              left: "57%",
+              height: "0.25rem",
+              width: "65px",
+              transform: "translateX(-100%) translateY(-50%)",
+            },
+            timeline_wrapper: {
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center",
+              "column-gap": "8xl",
+            },
+          },
+        ],
+        center_line: {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          left: "50%",
+          "z-index": "-40",
+          width: "0.25rem",
+          transform: "translateX(-50%)",
+          "background-color": "#fbeae0",
+        },
+        header_wrapper: {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "5xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "base",
+          },
+        },
+        title: {
+          width: "50%",
+          tablet: {
+            width: "100%",
+            "text-align": "center",
+          },
+        },
+        description: {
+          width: "40%",
+          tablet: {
+            width: "100%",
+            "text-align": "center",
+          },
+        },
+        events_levoGroup: {
+          mobile: {
+            display: "block",
+            width: "100%",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};