@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -1,108 +1,273 @@
 import type { IBlock } from "@levo-so/studio";
 
+const ICON_ARROW_RIGHT = {
+  kind: "icon",
+  data: {
+    id: "arrow-right",
+    label: "Arrow Right",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="var(--color-icon-primary)"/>\n<path d="M10.7397 16.28C10.5497 16.28 10.3597 16.21 10.2097 16.06C9.91969 15.77 9.91969 15.29 10.2097 15L13.2097 12L10.2097 8.99997C9.91969 8.70997 9.91969 8.22997 10.2097 7.93997C10.4997 7.64997 10.9797 7.64997 11.2697 7.93997L14.7997 11.47C15.0897 11.76 15.0897 12.24 14.7997 12.53L11.2697 16.06C11.1197 16.21 10.9297 16.28 10.7397 16.28Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   header_section: null,
-  main_title: "Career Opportunity",
-  description: "Career Opportunity Career Opportunity Career Opportunity Career Opportunity ",
+  title_container: null,
+  main_title: "Built for the way teams ship today",
+  description:
+    "From async standups to shared rituals — the workspace your team adopts in a week and refuses to leave.",
   header_buttons_levoGroup: null,
   header_buttons: [
     {
-      header_button: "View All",
+      header_button: "Browse all features",
     },
     {
-      header_button: "Apply Now",
+      header_button: "Book a demo",
     },
   ],
   grid: [
     {
       card: null,
       content_wrapper: null,
-      title: "Marketing Executive",
-      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      title: "Real-time collaboration",
+      details:
+        "Multiplayer editing, presence cursors, and inline comments — your team thinks together without ever sharing a screen.",
       ctas: [
         {
-          button: "Apply Now",
+          button: "Start free",
         },
         {
-          button: "Learn More",
+          button: "See how it works",
         },
       ],
     },
     {
       card: null,
       content_wrapper: null,
-      title: "Product Designer",
-      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      title: "Workflow automation",
+      details:
+        "Trigger handoffs the moment a status changes — Zapier-grade automations live next to every task, no extra tab.",
       ctas: [
         {
-          button: "Apply Now",
+          button: "Try a recipe",
         },
         {
-          button: "Learn More",
+          button: "View library",
         },
       ],
     },
     {
       card: null,
       content_wrapper: null,
-      title: "Web Designer",
-      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      title: "Unified inbox",
+      details:
+        "Slack threads, GitHub PRs, and Linear updates roll into one queue so nothing slips between standups.",
       ctas: [
         {
-          button: "Apply Now",
+          button: "Connect tools",
         },
         {
-          button: "Learn More",
+          button: "See integrations",
         },
       ],
     },
     {
       card: null,
       content_wrapper: null,
-      title: "Software Developer",
-      details: "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      title: "Insights that matter",
+      details:
+        "Cycle time, burndown, and team load dashboards refresh hourly — answer 'are we on track' without pinging anyone.",
       ctas: [
         {
-          button: "Apply Now",
+          button: "View dashboards",
         },
         {
-          button: "Learn More",
+          button: "Read the docs",
         },
       ],
     },
   ],
-  header_button_rightIcon: {
-    kind: "custom",
-    data: {
-      id: "UpLVWyg9E9QC",
-      location: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs.png",
-      mimetype: "image/png",
-      kind: "image",
-      srcset: {
-        "1080w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
-        "1200w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
-        "1920w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
-        "320w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
-        "640w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
-        "750w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
-        "828w": "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
-        path: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp 1080w",
-      },
+  header_button_rightIcon: ICON_ARROW_RIGHT,
+};
+
+// Tighter copy for 4-col layout; titles 2-3 words, descriptions ~14 words.
+const COMPACT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  title_container: null,
+  main_title: "Built for the way teams ship today",
+  description:
+    "Four pillars that quietly compound across every sprint — collaboration, automation, signal, and insight in one workspace.",
+  header_buttons_levoGroup: null,
+  header_buttons: [
+    {
+      header_button: "Browse all features",
     },
-  },
+    {
+      header_button: "Book a demo",
+    },
+  ],
+  grid: [
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Real-time collaboration",
+      details:
+        "Multiplayer editing, presence, and inline comments — think together without ever sharing a screen.",
+      ctas: [
+        {
+          button: "Start free",
+        },
+        {
+          button: "See how",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Workflow automation",
+      details:
+        "Trigger handoffs the second a status changes — Zapier-grade recipes next to every task.",
+      ctas: [
+        {
+          button: "Try recipes",
+        },
+        {
+          button: "View library",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Unified inbox",
+      details:
+        "Slack threads, GitHub PRs, and Linear updates roll into one queue you actually clear.",
+      ctas: [
+        {
+          button: "Connect tools",
+        },
+        {
+          button: "Integrations",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Insights that matter",
+      details:
+        "Cycle time, burndown, and team load — answer 'are we on track' without pinging anyone.",
+      ctas: [
+        {
+          button: "View boards",
+        },
+        {
+          button: "Read docs",
+        },
+      ],
+    },
+  ],
+  header_button_rightIcon: ICON_ARROW_RIGHT,
 };
 
 export type ICards4Content = typeof DEFAULT_CONTENT;
 
+// Shared style fragments to keep layouts in sync.
+const HEADER_SECTION_SPLIT = {
+  display: "flex",
+  "flex-direction": "row",
+  "justify-content": "space-between",
+  "align-items": "flex-end",
+  "column-gap": "2xl",
+  "margin-bottom": "3xl",
+  tablet: {
+    "flex-direction": "column",
+    "align-items": "flex-start",
+    "row-gap": "lg",
+  },
+  mobile: {
+    "flex-direction": "column",
+    "align-items": "flex-start",
+    "row-gap": "lg",
+  },
+};
+
+const TITLE_CONTAINER_COLUMN = {
+  display: "flex",
+  "flex-direction": "column",
+  "row-gap": "sm",
+  "max-width": "640px",
+};
+
+const HEADER_BUTTONS_GROUP = {
+  display: "flex",
+  "flex-direction": "row",
+  "column-gap": "sm",
+  "row-gap": "sm",
+  "flex-wrap": "wrap",
+  "align-items": "center",
+};
+
+const CARD_BASE = {
+  display: "flex",
+  "flex-direction": "column",
+  height: "100%",
+  "background-color": "white",
+  "padding-top": "3xl",
+  "padding-bottom": "3xl",
+  "padding-left": "3xl",
+  "padding-right": "3xl",
+  "border-radius": "lg",
+  "row-gap": "lg",
+  "box-shadow":
+    "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06)",
+  border: "1px solid",
+  "border-color": "border",
+  mobile: {
+    "padding-top": "xl",
+    "padding-left": "xl",
+    "padding-right": "xl",
+    "padding-bottom": "xl",
+  },
+  tablet: {
+    "padding-top": "2xl",
+    "padding-right": "2xl",
+    "padding-left": "2xl",
+    "padding-bottom": "2xl",
+  },
+};
+
+const CARD_CTAS_GROUP = {
+  display: "flex",
+  "flex-direction": "row",
+  "column-gap": "sm",
+  "margin-top": "auto",
+  "align-items": "center",
+  mobile: {
+    "flex-direction": "column",
+    "align-items": "stretch",
+    "row-gap": "xs",
+  },
+};
+
+const CONTENT_WRAPPER = {
+  display: "flex",
+  "flex-direction": "column",
+  "row-gap": "sm",
+};
+
 export const Cards4: IBlock = {
   category_id: "cards",
   title: "Cards 4",
   key: "cards-4",
   version: "v1",
   prompt_description:
-    "Career opportunities section with header title and 'View All' button, featuring job cards in a grid layout. Each card displays job title, details, and action buttons.",
+    "Feature-card section for SaaS pages: header with title, description, and dual CTAs, plus a grid of benefit cards each carrying a title, description, and two action buttons.",
   content_schema: [
     {
       key: "layout",
@@ -110,7 +275,7 @@ export const Cards4: IBlock = {
       field_interface: "LayoutWidget",
       hint: {
         prompt_description:
-          "Overall section layout for the career opportunities block. Controls spacing, background, and structure.",
+          "Outer section wrapper controlling background, vertical rhythm, and overall structure.",
       },
     },
     {
@@ -118,7 +283,8 @@ export const Cards4: IBlock = {
       label: "Container",
       field_interface: "ContainerWidget",
       hint: {
-        prompt_description: "Main container for centering and constraining the content width.",
+        prompt_description:
+          "Centers the section content and constrains it to the page max width.",
       },
     },
     {
@@ -127,13 +293,17 @@ export const Cards4: IBlock = {
       field_interface: "BoxWidget",
       hint: {
         prompt_description:
-          "Header area containing the main title and view all button, positioned horizontally.",
+          "Header row holding the title block and the trailing CTA group.",
       },
     },
     {
       key: "title_container",
       label: "Title Container",
       field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Stack for the heading and supporting description on the header's left side.",
+      },
     },
     {
       key: "main_title",
@@ -141,15 +311,21 @@ export const Cards4: IBlock = {
       field_interface: "HeadingWidget",
       hint: {
         prompt_description:
-          "Main section heading that describes the career opportunities section. Should be engaging and professional.",
+          "Section heading. Should state the value the cards collectively deliver.",
         min_characters: 10,
-        max_characters: 40,
+        max_characters: 60,
       },
     },
     {
       key: "description",
-      label: "Descripton",
+      label: "Description",
       field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "One-line description that frames the cards and earns the click on the header CTAs.",
+        min_characters: 40,
+        max_characters: 180,
+      },
     },
     {
       key: "header_buttons",
@@ -163,9 +339,9 @@ export const Cards4: IBlock = {
           field_interface: "ButtonWidget",
           hint: {
             prompt_description:
-              "Secondary action button for viewing all career opportunities. Should encourage exploration.",
+              "Header CTA — first one is the primary path (e.g. browse), second is conversion (e.g. demo).",
             min_characters: 6,
-            max_characters: 20,
+            max_characters: 24,
           },
         },
       ],
@@ -182,7 +358,7 @@ export const Cards4: IBlock = {
           field_interface: "BoxWidget",
           hint: {
             prompt_description:
-              "Individual job card container for styling and layout. No direct content.",
+              "Single card container. Layout-only; no direct content rendered here.",
           },
         },
         {
@@ -191,7 +367,7 @@ export const Cards4: IBlock = {
           field_interface: "BoxWidget",
           hint: {
             prompt_description:
-              "Wrapper for job title and details within each card. Used for spacing and alignment.",
+              "Wraps the card title and description so they share a common stacking rhythm.",
           },
         },
         {
@@ -200,9 +376,9 @@ export const Cards4: IBlock = {
           field_interface: "HeadingWidget",
           hint: {
             prompt_description:
-              "Job position title that's clear, professional, and attractive to potential candidates.",
-            min_characters: 10,
-            max_characters: 30,
+              "Two- to three-word benefit title. Keep parallel structure across cards.",
+            min_characters: 6,
+            max_characters: 32,
           },
         },
         {
@@ -211,9 +387,9 @@ export const Cards4: IBlock = {
           field_interface: "TypographyWidget",
           hint: {
             prompt_description:
-              "Detailed job information including employment type, experience level, location, and salary range. Should be comprehensive yet concise.",
+              "One-sentence description with a concrete mechanism — keep length similar across cards so buttons align.",
             min_characters: 40,
-            max_characters: 120,
+            max_characters: 160,
           },
         },
         {
@@ -228,15 +404,15 @@ export const Cards4: IBlock = {
               field_interface: "ButtonWidget",
               hint: {
                 prompt_description:
-                  "Action button for job application or learning more. Should be clear and action-oriented.",
-                min_characters: 6,
+                  "Card CTA — first is primary action, second is supporting/learn-more path.",
+                min_characters: 4,
                 max_characters: 20,
               },
             },
           ],
           hint: {
             prompt_description:
-              "Group of action buttons for each job card, typically including Apply and Learn More options.",
+              "Two buttons per card: one conversion CTA, one supporting CTA.",
             min_items: 2,
             max_items: 2,
           },
@@ -244,7 +420,7 @@ export const Cards4: IBlock = {
       ],
       hint: {
         prompt_description:
-          "Collection of job opportunity cards featuring different positions with titles, details, and action buttons.",
+          "Grid of benefit cards, each with title, description and dual CTAs.",
         min_items: 2,
         max_items: 6,
       },
@@ -257,38 +433,18 @@ export const Cards4: IBlock = {
       styles: {
         layout: {},
         container: {},
-        header_section: {
-          display: "flex",
-          "justify-content": "space-between",
-          "align-items": "center",
-          "margin-bottom": "4xl",
-          mobile: {
-            "flex-direction": "column",
-            "align-items": "center",
-            "row-gap": "lg",
-            filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-            "justify-content": "center",
-          },
-          filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-        },
+        header_section: HEADER_SECTION_SPLIT,
+        title_container: TITLE_CONTAINER_COLUMN,
         main_title: {},
-        header_buttons_levoGroup: {
-          display: "flex",
-          "flex-direction": "row",
-          "column-gap": "sm",
-          "row-gap": "sm",
-          "flex-wrap": "wrap",
-          "align-items": "center",
+        description: {
+          color: "muted-foreground",
         },
-        header_buttons: [
-          {
-            header_button: {},
-          },
-          {
-            header_button: {},
-          },
-        ],
-        cards_levoGroup: {
+        header_buttons_levoGroup: HEADER_BUTTONS_GROUP,
+        header_buttons_levoGroupItem: {
+          header_button: {},
+        },
+        header_buttons: [{}, {}],
+        grid_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           "row-gap": "xl",
@@ -303,238 +459,433 @@ export const Cards4: IBlock = {
             "row-gap": "base",
           },
         },
+        grid_levoGroupItem: {
+          title: {},
+          card: CARD_BASE,
+          details: {
+            color: "muted-foreground",
+          },
+          ctas_levoGroup: CARD_CTAS_GROUP,
+          content_wrapper: CONTENT_WRAPPER,
+          ctas_levoGroupItem: {
+            button: {},
+          },
+          ctas: [{}, {}],
+        },
+        grid: [{}, {}, {}, {}],
+        header_button_rightIcon: {
+          width: "16px",
+          height: "16px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        "cards.0.ctas.0.button": {
+          selectedVariants: { Button_Variants: "Primary" },
+        },
+        "cards.0.ctas.1.button": {
+          selectedVariants: { Button_Variants: "Link" },
+        },
+        "cards.1.ctas.0.button": {
+          selectedVariants: { Button_Variants: "Primary" },
+        },
+        "cards.1.ctas.1.button": {
+          selectedVariants: { Button_Variants: "Link" },
+        },
+        "cards.2.ctas.0.button": {
+          selectedVariants: { Button_Variants: "Primary" },
+        },
+        "cards.2.ctas.1.button": {
+          selectedVariants: { Button_Variants: "Link" },
+        },
+        "cards.3.ctas.0.button": {
+          selectedVariants: { Button_Variants: "Primary" },
+        },
+        "cards.3.ctas.1.button": {
+          selectedVariants: { Button_Variants: "Link" },
+        },
+        header_buttons: [
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Link" },
+              button_icons: { right: { enabled: true } },
+            },
+          },
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Primary" },
+            },
+          },
+        ],
         grid: [
           {
-            title: {},
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "4xl",
-              "padding-bottom": "4xl",
-              "padding-left": "4xl",
-              "padding-right": "4xl",
-              "border-radius": "base",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
-              },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
-              },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            card: { selectedVariants: {} },
+            details: { selectedVariants: {} },
+            ctas: [
+              { button: { selectedVariants: { Button_Variants: "Primary" } } },
+              { button: { selectedVariants: { Button_Variants: "Link" } } },
+            ],
+          },
+          {
+            card: { selectedVariants: {} },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            details: { selectedVariants: {} },
+            ctas: [
+              { button: { selectedVariants: { Button_Variants: "Primary" } } },
+              { button: { selectedVariants: { Button_Variants: "Link" } } },
+            ],
+          },
+          {
+            card: { selectedVariants: {} },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            details: { selectedVariants: {} },
+            ctas: [
+              { button: { selectedVariants: { Button_Variants: "Primary" } } },
+              { button: { selectedVariants: { Button_Variants: "Link" } } },
+            ],
+          },
+          {
+            card: { selectedVariants: {} },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            details: { selectedVariants: {} },
+            ctas: [
+              { button: { selectedVariants: { Button_Variants: "Primary" } } },
+              { button: { selectedVariants: { Button_Variants: "Link" } } },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      title: "List View",
+      key: "list_view",
+      styles: {
+        layout: {},
+        container: {},
+        header_section: HEADER_SECTION_SPLIT,
+        title_container: TITLE_CONTAINER_COLUMN,
+        main_title: {},
+        description: {
+          color: "muted-foreground",
+        },
+        header_buttons_levoGroup: HEADER_BUTTONS_GROUP,
+        header_buttons_levoGroupItem: {
+          header_button: {},
+        },
+        header_buttons: [{}, {}],
+        grid_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        grid_levoGroupItem: {
+          title: {},
+          card: {
+            display: "flex",
+            "flex-direction": "row",
+            "align-items": "center",
+            "justify-content": "space-between",
+            "column-gap": "2xl",
+            "background-color": "white",
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "3xl",
+            "padding-right": "3xl",
+            "border-radius": "lg",
+            border: "1px solid",
+            "border-color": "border",
+            "box-shadow":
+              "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06)",
+            mobile: {
+              "flex-direction": "column",
+              "align-items": "flex-start",
+              "row-gap": "lg",
+              "padding-top": "xl",
+              "padding-left": "xl",
+              "padding-right": "xl",
+              "padding-bottom": "xl",
+            },
+            tablet: {
+              "padding-top": "xl",
+              "padding-right": "xl",
+              "padding-left": "xl",
+              "padding-bottom": "xl",
             },
-            details: {},
-            ctas_levoGroup: {
-              display: "flex",
+          },
+          details: {
+            color: "muted-foreground",
+          },
+          ctas_levoGroup: {
+            display: "flex",
+            "column-gap": "sm",
+            "align-items": "center",
+            "flex-shrink": "0",
+            mobile: {
+              "flex-direction": "row",
+              "row-gap": "xs",
               "column-gap": "xs",
-              "margin-top": "lg",
-              mobile: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-              tablet: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
+              "flex-wrap": "wrap",
             },
-            content_wrapper: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
+          },
+          content_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+            flex: "1",
+          },
+          ctas_levoGroupItem: {
+            button: {},
+          },
+          ctas: [{}, {}],
+        },
+        grid: [{}, {}, {}, {}],
+        header_button_rightIcon: {
+          width: "16px",
+          height: "16px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        header_buttons: [
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Link" },
+              button_icons: { right: { enabled: true } },
+            },
+          },
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Primary" },
             },
+          },
+        ],
+        grid: Array(4)
+          .fill(0)
+          .map(() => ({
+            card: { selectedVariants: {} },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            details: { selectedVariants: {} },
             ctas: [
               {
-                button: {},
+                button: {
+                  selectedVariants: { Button_Variants: "Primary" },
+                },
               },
               {
-                button: {},
+                button: {
+                  selectedVariants: { Button_Variants: "Link" },
+                },
               },
             ],
+          })),
+      },
+    },
+    {
+      title: "Centered Header",
+      key: "centered_header",
+      styles: {
+        layout: {},
+        container: {},
+        header_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+          "align-items": "center",
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          "row-gap": "lg",
+        },
+        title_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "align-items": "center",
+          "text-align": "center",
+          "max-width": "720px",
+        },
+        main_title: {
+          "text-align": "center",
+        },
+        description: {
+          "text-align": "center",
+          color: "muted-foreground",
+        },
+        header_buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "justify-content": "center",
+        },
+        header_buttons_levoGroupItem: {
+          header_button: {},
+        },
+        header_buttons: [{}, {}],
+        grid_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "row-gap": "xl",
+          "column-gap": "xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           },
-          {
-            title: {},
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "4xl",
-              "padding-bottom": "4xl",
-              "padding-left": "4xl",
-              "padding-right": "4xl",
-              "border-radius": "base",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
-              },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
-              },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        grid_levoGroupItem: {
+          title: {
+            "text-align": "center",
+          },
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            height: "100%",
+            "background-color": "white",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "3xl",
+            "padding-right": "3xl",
+            "border-radius": "lg",
+            "row-gap": "lg",
+            "box-shadow":
+              "0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06)",
+            border: "1px solid",
+            "border-color": "border",
+            mobile: {
+              "padding-top": "xl",
+              "padding-left": "xl",
+              "padding-right": "xl",
+              "padding-bottom": "xl",
             },
-            details: {},
-            ctas_levoGroup: {
-              display: "flex",
-              "column-gap": "xs",
-              "margin-top": "lg",
-              mobile: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-              tablet: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
+            tablet: {
+              "padding-top": "2xl",
+              "padding-right": "2xl",
+              "padding-left": "2xl",
+              "padding-bottom": "2xl",
             },
-            content_wrapper: {
-              display: "flex",
+            "align-items": "center",
+            "text-align": "center",
+          },
+          details: {
+            "text-align": "center",
+            color: "muted-foreground",
+          },
+          ctas_levoGroup: {
+            display: "flex",
+            "flex-direction": "row",
+            "column-gap": "sm",
+            "margin-top": "auto",
+            "align-items": "center",
+            mobile: {
               "flex-direction": "column",
-              "row-gap": "sm",
+              "align-items": "stretch",
+              "row-gap": "xs",
             },
+            "justify-content": "center",
+          },
+          content_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "sm",
+            "align-items": "center",
+          },
+          ctas_levoGroupItem: {
+            button: {},
+          },
+          ctas: [{}, {}],
+        },
+        grid: [{}, {}, {}],
+        header_button_rightIcon: {
+          width: "16px",
+          height: "16px",
+        },
+      },
+      content: {
+        layout: null,
+        container: null,
+        header_section: null,
+        title_container: null,
+        main_title: "Built for the way teams ship today",
+        description:
+          "From async standups to shared rituals — the workspace your team adopts in a week and refuses to leave.",
+        header_buttons_levoGroup: null,
+        header_buttons: [
+          {
+            header_button: "Browse all features",
+          },
+          {
+            header_button: "Book a demo",
+          },
+        ],
+        grid: [
+          {
+            card: null,
+            content_wrapper: null,
+            title: "Real-time collaboration",
+            details:
+              "Multiplayer editing, presence cursors, and inline comments — your team thinks together without ever sharing a screen.",
             ctas: [
               {
-                button: {},
+                button: "Start free",
               },
               {
-                button: {},
+                button: "See how it works",
               },
             ],
           },
           {
-            title: {},
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "4xl",
-              "padding-bottom": "4xl",
-              "padding-left": "4xl",
-              "padding-right": "4xl",
-              "border-radius": "base",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
-              },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
-              },
-            },
-            details: {},
-            ctas_levoGroup: {
-              display: "flex",
-              "column-gap": "xs",
-              "margin-top": "lg",
-              mobile: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-              tablet: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-            },
-            content_wrapper: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-            },
+            card: null,
+            content_wrapper: null,
+            title: "Workflow automation",
+            details:
+              "Trigger handoffs the moment a status changes — Zapier-grade automations live next to every task, no extra tab.",
             ctas: [
               {
-                button: {},
+                button: "Try a recipe",
               },
               {
-                button: {},
+                button: "View library",
               },
             ],
           },
           {
-            title: {},
-            card: {
-              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-              display: "block",
-              "background-color": "white",
-              "padding-top": "4xl",
-              "padding-bottom": "4xl",
-              "padding-left": "4xl",
-              "padding-right": "4xl",
-              "border-radius": "base",
-              mobile: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-left": "xl",
-                "padding-right": "xl",
-                "padding-bottom": "xl",
-              },
-              tablet: {
-                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
-                "padding-top": "xl",
-                "padding-right": "xl",
-                "padding-left": "xl",
-                "padding-bottom": "xl",
-              },
-            },
-            details: {},
-            ctas_levoGroup: {
-              display: "flex",
-              "column-gap": "xs",
-              "margin-top": "lg",
-              mobile: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-              tablet: {
-                "flex-direction": "column",
-                "row-gap": "xs",
-              },
-            },
-            content_wrapper: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "sm",
-            },
+            card: null,
+            content_wrapper: null,
+            title: "Unified inbox",
+            details:
+              "Slack threads, GitHub PRs, and Linear updates roll into one queue so nothing slips between standups.",
             ctas: [
               {
-                button: {},
+                button: "Connect tools",
               },
               {
-                button: {},
+                button: "See integrations",
               },
             ],
           },
         ],
         header_button_rightIcon: {
-          width: "18px",
-        },
-        grid_levoGroup: {
-          display: "grid",
-          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
-          "row-gap": "xl",
-          "column-gap": "xl",
-          mobile: {
-            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          kind: "icon",
+          data: {
+            id: "arrow-right",
+            label: "Arrow Right",
+            svgCode:
+              '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H15C20.43 1.25 22.75 3.57 22.75 9V15C22.75 20.43 20.43 22.75 15 22.75ZM9 2.75C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V9C21.25 4.39 19.61 2.75 15 2.75H9Z" fill="var(--color-icon-primary)"/>\n<path d="M10.7397 16.28C10.5497 16.28 10.3597 16.21 10.2097 16.06C9.91969 15.77 9.91969 15.29 10.2097 15L13.2097 12L10.2097 8.99997C9.91969 8.70997 9.91969 8.22997 10.2097 7.93997C10.4997 7.64997 10.9797 7.64997 11.2697 7.93997L14.7997 11.47C15.0897 11.76 15.0897 12.24 14.7997 12.53L11.2697 16.06C11.1197 16.21 10.9297 16.28 10.7397 16.28Z" fill="var(--color-icon-primary)"/>\n</svg>',
           },
         },
       },
