@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/event/event-listing.schema.ts

@@ -0,0 +1,1358 @@
+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 DUMMY_ICON = {
+  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,
+  "cta-section": null,
+  "cta-heading": "Upcoming Events of 2025",
+  "cta-button": "",
+  title: "Events",
+  events: [
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Sponsor Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "25 July, 2025",
+      title: "Books, Brighter Futures: A Day for Change",
+      description:
+        "Over 400 children will receive new educational supplies during this Event.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Community Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "15 August, 2025",
+      title: "Stories of Impact: Volunteers Who Inspire",
+      description:
+        "Hear from passionate volunteers about their life-changing moments while working",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Fundraiser Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "3 December, 2025",
+      title: "Voices for a Cause: Music & Giving",
+      description:
+        "Experience an evening of soulful and delightful performances and storytelling.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Workshop Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "10 March, 2025",
+      title: "Digital Skills for Tomorrow",
+      description:
+        "Learn essential digital skills that will help you succeed in the modern workplace.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Health Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "22 September, 2025",
+      title: "Wellness Wednesday: Mind & Body",
+      description:
+        "Join us for a comprehensive wellness program focusing on mental and physical health.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Career Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "8 November, 2025",
+      title: "Career Fair: Your Future Awaits",
+      description:
+        "Connect with top employers and discover exciting career opportunities in your field.",
+    },
+  ],
+  paginationWrapper: null,
+  paginationLeftButton: "Prev",
+  paginationText: "",
+  paginationRightButton: "Next",
+};
+
+const DEFAULT_CONTENT_CTA = {
+  layout: null,
+  container: null,
+  "cta-section": null,
+  "cta-heading": "Upcoming Events of 2025",
+  "cta-button": "View all",
+  title: "Events",
+  events: [
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Sponsor Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "25 July, 2025",
+      title: "Books, Brighter Futures: A Day for Change",
+      description:
+        "Over 400 children will receive new educational supplies during this Event.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Community Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "15 August, 2025",
+      title: "Stories of Impact: Volunteers Who Inspire",
+      description:
+        "Hear from passionate volunteers about their life-changing moments while working",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Fundraiser Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "3 December, 2025",
+      title: "Voices for a Cause: Music & Giving",
+      description:
+        "Experience an evening of soulful and delightful performances and storytelling.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Workshop Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "10 March, 2025",
+      title: "Digital Skills for Tomorrow",
+      description:
+        "Learn essential digital skills that will help you succeed in the modern workplace.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Health Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "22 September, 2025",
+      title: "Wellness Wednesday: Mind & Body",
+      description:
+        "Join us for a comprehensive wellness program focusing on mental and physical health.",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      textWrapper: null,
+      "caption-text": "Career Event",
+      "date-icon-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      publishedAt: "8 November, 2025",
+      title: "Career Fair: Your Future Awaits",
+      description:
+        "Connect with top employers and discover exciting career opportunities in your field.",
+    },
+  ],
+  paginationWrapper: null,
+  paginationLeftButton: "Previous",
+  paginationText: "",
+  paginationRightButton: "Next",
+};
+
+export type IEventListing = typeof DEFAULT_CONTENT;
+
+export const EventListing: IBlock = {
+  category_id: "event",
+  title: "Event Listing",
+  key: "event-listing",
+  version: "v1",
+  prompt_description:
+    "Grid of event cards in two rows, each card featuring a top image, event title, brief description, and date; section headline above and pagination buttons below.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structure and layout of the Events block. No content generation required.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Contains the whole Events section, providing spacing and alignment for visual consistency. No content generation required.",
+      },
+    },
+    {
+      key: "header-container",
+      label: "Header Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the call-to-action section at the top of the events block, holding the main heading and action button. No content generation required.",
+      },
+    },
+    {
+      key: "cta-button",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button displayed next to the main heading. Should encourage exploration, such as 'View all' or 'See more events'.",
+        min_characters: 6,
+        max_characters: 15,
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Block headline centered at the top of the Events section. Should clearly state the purpose of the section, such as 'Events' or a similarly concise title.",
+        min_characters: 5,
+        max_characters: 18,
+      },
+    },
+    {
+      key: "events",
+      label: "Events",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "eventWrapper",
+          label: "Event Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Visual banner or cover image for the event, displayed prominently at the top of each card. Should be inviting and relevant to the event content.",
+            orientation: "landscape",
+            size: "medium",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "text-wrapper",
+          label: "Text Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "text-container",
+          label: "Text Container",
+          field_interface: "BoxWidget",
+        },
+
+        {
+          key: "caption-text",
+          label: "Caption Text",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Small caption or category label for the event, displayed prominently at the top of the card content. Examples: 'Sponsor Event', 'Community Event', 'Fundraiser Event'.",
+            min_characters: 8,
+            max_characters: 25,
+          },
+        },
+        {
+          key: "date-wrapper",
+          label: "Date Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the date icon and date text, arranged in a flex layout. No content generation required.",
+          },
+        },
+        {
+          key: "date-icon",
+          label: "Date Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small calendar or date icon displayed next to the event date. Should be simple and clearly recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "publishedAt-header",
+          label: "Published At Header",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Displays the date and time of the event. Format as 'Month DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
+            min_characters: 16,
+            max_characters: 28,
+          },
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Event card headline. Should be the name or title of the event, immediately catching the user's attention. Aim for clarity and engagement.",
+            min_characters: 8,
+            max_characters: 32,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short summary or description of the event, conveying value and enticing interest. Displayed in one or two lines under the event title. Keep concise yet informative.",
+            min_characters: 40,
+            max_characters: 120,
+          },
+        },
+        {
+          key: "publishedAt",
+          label: "Published At",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Displays the date and time of the event. Format as 'Month DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
+            min_characters: 16,
+            max_characters: 28,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A group representing a grid of event cards. Each card highlights an upcoming or featured event. Intended for listing multiple events at a glance.",
+        min_items: 6,
+        max_items: 6,
+      },
+    },
+    {
+      key: "paginationWrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container holding pagination controls (buttons and info) at the bottom of the event grid. Provides structure and alignment for pagination elements. No content generation required.",
+      },
+    },
+    {
+      key: "paginationLeftButton",
+      label: "Pagination Left Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the previous page of events. Label should be clear and descriptive, such as 'Previous'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "paginationInfo",
+      label: "Pagination Info",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationText",
+      label: "Pagination Text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays the current events page and total pages, e.g., '1/10'. Keep format concise and clear.",
+        min_characters: 3,
+        max_characters: 8,
+      },
+    },
+    {
+      key: "paginationRightButton",
+      label: "Pagination Right Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button for navigating to the next page of events. Label should be clear and descriptive, such as 'Next'.",
+        min_characters: 4,
+        max_characters: 12,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "10xl",
+          "padding-right": "10xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          tablet: {
+            "padding-left": "8xl",
+            "padding-right": "8xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "6xl",
+            "padding-right": "6xl",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+          },
+          filter: "none",
+        },
+        title: {
+          "padding-left": "none",
+          "font-size": "5xl",
+          "font-weight": 600,
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
+        },
+        events_levoGroup: {
+          display: "grid",
+          width: "100%",
+          "grid-template-columns": "repeat(3, 1fr)",
+          "row-gap": "5xl",
+          "column-gap": "5xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, 1fr)",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, 1fr)",
+            "row-gap": "lg",
+          },
+        },
+        events: [
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+              filter: "none",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              filter: "none",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+              filter: "none",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              filter: "none",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+            },
+            image: {
+              width: "100%",
+            },
+            textWrapper: {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            title: {
+              "font-weight": 400,
+              "font-size": "xl",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+            },
+            publishedAt: {
+              "font-size": "sm",
+            },
+            "text-container": {
+              filter: "none",
+              display: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              filter: "none",
+            },
+          },
+        ],
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        "cta-button": {
+          filter: "none",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+    {
+      key: "cta-variant",
+      title: "CTA Variant",
+      styles: {
+        layout: {
+          "padding-left": "10xl",
+          "padding-right": "10xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          tablet: {
+            "padding-left": "8xl",
+            "padding-right": "8xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "6xl",
+            "padding-right": "6xl",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+          },
+          filter: "none",
+        },
+        "header-container": {
+          display: "flex",
+          width: "100%",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "3xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "lg",
+          },
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": 700,
+          color: "var(--color-text-1)",
+          margin: "0",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        "cta-button": {
+          "background-color": "transparent",
+          color: "var(--color-brand)",
+          "font-size": "lg",
+          "font-weight": 500,
+          "text-decoration": "none",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+          "&:hover": {
+            "text-decoration": "underline",
+          },
+          filter: "none",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
+          filter: "none",
+        },
+        events_levoGroup: {
+          display: "grid",
+          width: "100%",
+          "grid-template-columns": "repeat(3, 1fr)",
+          "row-gap": "5xl",
+          "column-gap": "5xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, 1fr)",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, 1fr)",
+            "row-gap": "lg",
+          },
+        },
+        events: [
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+              filter: "none",
+              "padding-bottom": "base",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+              filter: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "xs",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "2xs",
+              filter: "none",
+              " border-left": "1px solid #000",
+              "padding-left": "2xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+              filter: "none",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+              filter: "none",
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+              filter: "none",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+              filter: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+              filter: "none",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+              filter: "none",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "lg",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+              filter: "none",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "lg",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "lg",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "lg",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+            },
+          },
+          {
+            eventWrapper: {
+              "border-radius": "xl",
+              overflow: "hidden",
+              "box-shadow":
+                "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+              position: "relative",
+            },
+            image: {
+              width: "100%",
+              height: "200px",
+              "object-fit": "cover",
+            },
+            "text-wrapper": {
+              "padding-left": "xl",
+              "padding-top": "2xl",
+              "padding-right": "xl",
+              "padding-bottom": "base",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "lg",
+              filter: "none",
+            },
+            "text-container": {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              filter: "none",
+              "column-gap": "lg",
+            },
+            "caption-text": {
+              "font-family": "var(--font-body)",
+              color: "white",
+              "font-size": "xs",
+              "line-height": "normal",
+              "background-color": "var(--color-brand)",
+              "font-weight": 500,
+              "padding-left": "sm",
+              "padding-right": "sm",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "border-radius": "3xl",
+              filter: "none",
+            },
+            "date-wrapper": {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+            },
+            "date-icon": {
+              width: "16px",
+              height: "16px",
+            },
+            "publishedAt-header": {
+              "font-size": "sm",
+              color: "var(--color-text-2)",
+              "font-weight": 500,
+            },
+            title: {
+              "font-weight": 600,
+              "font-size": "xl",
+              "margin-bottom": "xs",
+              color: "var(--color-text-1)",
+            },
+            description: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              "-webkit-box-orient": "vertical",
+              "-webkit-line-clamp": 3,
+              color: "var(--color-text-2)",
+              "line-height": 1.5,
+            },
+            publishedAt: {
+              display: "none",
+            },
+          },
+        ],
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+      },
+      content: DEFAULT_CONTENT_CTA,
+      config: {},
+    },
+  ],
+};