@levo-so/blocks 0.1.115 → 0.2.1

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@levo-so/blocks",
   "description": "Set of blocks for Levo studio",
-  "version": "0.1.115",
+  "version": "0.2.1",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "dependencies": {
     "dayjs": "1.11.13",
-    "embla-carousel-auto-scroll": "8.6.0",
-    "embla-carousel-react": "8.6.0",
     "lucide-react": "0.575.0",
-    "use-debounce": "10.0.2"
+    "use-debounce": "10.0.2",
+    "@levo/utils": "0.0.0"
   },
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "typescript": "5.9.3",
-    "@levo-so/core": "0.1.113",
-    "@levo-so/react": "0.1.113",
-    "@levo-so/studio": "0.1.115",
-    "@levo/ts-config": "0.0.0"
+    "@levo-so/core": "0.2.1",
+    "@levo-so/react": "0.2.1",
+    "@levo/ts-config": "0.0.0",
+    "@levo-so/studio": "0.2.1"
   },
   "exports": {
     ".": "./src/index.ts"
@@ -30,9 +29,9 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@levo-so/studio": "0.1.115",
-    "@levo-so/core": "0.1.113",
-    "@levo-so/react": "0.1.113"
+    "@levo-so/core": "0.2.1",
+    "@levo-so/studio": "0.2.1",
+    "@levo-so/react": "0.2.1"
   },
   "publishConfig": {
     "access": "public"

package/src/blocks/event/event-details-2.schema.ts

@@ -0,0 +1,635 @@
+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 CALENDAR_ICON = {
+  kind: "icon",
+  data: {
+    id: "calendar-1",
+    label: "Calendar 1",
+    tags: ["calendar", "custom", "time"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 14.5001C8.37 14.5001 8.24 14.4701 8.12 14.4201C7.99 14.3701 7.89 14.3001 7.79 14.2101C7.61 14.0201 7.5 13.7701 7.5 13.5001C7.5 13.3701 7.53 13.2401 7.58 13.1201C7.63 13.0001 7.7 12.8901 7.79 12.7901C7.89 12.7001 7.99 12.6301 8.12 12.5801C8.48 12.4301 8.93 12.5101 9.21 12.7901C9.39 12.9801 9.5 13.2401 9.5 13.5001C9.5 13.5601 9.49 13.6301 9.48 13.7001C9.47 13.7601 9.45 13.8201 9.42 13.8801C9.4 13.9401 9.37 14.0001 9.33 14.0601C9.3 14.1101 9.25 14.1601 9.21 14.2101C9.02 14.3901 8.76 14.5001 8.5 14.5001Z" fill="var(--color-icon-primary)"/>\n<path d="M12 14.5C11.87 14.5 11.74 14.47 11.62 14.42C11.49 14.37 11.39 14.3 11.29 14.21C11.11 14.02 11 13.77 11 13.5C11 13.37 11.03 13.24 11.08 13.12C11.13 13 11.2 12.89 11.29 12.79C11.39 12.7 11.49 12.63 11.62 12.58C11.98 12.42 12.43 12.51 12.71 12.79C12.89 12.98 13 13.24 13 13.5C13 13.56 12.99 13.63 12.98 13.7C12.97 13.76 12.95 13.82 12.92 13.88C12.9 13.94 12.87 14 12.83 14.06C12.8 14.11 12.75 14.16 12.71 14.21C12.52 14.39 12.26 14.5 12 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 14.5C15.37 14.5 15.24 14.47 15.12 14.42C14.99 14.37 14.89 14.3 14.79 14.21C14.75 14.16 14.71 14.11 14.67 14.06C14.63 14 14.6 13.94 14.58 13.88C14.55 13.82 14.53 13.76 14.52 13.7C14.51 13.63 14.5 13.56 14.5 13.5C14.5 13.24 14.61 12.98 14.79 12.79C14.89 12.7 14.99 12.63 15.12 12.58C15.49 12.42 15.93 12.51 16.21 12.79C16.39 12.98 16.5 13.24 16.5 13.5C16.5 13.56 16.49 13.63 16.48 13.7C16.47 13.76 16.45 13.82 16.42 13.88C16.4 13.94 16.37 14 16.33 14.06C16.3 14.11 16.25 14.16 16.21 14.21C16.02 14.39 15.76 14.5 15.5 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 17.9999C8.37 17.9999 8.24 17.97 8.12 17.92C8 17.87 7.89 17.7999 7.79 17.7099C7.61 17.5199 7.5 17.2599 7.5 16.9999C7.5 16.8699 7.53 16.7399 7.58 16.6199C7.63 16.4899 7.7 16.38 7.79 16.29C8.16 15.92 8.84 15.92 9.21 16.29C9.39 16.48 9.5 16.7399 9.5 16.9999C9.5 17.2599 9.39 17.5199 9.21 17.7099C9.02 17.8899 8.76 17.9999 8.5 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 17.9999C11.74 17.9999 11.48 17.8899 11.29 17.7099C11.11 17.5199 11 17.2599 11 16.9999C11 16.8699 11.03 16.7399 11.08 16.6199C11.13 16.4899 11.2 16.38 11.29 16.29C11.66 15.92 12.34 15.92 12.71 16.29C12.8 16.38 12.87 16.4899 12.92 16.6199C12.97 16.7399 13 16.8699 13 16.9999C13 17.2599 12.89 17.5199 12.71 17.7099C12.52 17.8899 12.26 17.9999 12 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 18C15.24 18 14.98 17.89 14.79 17.71C14.7 17.62 14.63 17.51 14.58 17.38C14.53 17.26 14.5 17.13 14.5 17C14.5 16.87 14.53 16.74 14.58 16.62C14.63 16.49 14.7 16.38 14.79 16.29C15.02 16.06 15.37 15.95 15.69 16.02C15.76 16.03 15.82 16.05 15.88 16.08C15.94 16.1 16 16.13 16.06 16.17C16.11 16.2 16.16 16.25 16.21 16.29C16.39 16.48 16.5 16.74 16.5 17C16.5 17.26 16.39 17.52 16.21 17.71C16.02 17.89 15.76 18 15.5 18Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/>\n<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const TIME_ICON = {
+  kind: "icon",
+  data: {
+    id: "clock",
+    label: "Clock",
+    tags: ["clock", "custom", "directional", "time"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M15.7096 15.93C15.5796 15.93 15.4496 15.9 15.3296 15.82L12.2296 13.97C11.4596 13.51 10.8896 12.5 10.8896 11.61V7.51001C10.8896 7.10001 11.2296 6.76001 11.6396 6.76001C12.0496 6.76001 12.3896 7.10001 12.3896 7.51001V11.61C12.3896 11.97 12.6896 12.5 12.9996 12.68L16.0996 14.53C16.4596 14.74 16.5696 15.2 16.3596 15.56C16.2096 15.8 15.9596 15.93 15.7096 15.93Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "main-wrapper": null,
+  "hero-card": null,
+  "hero-image": {
+    id: "event-hero-image",
+    location: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop",
+    kind: "image",
+    mimetype: "image/jpeg",
+    srcset: {
+      "320w": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=320&h=200&fit=crop",
+      "640w": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=640&h=320&fit=crop",
+      "800w": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop",
+      "1200w": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&h=600&fit=crop",
+      path: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=320&h=200&fit=crop 320w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=640&h=320&fit=crop 640w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop 800w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&h=600&fit=crop 1200w",
+    },
+  },
+  "hero-content": null,
+  title: "Annual Technology Summit 2024",
+  "event-info": null,
+  "start-date-wrapper": null,
+  "date-icon": CALENDAR_ICON,
+  "start-date": "March 15, 2024",
+  "end-date-wrapper": null,
+  "end-date-icon": CALENDAR_ICON,
+  "end-date": "March 15, 2024",
+  "time-wrapper": null,
+  "time-icon": TIME_ICON,
+  "time-range": "09:00 AM - 05:00 PM",
+  "kind-wrapper": null,
+  "kind-icon": DUMMY_IMAGE,
+  kind: "Conference",
+  "timing-wrapper": null,
+  "timing-icon": DUMMY_IMAGE,
+  timing: "Full Day",
+  "content-section": null,
+  "main-content": null,
+  "register-button": "Register Now",
+  "registration-ended": "The registration for this event has ended.",
+  event: null,
+  description:
+    "Join us for an exciting day of technology insights, networking opportunities, and industry expertise. Our annual summit brings together thought leaders, innovators, and professionals to explore the latest trends in digital transformation, artificial intelligence, and emerging technologies. Experience keynote presentations, interactive workshops, and valuable networking sessions designed to accelerate your professional growth.",
+  "contact-sidebar": null,
+  "contact-card": null,
+  "contact-title": "Event Contact",
+  "contact-details": null,
+  "name-field": null,
+  "name-label": "Name:",
+  "name-value": "Sarah Johnson",
+  "email-field": null,
+  "email-label": "Email:",
+  "email-value": "events@techsummit.com",
+  "phone-field": null,
+  "phone-label": "Phone:",
+  "phone-value": "+1 (555) 123-4567",
+  starts_at: "2024-03-15T09:00:00Z",
+  ends_at: "2024-03-15T17:00:00Z",
+};
+
+export type IEventDetailsContent = typeof DEFAULT_CONTENT & {
+  event?: {
+    ends_at?: string;
+    [key: string]: unknown;
+  } | null;
+  starts_at?: string;
+  ends_at?: string;
+  kind?: string;
+  timing?: string;
+  id?: string;
+  external_ticketing?: string;
+};
+
+export const EventDetails2: IBlock = {
+  category_id: "event",
+  title: "Event Details 2",
+  key: "event-details-2",
+  version: "v1",
+  prompt_description:
+    "Detailed event page featuring hero image, event information, registration button, event description, and contact details sidebar",
+  source: [{ required: true, module: "event", type: "page" }],
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structure and layout of the Event Details block. No content generation required.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Contains the whole Event Details section, providing spacing and alignment. No content generation required.",
+      },
+    },
+    {
+      key: "hero-card",
+      label: "Hero Card",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Card container for the hero section with image and basic event info. No content generation required.",
+      },
+    },
+    {
+      key: "hero-image",
+      label: "Hero Image",
+      field_interface: "ImageWidget",
+      hint: {
+        prompt_description: "Main event cover image showcasing the event theme or venue.",
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "cover_image",
+        },
+      },
+    },
+    {
+      key: "hero-content",
+      label: "Hero Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for hero text content including title and event info. No content generation required.",
+      },
+    },
+    {
+      key: "title",
+      label: "Event Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description: "Main event title that clearly describes the event name and purpose.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "title",
+        },
+      },
+    },
+    {
+      key: "event-info",
+      label: "Event Info Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for event metadata like date, time, type. No content generation required.",
+      },
+    },
+    {
+      key: "start-date-wrapper",
+      label: "Start Date Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for start date information. No content generation required.",
+      },
+    },
+    {
+      key: "date-icon",
+      label: "Date Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing date/calendar information.",
+      },
+    },
+    {
+      key: "starts_at",
+      label: "Start Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event start date in readable format.",
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "starts_at",
+        },
+      },
+    },
+    {
+      key: "id",
+      label: "Event ID",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "external_ticketing",
+      label: "External Ticketing URL",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "end-date-wrapper",
+      label: "End Date Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for end date information. No content generation required.",
+      },
+    },
+    {
+      key: "end-date-icon",
+      label: "End Date Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing end date/calendar information.",
+      },
+    },
+    {
+      key: "ends_at",
+      label: "End Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event end date in readable format.",
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "ends_at",
+        },
+      },
+    },
+    {
+      key: "time-wrapper",
+      label: "Time Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for time range information. No content generation required.",
+      },
+    },
+    {
+      key: "time-icon",
+      label: "Time Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing time/clock information.",
+      },
+    },
+    {
+      key: "time-range",
+      label: "Time Range",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event time range from start to end time.",
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "starts_at",
+        },
+      },
+    },
+    {
+      key: "platform-wrapper",
+      label: "Platform Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for platform information. No content generation required.",
+      },
+    },
+    {
+      key: "platform-icon",
+      label: "Platform Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing platform/web information.",
+      },
+    },
+    {
+      key: "platform",
+      label: "Platform",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event platform information.",
+      },
+    },
+    {
+      key: "content-section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main content area containing description and contact sidebar. No content generation required.",
+      },
+    },
+    {
+      key: "main-content",
+      label: "Main Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Primary content area with registration button and description. No content generation required.",
+      },
+    },
+    {
+      key: "register-button",
+      label: "Registration Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button for event registration. Should be compelling and action-oriented.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "registration-ended",
+      label: "Registration Ended Message",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Message shown when event registration has ended.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "event",
+      label: "Event Object",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Event data object for registration logic. No content generation required.",
+      },
+    },
+    {
+      key: "description",
+      label: "Event Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Detailed event description explaining what attendees can expect, key highlights, and benefits of attending.",
+        min_characters: 150,
+        max_characters: 400,
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "description",
+        },
+      },
+    },
+    {
+      key: "contact-card",
+      label: "Contact Card",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Card containing contact details for the event. No content generation required.",
+      },
+    },
+    {
+      key: "contact-title",
+      label: "Contact Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Title for the contact section, typically 'Contact Us' or 'Event Contact'.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "contact-details",
+      label: "Contact Details Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for all contact detail fields. No content generation required.",
+      },
+    },
+    {
+      key: "email-field",
+      label: "Email Field",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for email contact field. No content generation required.",
+      },
+    },
+    {
+      key: "email-label",
+      label: "Email Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Label for email contact, typically 'Email:'.",
+      },
+    },
+    {
+      key: "email-value",
+      label: "Contact Email",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Professional email address for event inquiries and contact.",
+        min_characters: 15,
+        max_characters: 40,
+      },
+      options: {
+        module_field: {
+          module: "event",
+          key: "contact_email",
+        },
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        "hero-card": {
+          display: "flex",
+          "flex-direction": "column",
+          "border-radius": "base",
+          "box-shadow": "default",
+          overflow: "hidden",
+        },
+        "hero-image": {
+          width: "100%",
+          height: "400px",
+          "object-fit": "cover",
+          "border-radius": "base",
+          mobile: {
+            height: "250px",
+          },
+        },
+        "hero-content": {
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        title: {
+          color: "text-1",
+          "margin-bottom": "base",
+        },
+        "event-info": {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "column-gap": "base",
+          "row-gap": "sm",
+        },
+        "start-date-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "date-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "start-date": {
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        starts_at: {
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "end-date-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "end-date-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "end-date": {
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        ends_at: {
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "time-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "time-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "time-range": {
+          color: "text-2",
+        },
+        "content-section": {
+          display: "flex",
+          "column-gap": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+          },
+        },
+        "main-content": {
+          "flex-basis": "66.67%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          "border-radius": "base",
+          "box-shadow": "default",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          mobile: {
+            "flex-basis": "100%",
+          },
+        },
+        "register-button": {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "align-self": "flex-start",
+        },
+        "registration-ended": {
+          color: "text-2",
+          "padding-top": "base",
+          "padding-bottom": "base",
+        },
+        description: {
+          color: "text-2",
+        },
+        "contact-card": {
+          "flex-basis": "33.33%",
+          mobile: {
+            "flex-basis": "100%",
+          },
+          "border-radius": "base",
+          "box-shadow": "default",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        "contact-title": {
+          color: "text-1",
+          "margin-bottom": "base",
+        },
+        "contact-details": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+        },
+        "email-field": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "email-label": {
+          color: "text-2",
+        },
+        "email-value": {
+          color: "text-1",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+        "contact-title": {
+          selectedVariants: {
+            Heading_Level: "H4",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/event/event-details-2.tsx

@@ -0,0 +1,95 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  BlogContent,
+  Box,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  RegisterModal,
+  Section,
+  Typography,
+  usePageContext,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import { ClientOnly } from "./ClientOnly";
+import type { IEventDetailsContent } from "./event-details.schema";
+
+const EventDetails2: React.FC<ILevoBlockBaseProps<IEventDetailsContent>> = () => {
+  const data = usePageContext("event");
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="hero-card">
+          <Image
+            elementKey="hero-image"
+            alt="Event cover image"
+            width={800}
+            height={400}
+            image={data?.cover_image}
+          />
+          <Box elementKey="hero-content">
+            <Heading elementKey="title">{data.title}</Heading>
+            <Box elementKey="event-info">
+              <Box elementKey="start-date-wrapper">
+                <Icon elementKey="date-icon" />
+                <ClientOnly>
+                  <Typography elementKey="starts_at">
+                    {dayjs(data?.starts_at).format("MMM D, YYYY")}
+                  </Typography>
+                </ClientOnly>
+              </Box>
+              <Box elementKey="end-date-wrapper">
+                <Icon elementKey="end-date-icon" />
+                <ClientOnly>
+                  <Typography elementKey="ends_at">
+                    {dayjs(data?.ends_at).format("MMM D, YYYY")}
+                  </Typography>
+                </ClientOnly>
+              </Box>
+              <Box elementKey="time-wrapper">
+                <Icon elementKey="time-icon" />
+                <ClientOnly>
+                  <Typography elementKey="time-range">
+                    {`${dayjs(data?.starts_at).format("hh:mm A")} - ${dayjs(data?.ends_at).format("hh:mm A")}`}
+                  </Typography>
+                </ClientOnly>
+              </Box>
+              <Box elementKey="platform-wrapper">
+                <Icon elementKey="platform-icon" />
+                <Typography elementKey="platform">{data?.platform}</Typography>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box elementKey="content-section">
+          <Box elementKey="main-content">
+            {data?._id ? (
+              <RegisterModal
+                eventID={data?._id as string}
+                title={data?.title}
+                external={data?.external_ticketing}
+              />
+            ) : null}
+            <BlogContent elementKey="description" content={data?.description || ""} />
+          </Box>
+
+          <Box elementKey="contact-card">
+            <Heading elementKey="contact-title" />
+            <Box elementKey="contact-details">
+              <Box elementKey="email-field">
+                <Typography elementKey="email-label" />
+                <Typography elementKey="email-value">{data.contact_email}</Typography>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default EventDetails2;

package/src/blocks/index.ts

@@ -55,6 +55,7 @@ const EventListing2 = lazy(() => import("./event/event-listing-2"));
 const EventListing3 = lazy(() => import("./event/event-listing-3"));
 const EventListing4 = lazy(() => import("./event/event-listing-4"));
 const EventDetails = lazy(() => import("./event/event-details"));
+const EventDetails2 = lazy(() => import("./event/event-details-2"));
 const Faq1 = lazy(() => import("./faq/faq-1"));
 const Faq2 = lazy(() => import("./faq/faq-2"));
 const Faq3 = lazy(() => import("./faq/faq-3"));
@@ -189,6 +190,7 @@ export const blocks: Record<string, React.LazyExoticComponent<React.ComponentTyp
   "event-listing-3:v1": EventListing3,
   "event-listing-4:v1": EventListing4,
   "event-details:v1": EventDetails,
+  "event-details-2:v1": EventDetails2,
   "faq-1:v1": Faq1,
   "faq-2:v1": Faq2,
   "faq-3:v1": Faq3,

package/src/blocks/navbar/navbar-1.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@levo-so/react";
+import { cn } from "@levo/utils/cn";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,

package/src/blocks/navbar/navbar-3.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@levo-so/react";
+import { cn } from "@levo/utils/cn";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,

package/src/blocks/navbar/navbar-4.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@levo-so/react";
+import { cn } from "@levo/utils/cn";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,

package/src/blocks/polling/polling-1.tsx

@@ -1,4 +1,8 @@
-import { cn, errorToast, Spinner, successToast, useLevo } from "@levo-so/react";
+import { useLevo, errorToast, successToast } from "@levo-so/react";
+
+import { Spinner } from "../../components/Spinner";
+import { cn } from "@levo/utils/cn";
+
 import {
   Box,
   Container,

package/src/blocks/users/edit-profile.tsx

@@ -1,4 +1,7 @@
-import { errorHandler, Spinner, successToast, useLevo } from "@levo-so/react";
+import { errorHandler, useLevo, successToast } from "@levo-so/react";
+
+import { Spinner } from "../../components/Spinner";
+
 import {
   Box,
   Button,

package/src/components/Spinner.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@levo/utils/cn";
+import { Loader2 } from "lucide-react";
+
+/** Indeterminate loading spinner. */
+export const Spinner = ({ className }: { className?: string }) => (
+  <Loader2 className={cn("h-8 w-8 animate-spin font-light", className)} />
+);
+
+export default Spinner;

package/src/schemas/blocks.ts

@@ -57,6 +57,7 @@ import { Ecommerce5 } from "../blocks/ecommerce/ecommerce-5.schema";
 import { Embed1 } from "../blocks/embed/embed-1.schema";
 import { Embed2 } from "../blocks/embed/embed-2.schema";
 import { EventDetails } from "../blocks/event/event-details.schema";
+import { EventDetails2 } from "../blocks/event/event-details-2.schema";
 import { EventListing } from "../blocks/event/event-listing.schema";
 import { EventListing2 } from "../blocks/event/event-listing-2.schema";
 import { EventListing3 } from "../blocks/event/event-listing-3.schema";
@@ -191,6 +192,7 @@ export const BlockList: IBlock[] = [
   Embed1,
   Embed2,
   EventDetails,
+  EventDetails2,
   EventListing,
   EventListing2,
   EventListing3,

package/src/constants/index.ts

@@ -1,16 +0,0 @@
-export const LEVO_DEFAULT_BLUE_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",
-  },
-};