-      content: DEFAULT_CONTENT,
       config: {
         main_title: {
           heading: {
@@ -544,46 +895,6 @@ export const Cards4: IBlock = {
             Heading_Level: "H2",
           },
         },
-        "cards.0.ctas.0.button": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "cards.0.ctas.1.button": {
-          selectedVariants: {
-            Button_Variants: "Secondary",
-          },
-        },
-        "cards.1.ctas.0.button": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "cards.1.ctas.1.button": {
-          selectedVariants: {
-            Button_Variants: "Secondary",
-          },
-        },
-        "cards.2.ctas.0.button": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "cards.2.ctas.1.button": {
-          selectedVariants: {
-            Button_Variants: "Secondary",
-          },
-        },
-        "cards.3.ctas.0.button": {
-          selectedVariants: {
-            Button_Variants: "Primary",
-          },
-        },
-        "cards.3.ctas.1.button": {
-          selectedVariants: {
-            Button_Variants: "Secondary",
-          },
-        },
         header_buttons: [
           {
             header_button: {
@@ -599,32 +910,38 @@ export const Cards4: IBlock = {
           },
           {
             header_button: {
-              selectedVariants: {},
+              selectedVariants: {
+                Button_Variants: "Primary",
+              },
             },
           },
         ],
         grid: [
           {
+            card: {
+              selectedVariants: {},
+            },
             title: {
               selectedVariants: {
                 Heading_Level: "H4",
               },
             },
-            card: {
-              selectedVariants: {},
-            },
             details: {
               selectedVariants: {},
             },
             ctas: [
               {
                 button: {
-                  selectedVariants: {},
+                  selectedVariants: {
+                    Button_Variants: "Primary",
+                  },
                 },
               },
               {
                 button: {
-                  selectedVariants: {},
+                  selectedVariants: {
+                    Button_Variants: "Link",
+                  },
                 },
               },
             ],
@@ -641,6 +958,22 @@ export const Cards4: IBlock = {
             details: {
               selectedVariants: {},
             },
+            ctas: [
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Primary",
+                  },
+                },
+              },
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Link",
+                  },
+                },
+              },
+            ],
           },
           {
             card: {
@@ -654,6 +987,22 @@ export const Cards4: IBlock = {
             details: {
               selectedVariants: {},
             },
+            ctas: [
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Primary",
+                  },
+                },
+              },
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Link",
+                  },
+                },
+              },
+            ],
           },
           {
             card: {
@@ -667,8 +1016,143 @@ export const Cards4: IBlock = {
             details: {
               selectedVariants: {},
             },
+            ctas: [
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Primary",
+                  },
+                },
+              },
+              {
+                button: {
+                  selectedVariants: {
+                    Button_Variants: "Link",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      title: "Compact Cards",
+      key: "compact_cards",
+      styles: {
+        layout: {},
+        container: {},
+        header_section: HEADER_SECTION_SPLIT,
+        title_container: TITLE_CONTAINER_COLUMN,
+        main_title: {},
+        description: {
+          color: "muted-foreground",
+        },
+        header_buttons_levoGroup: HEADER_BUTTONS_GROUP,
+        header_buttons_levoGroupItem: {
+          header_button: {},
+        },
+        header_buttons: [{}, {}],
+        grid_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        grid_levoGroupItem: {
+          title: {},
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            height: "100%",
+            "background-color": "white",
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+            "border-radius": "lg",
+            "row-gap": "base",
+            border: "1px solid",
+            "border-color": "border",
+            "box-shadow":
+              "0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05)",
+            mobile: {
+              "padding-top": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "padding-bottom": "lg",
+            },
+          },
+          details: {
+            color: "muted-foreground",
+          },
+          ctas_levoGroup: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+            "margin-top": "auto",
+            "align-items": "stretch",
+          },
+          content_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+          ctas_levoGroupItem: {
+            button: {},
+          },
+          ctas: [{}, {}],
+        },
+        grid: [{}, {}, {}, {}],
+        header_button_rightIcon: {
+          width: "16px",
+          height: "16px",
+        },
+      },
+      content: COMPACT_CONTENT,
+      config: {
+        main_title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H2" },
+        },
+        header_buttons: [
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Link" },
+              button_icons: { right: { enabled: true } },
+            },
+          },
+          {
+            header_button: {
+              selectedVariants: { Button_Variants: "Primary" },
+            },
           },
         ],
+        grid: Array(4)
+          .fill(0)
+          .map(() => ({
+            card: { selectedVariants: {} },
+            title: { selectedVariants: { Heading_Level: "H4" } },
+            details: { selectedVariants: {} },
+            ctas: [
+              {
+                button: {
+                  selectedVariants: { Button_Variants: "Primary" },
+                },
+              },
+              {
+                button: {
+                  selectedVariants: { Button_Variants: "Link" },
+                },
+              },
+            ],
+          })),
       },
     },
   ],