@levo-so/blocks 0.1.100 → 0.1.102

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

@@ -1,113 +1,407 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
+const ICON_CLOCK = {
   kind: "icon",
   data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
+    id: "clock",
+    label: "Clock",
     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>',
+      '<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 ICON_LOCATION = {
+  kind: "icon",
+  data: {
+    id: "location",
+    label: "Location",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M11.9999 14.17C9.86988 14.17 8.12988 12.44 8.12988 10.3C8.12988 8.16 9.86988 6.44 11.9999 6.44C14.1299 6.44 15.8699 8.17 15.8699 10.31C15.8699 12.45 14.1299 14.17 11.9999 14.17ZM11.9999 7.94C10.6999 7.94 9.62988 9 9.62988 10.31C9.62988 11.62 10.6899 12.68 11.9999 12.68C13.3099 12.68 14.3699 11.62 14.3699 10.31C14.3699 9 13.2999 7.94 11.9999 7.94Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9997 22.76C10.5197 22.76 9.02969 22.2 7.86969 21.09C4.91969 18.25 1.65969 13.72 2.88969 8.33C3.99969 3.44 8.26969 1.25 11.9997 1.25C11.9997 1.25 11.9997 1.25 12.0097 1.25C15.7397 1.25 20.0097 3.44 21.1197 8.34C22.3397 13.73 19.0797 18.25 16.1297 21.09C14.9697 22.2 13.4797 22.76 11.9997 22.76ZM11.9997 2.75C9.08969 2.75 5.34969 4.3 4.35969 8.66C3.27969 13.37 6.23969 17.43 8.91969 20C10.6497 21.67 13.3597 21.67 15.0897 20C17.7597 17.43 20.7197 13.37 19.6597 8.66C18.6597 4.3 14.9097 2.75 11.9997 2.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_CALENDAR = {
+  kind: "icon",
+  data: {
+    id: "calendar",
+    label: "Calendar",
+    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="M15 22.75H9C3.38 22.75 2.25 20.1 2.25 15.82V9.65C2.25 4.91 3.85 2.98 7.96 2.75H16C16.01 2.75 16.03 2.75 16.04 2.75C20.15 2.98 21.75 4.91 21.75 9.65V15.82C21.75 20.1 20.62 22.75 15 22.75ZM8 4.25C5.2 4.41 3.75 5.29 3.75 9.65V15.82C3.75 19.65 4.48 21.25 9 21.25H15C19.52 21.25 20.25 19.65 20.25 15.82V9.65C20.25 5.3 18.81 4.41 15.98 4.25H8Z" fill="var(--color-icon-primary)"/>\n<path d="M20.75 18.35H3.25C2.84 18.35 2.5 18.01 2.5 17.6C2.5 17.19 2.84 16.85 3.25 16.85H20.75C21.16 16.85 21.5 17.19 21.5 17.6C21.5 18.01 21.16 18.35 20.75 18.35Z" fill="var(--color-icon-primary)"/>\n<path d="M12 8.25C10.77 8.25 9.73 8.92 9.73 10.22C9.73 10.84 10.02 11.31 10.46 11.61C9.85 11.97 9.5 12.55 9.5 13.23C9.5 14.47 10.45 15.24 12 15.24C13.54 15.24 14.5 14.47 14.5 13.23C14.5 12.55 14.15 11.96 13.53 11.61C13.98 11.3 14.26 10.84 14.26 10.22C14.26 8.92 13.23 8.25 12 8.25ZM12 11.09C11.48 11.09 11.1 10.78 11.1 10.29C11.1 9.79 11.48 9.5 12 9.5C12.52 9.5 12.9 9.79 12.9 10.29C12.9 10.78 12.52 11.09 12 11.09ZM12 14C11.34 14 10.86 13.67 10.86 13.07C10.86 12.47 11.34 12.15 12 12.15C12.66 12.15 13.14 12.48 13.14 13.07C13.14 13.67 12.66 14 12 14Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const IMG_EVENT_1 = {
+  id: "7453000263313419417",
+  kind: "image",
+  location: "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg",
+  mimetype: "image/jpeg",
+  srcset: {
+    "320w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
+  },
+};
+
+const IMG_EVENT_2 = {
+  id: "7453000266648764976",
+  kind: "image",
+  location: "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg",
+  mimetype: "image/jpeg",
+  srcset: {
+    "320w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/7709206/pexels-photo-7709206.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
+  },
+};
+
+const IMG_EVENT_3 = {
+  id: "7453000261430596207",
+  kind: "image",
+  location: "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg",
+  mimetype: "image/jpeg",
+  srcset: {
+    "320w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/7654055/pexels-photo-7654055.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
+  },
+};
+
+const IMG_EVENT_4 = {
+  id: "7453000276610803074",
+  kind: "image",
+  location: "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg",
+  mimetype: "image/jpeg",
+  srcset: {
+    "320w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
+  },
+};
+
+const EVENTS_CONTENT = [
+  {
+    eventWrapper: null,
+    image: IMG_EVENT_1,
+    "content-wrapper": null,
+    title: "Automations Summit 2026",
+    description:
+      "A half-day deep dive on building workflows that actually stick, with case studies from Linear, Ramp, and Levo's own ops team.",
+    details: [
+      {
+        detailWrapper: null,
+        icon: ICON_CLOCK,
+        text: "9:00 AM - 1:00 PM PST",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_LOCATION,
+        text: "SoMa Studios, San Francisco",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_CALENDAR,
+        text: "12 May",
+      },
+    ],
+  },
+  {
+    eventWrapper: null,
+    image: IMG_EVENT_2,
+    "content-wrapper": null,
+    title: "Ops Leaders Roundtable",
+    description:
+      "An off-the-record dinner for 20 Heads of Ops: how top teams hit 99% SLA on cross-functional handoffs without adding headcount.",
+    details: [
+      {
+        detailWrapper: null,
+        icon: ICON_CLOCK,
+        text: "6:30 PM - 9:30 PM ET",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_LOCATION,
+        text: "The Beatrice Inn, New York",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_CALENDAR,
+        text: "03 Jun",
+      },
+    ],
+  },
+  {
+    eventWrapper: null,
+    image: IMG_EVENT_3,
+    "content-wrapper": null,
+    title: "Analytics That Ship Workshop",
+    description:
+      "A hands-on clinic for PMs on turning product analytics into shipping decisions. Leave with a dashboard your team will actually open.",
+    details: [
+      {
+        detailWrapper: null,
+        icon: ICON_CLOCK,
+        text: "10:00 AM - 3:00 PM GMT",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_LOCATION,
+        text: "Levo HQ, London",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_CALENDAR,
+        text: "18 Jun",
+      },
+    ],
+  },
+  {
+    eventWrapper: null,
+    image: IMG_EVENT_4,
+    "content-wrapper": null,
+    title: "Builders Night: Integrations",
+    description:
+      "Informal drinks and demos for engineers building on Levo's integrations API. Swap patterns with the team shipping webhooks v2.",
+    details: [
+      {
+        detailWrapper: null,
+        icon: ICON_CLOCK,
+        text: "7:00 PM - 10:00 PM CET",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_LOCATION,
+        text: "Spaces Herengracht, Amsterdam",
+      },
+      {
+        detailWrapper: null,
+        icon: ICON_CALENDAR,
+        text: "09 Jul",
+      },
+    ],
+  },
+];
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   "header-section": null,
-  title: "Events",
+  title: "Upcoming events",
   description:
-    "Stay updated on our upcoming community gatherings, workshops, and networking events!",
+    "Workshops, roundtables, and demos for operations, product, and engineering teams running on Levo.",
   "cta-button": "View all",
-  events: [
-    {
-      eventWrapper: null,
-      image: {
-        id: "w9fEtJuVtBFgU",
-        filename: "image.png",
-        kind: "image",
-        location: "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm.png",
-        srcset: {
-          "1080w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp",
-          "1200w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp",
-          "1920w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp",
-          "320w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp",
-          "640w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp",
-          "750w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp",
-          "828w": "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp",
-          path: "https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-6HgF6xxhyiHBm-640w.webp 640w",
-        },
-        mimetype: "image/png",
-      },
-      "content-wrapper": null,
-      title: "Afghan American Inauguration",
-      description:
-        "Join us for this historic celebration of community leadership and cultural pride.",
-      details: [
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "3:00 PM - 6:00 PM",
+  events: EVENTS_CONTENT,
+  paginationWrapper: null,
+  paginationLeftButton: "Previous",
+  paginationText: "",
+  paginationRightButton: "Next",
+};
+
+export type ICards20Content = typeof DEFAULT_CONTENT;
+
+const eventItemStyles = (opts: {
+  imageMinHeight?: string;
+  imageMaxHeight?: string;
+  titleSize?: string;
+  descriptionSize?: string;
+  detailSize?: string;
+  iconSize?: string;
+  rowGap?: string;
+  padding?: string;
+  centered?: boolean;
+  list?: boolean;
+}) => {
+  const padding = opts.padding ?? "xl";
+  const detailSize = opts.detailSize ?? "sm";
+  const iconSize = opts.iconSize ?? "20px";
+  const titleSize = opts.titleSize ?? "xl";
+  const descriptionSize = opts.descriptionSize ?? "base";
+  const rowGap = opts.rowGap ?? "base";
+
+  const base: Record<string, unknown> = {
+    eventWrapper: {
+      "background-color": "background-1",
+      "border-radius": "xl",
+      overflow: "hidden",
+      "box-shadow":
+        "0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06)",
+      display: "flex",
+      "flex-direction": opts.list ? "row" : "column",
+      filter: "none",
+      height: "100%",
+      ...(opts.list
+        ? {
+            mobile: { "flex-direction": "column" },
+          }
+        : {}),
+    },
+    image: {
+      width: opts.list ? "280px" : "100%",
+      height: opts.list ? "auto" : "auto",
+      "object-fit": "cover",
+      "aspect-ratio": opts.list ? "4 / 3" : "16 / 9",
+      filter: "none",
+      "flex-shrink": "0",
+      ...(opts.imageMinHeight ? { "min-height": opts.imageMinHeight } : {}),
+      ...(opts.imageMaxHeight ? { "max-height": opts.imageMaxHeight } : {}),
+      ...(opts.list
+        ? {
+            mobile: { width: "100%", "aspect-ratio": "16 / 9" },
+          }
+        : {}),
+    },
+    "content-wrapper": {
+      "padding-left": padding,
+      "padding-right": padding,
+      "padding-top": padding,
+      "padding-bottom": padding,
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": rowGap,
+      filter: "none",
+      ...(opts.centered ? { "align-items": "center", "text-align": "center" } : {}),
+      ...(opts.list ? { "justify-content": "center" } : {}),
+    },
+    title: {
+      "font-size": titleSize,
+      "font-weight": "600",
+      color: "text-1",
+      "line-height": "1.3",
+      filter: "none",
+      ...(opts.centered ? { "text-align": "center" } : {}),
+    },
+    description: {
+      "font-size": descriptionSize,
+      color: "text-2",
+      "line-height": "1.5",
+      filter: "none",
+      ...(opts.centered ? { "text-align": "center" } : {}),
+    },
+    details_levoGroup: {
+      display: opts.list ? "flex" : "flex",
+      "flex-direction": opts.list ? "row" : "column",
+      "column-gap": opts.list ? "xl" : "sm",
+      "row-gap": "xs",
+      "flex-wrap": opts.list ? "wrap" : "nowrap",
+      "margin-top": "auto",
+      ...(opts.centered ? { "align-items": "center" } : {}),
+      filter: "none",
+    },
+    details: [
+      {
+        detailWrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "sm",
+          filter: "none",
         },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "2200 Harvard St, Sacramento, CA 95815",
+        icon: {
+          width: iconSize,
+          height: iconSize,
+          "font-size": iconSize,
+          "flex-shrink": "0",
+          filter: "none",
         },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "11 Apr",
+        text: {
+          "font-size": detailSize,
+          color: "text-2",
+          "line-height": "1.4",
         },
-      ],
-    },
-    {
-      eventWrapper: null,
-      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",
-        },
-      },
-      "content-wrapper": null,
-      title: "Community Health Workshop",
-      description: "Learn about wellness resources and health services available in our community.",
-      details: [
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "10:00 AM - 2:00 PM",
+      },
+      {
+        detailWrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "sm",
+          filter: "none",
         },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "1500 Main St, Sacramento, CA 95814",
+        icon: {
+          width: iconSize,
+          height: iconSize,
+          "font-size": iconSize,
+          "flex-shrink": "0",
+          filter: "none",
         },
-        {
-          detailWrapper: null,
-          icon: DUMMY_ICON,
-          text: "25 Apr",
+        text: {
+          "font-size": detailSize,
+          color: "text-2",
+          "line-height": "1.4",
         },
-      ],
-    },
-  ],
-  paginationWrapper: null,
-  paginationLeftButton: "Previous",
-  paginationText: "",
-  paginationRightButton: "Next",
+      },
+      {
+        detailWrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "sm",
+          filter: "none",
+        },
+        icon: {
+          width: iconSize,
+          height: iconSize,
+          "font-size": iconSize,
+          "flex-shrink": "0",
+          filter: "none",
+        },
+        text: {
+          "font-size": detailSize,
+          color: "text-2",
+          "line-height": "1.4",
+        },
+      },
+    ],
+  };
+
+  return base;
 };
 
-export type ICards20Content = typeof DEFAULT_CONTENT;
+const EVENT_COUNT = EVENTS_CONTENT.length;
 
 export const Cards20: IBlock = {
   category_id: "cards",
@@ -161,7 +455,7 @@ export const Cards20: IBlock = {
         prompt_description:
           "Main heading for the events section. Should be clear and engaging, indicating the purpose of the section.",
         min_characters: 5,
-        max_characters: 20,
+        max_characters: 30,
       },
     },
     {
@@ -232,7 +526,7 @@ export const Cards20: IBlock = {
             prompt_description:
               "Brief description of the event, highlighting key benefits or features that would interest attendees.",
             min_characters: 40,
-            max_characters: 120,
+            max_characters: 160,
           },
         },
         {
@@ -249,7 +543,7 @@ export const Cards20: IBlock = {
             {
               key: "icon",
               label: "Detail Icon",
-              field_interface: "ImageWidget",
+              field_interface: "IconWidget",
               hint: {
                 prompt_description:
                   "Icon representing the type of detail (time, location, date). Should be simple and recognizable.",
@@ -305,17 +599,6 @@ export const Cards20: IBlock = {
         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",
@@ -364,37 +647,135 @@ export const Cards20: IBlock = {
           display: "flex",
           "flex-direction": "row",
           "align-items": "center",
-          "text-align": "center",
+          "column-gap": "2xl",
           "row-gap": "lg",
-          "margin-bottom": "xl",
+          "margin-bottom": "sm",
           filter: "none",
           "justify-content": "space-between",
           tablet: {
             "flex-direction": "column",
+            "align-items": "flex-start",
           },
           mobile: {
             "flex-direction": "column",
+            "align-items": "flex-start",
           },
         },
         "header-content": {
           display: "flex",
           "flex-direction": "column",
-          "row-gap": "base",
+          "row-gap": "sm",
           "text-align": "left",
+          flex: "1",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "max-width": "640px",
+          "line-height": "1.6",
+        },
+        events_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "2xl",
+          "row-gap": "2xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+          filter: "none",
+        },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        events: Array(EVENT_COUNT)
+          .fill(0)
+          .map(() =>
+            eventItemStyles({
+              titleSize: "xl",
+              descriptionSize: "base",
+              detailSize: "sm",
+              iconSize: "20px",
+              rowGap: "base",
+              padding: "xl",
+            }),
+          ),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+    {
+      key: "grid",
+      title: "Grid",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          filter: "none",
+        },
+        "header-section": {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "2xl",
+          "row-gap": "lg",
+          "margin-bottom": "sm",
+          filter: "none",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+          },
           mobile: {
-            "text-align": "center",
+            "flex-direction": "column",
+            "align-items": "flex-start",
           },
         },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "text-align": "left",
+          flex: "1",
+        },
         title: {
           color: "text-1",
         },
         description: {
           "font-size": "lg",
           color: "text-2",
-          "max-width": "600px",
+          "max-width": "640px",
           "line-height": "1.6",
         },
-
         events_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -415,110 +796,307 @@ export const Cards20: IBlock = {
           "column-gap": "lg",
           "align-items": "center",
         },
-        events: Array(2)
-          ?.fill(0)
-          .map((v) => {
-            return {
-              eventWrapper: {
-                "background-color": "white",
-                "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)",
-                display: "flex",
-                "flex-direction": "column",
-                filter: "none",
-                "padding-bottom": "none",
-                height: "min-content",
-              },
-              image: {
-                width: "100%",
-                height: "auto",
-                "object-fit": "cover",
-                filter: "none",
-                "min-height": "260px",
-              },
-              "content-wrapper": {
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-top": "lg",
-                "padding-bottom": "xl",
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "base",
-                filter: "none",
-                "background-color": "white",
-              },
-              title: {
-                "font-size": "xl",
-                "font-weight": "600",
-                color: "text-1",
-                "line-height": "1.3",
-                filter: "none",
-              },
-              description: {
-                "font-size": "base",
-                color: "text-2",
-                "line-height": "1.5",
-                "margin-bottom": "sm",
-                filter: "none",
-                display: "none",
-              },
-              details_levoGroup: {
-                display: "flex",
-                "flex-direction": "column",
-                "row-gap": "xs",
-                filter: "none",
-              },
-              details: [
-                {
-                  detailWrapper: {
-                    display: "flex",
-                    "align-items": "center",
-                    "column-gap": "sm",
-                    filter: "none",
-                  },
-                  icon: {
-                    width: "22px",
-                    height: "22px",
-                    "flex-shrink": "0",
-                    filter: "none",
-                  },
-                  text: {
-                    "font-size": "sm",
-                    color: "text-2",
-                    "line-height": "1.4",
-                  },
-                },
-                {
-                  icon: {
-                    filter: "none",
-                    width: "22px",
-                    height: "22px",
-                  },
-                  detailWrapper: {
-                    filter: "none",
-                    display: "flex",
-                    "column-gap": "sm",
-                  },
-                  text: {
-                    filter: "none",
-                  },
-                },
-                {
-                  icon: {
-                    filter: "none",
-                    height: "22px",
-                    width: "22px",
-                  },
-                  detailWrapper: {
-                    filter: "none",
-                    display: "flex",
-                    "column-gap": "sm",
-                  },
-                },
-              ],
-            };
-          }),
+        events: Array(EVENT_COUNT)
+          .fill(0)
+          .map(() =>
+            eventItemStyles({
+              titleSize: "lg",
+              descriptionSize: "sm",
+              detailSize: "sm",
+              iconSize: "18px",
+              rowGap: "sm",
+              padding: "lg",
+            }),
+          ),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+    {
+      key: "list",
+      title: "List",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+          filter: "none",
+        },
+        "header-section": {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "2xl",
+          "row-gap": "lg",
+          "margin-bottom": "sm",
+          filter: "none",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+          },
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "text-align": "left",
+          flex: "1",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "max-width": "640px",
+          "line-height": "1.6",
+        },
+        events_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          filter: "none",
+        },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        events: Array(EVENT_COUNT)
+          .fill(0)
+          .map(() =>
+            eventItemStyles({
+              titleSize: "xl",
+              descriptionSize: "base",
+              detailSize: "sm",
+              iconSize: "18px",
+              rowGap: "base",
+              padding: "xl",
+              list: true,
+            }),
+          ),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+    {
+      key: "centered",
+      title: "Centered",
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          "align-items": "center",
+          filter: "none",
+        },
+        "header-section": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "base",
+          "margin-bottom": "sm",
+          "max-width": "720px",
+          filter: "none",
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "text-align": "center",
+          "align-items": "center",
+        },
+        title: {
+          color: "text-1",
+          "text-align": "center",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "max-width": "640px",
+          "line-height": "1.6",
+          "text-align": "center",
+        },
+        events_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "column-gap": "xl",
+          "row-gap": "xl",
+          width: "100%",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+          filter: "none",
+        },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        events: Array(EVENT_COUNT)
+          .fill(0)
+          .map(() =>
+            eventItemStyles({
+              titleSize: "lg",
+              descriptionSize: "sm",
+              detailSize: "sm",
+              iconSize: "18px",
+              rowGap: "sm",
+              padding: "lg",
+              centered: true,
+            }),
+          ),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+    {
+      key: "compact",
+      title: "Compact",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          filter: "none",
+        },
+        "header-section": {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "column-gap": "2xl",
+          "row-gap": "sm",
+          "margin-bottom": "sm",
+          filter: "none",
+          "justify-content": "space-between",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+          },
+        },
+        "header-content": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          "text-align": "left",
+          flex: "1",
+        },
+        title: {
+          color: "text-1",
+          "font-size": "2xl",
+        },
+        description: {
+          "font-size": "base",
+          color: "text-2",
+          "max-width": "560px",
+          "line-height": "1.5",
+        },
+        events_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "lg",
+          "row-gap": "lg",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+          filter: "none",
+        },
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        events: Array(EVENT_COUNT)
+          .fill(0)
+          .map(() =>
+            eventItemStyles({
+              titleSize: "base",
+              descriptionSize: "sm",
+              detailSize: "xs",
+              iconSize: "16px",
+              rowGap: "xs",
+              padding: "base",
+            }),
+          ),
       },
       content: DEFAULT_CONTENT,
       config: {