@levo-so/blocks 0.1.101 → 0.1.102

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

@@ -1,21 +1,27 @@
 import type { IBlock } from "@levo-so/studio";
 
 const MEDIA = {
-  id: "DNP1ms1aXWQFH",
-  filename: "cards-15-1.png",
+  id: "7453000326848245591",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G.png",
+  location: "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-15-1-8eRfX0UmDhq7G-828w.webp 828w",
+    "320w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/6476782/pexels-photo-6476782.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -24,55 +30,73 @@ const DEFAULT_CONTENT = {
   content_wrapper: null,
   image: MEDIA,
   info_section: null,
-  title: "Tapadia Diagnostics in your city",
+  title: "One workspace. Every tool your team already uses.",
   description:
-    "Tapadia Diagnostics in your city Tapadia Diagnostics in your city Tapadia Diagnostics in your city Tapadia Diagnostics in your city ",
+    "Native two-way sync with 300+ apps means updates flow both ways — no stale dashboards, no copy-paste, no context switching.",
   cities_levoGroup: null,
   cities: [
-    {
-      city_name: "Hyderabad",
-    },
-    {
-      city_name: "Bangalore",
-    },
-    {
-      city_name: "Mumbai",
-    },
-    {
-      city_name: "Pune",
-    },
-    {
-      city_name: "Chennai",
-    },
-    {
-      city_name: "Delhi",
-    },
-    {
-      city_name: "Mysore",
-    },
-    {
-      city_name: "Cochin",
-    },
-    {
-      city_name: "Indore",
-    },
-    {
-      city_name: "Kolkata",
-    },
+    { city_name: "Slack" },
+    { city_name: "Notion" },
+    { city_name: "GitHub" },
+    { city_name: "Figma" },
+    { city_name: "Linear" },
+    { city_name: "Jira" },
+    { city_name: "Salesforce" },
+    { city_name: "HubSpot" },
+    { city_name: "Zoom" },
+    { city_name: "Google Drive" },
   ],
   ctas_levoGroup: null,
-  ctas: [{ cta: "Book Your Test" }, { cta: "Find Centers" }],
+  ctas: [{ cta: "Browse integrations" }, { cta: "Book a demo" }],
 };
 
 export type ICards15Content = typeof DEFAULT_CONTENT;
 
+/**
+ * Shared pill styling for integration name tags.
+ * Uses semantic tokens so the pills adapt to both light and dark themes.
+ */
+const CITY_PILL_STYLES = {
+  city_name: {
+    "background-color": "background-2",
+    border: "1px solid",
+    "border-color": "border",
+    color: "text-1",
+    "font-weight": "500",
+    "font-size": "sm",
+    "line-height": "1.2",
+    "padding-top": "2xs",
+    "padding-bottom": "2xs",
+    "padding-left": "sm",
+    "padding-right": "sm",
+    "border-radius": "md",
+    display: "inline-flex",
+    "align-items": "center",
+    width: "auto",
+  },
+};
+
+/** Shared image sizing — pairs with object-fit: cover per block-refresh rule 15. */
+const IMAGE_STYLES = {
+  "object-fit": "cover",
+  width: "100%",
+  "max-width": "520px",
+  height: "420px",
+  "aspect-ratio": "5 / 4",
+  "border-radius": "lg",
+  mobile: {
+    "max-width": "none",
+    height: "280px",
+  },
+};
+
 export const Cards15: IBlock = {
   category_id: "cards",
   title: "Cards 15",
   key: "cards-15",
   version: "v1",
   prompt_description:
-    "A diagnostic centers map block with statistics, city buttons, and booking CTA",
+    "Integrations spotlight: a SaaS block pairing a hero image with a product claim, a wrap of tool-name pills, and a pair of CTAs",
   content_schema: [
     {
       key: "layout",
@@ -89,13 +113,11 @@ export const Cards15: IBlock = {
       label: "Content Wrapper",
       field_interface: "BoxWidget",
     },
-
     {
       key: "image",
       label: "Image",
       field_interface: "ImageWidget",
     },
-
     {
       key: "info_section",
       label: "Info Section",
@@ -113,13 +135,13 @@ export const Cards15: IBlock = {
     },
     {
       key: "cities",
-      label: "Cities",
+      label: "Integration Tags",
       kind: "group",
       field_interface: "BoxWidget",
       fields: [
         {
           key: "city_name",
-          label: "City Name",
+          label: "Tag",
           field_interface: "TypographyWidget",
         },
       ],
@@ -140,8 +162,8 @@ export const Cards15: IBlock = {
   ],
   layouts: [
     {
-      key: "default",
-      title: "Default",
+      key: "image_right",
+      title: "Image Right",
       styles: {
         layout: {},
         container: {},
@@ -149,144 +171,288 @@ export const Cards15: IBlock = {
           display: "flex",
           "align-items": "center",
           "column-gap": "lg",
+          "flex-wrap": "wrap",
+          "row-gap": "sm",
         },
         content_wrapper: {
           display: "flex",
-          "flex-direction": "row",
+          "flex-direction": "row-reverse",
           "align-items": "center",
           "justify-content": "space-between",
-          gap: "2xl",
+          gap: "3xl",
           mobile: {
             "flex-direction": "column",
-            gap: "lg",
+            gap: "xl",
+          },
+        },
+        image: IMAGE_STYLES,
+        info_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          flex: "1",
+        },
+        title: {
+          "font-weight": 700,
+        },
+        description: {
+          color: "text-2",
+        },
+        cities_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          gap: "sm",
+        },
+        cities_levoGroupItem: CITY_PILL_STYLES,
+        cities: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+        ctas: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
           },
-          "padding-right": "3xl",
-          "padding-left": "3xl",
-          "margin-top": "none",
+        },
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      key: "stacked",
+      title: "Stacked",
+      styles: {
+        layout: {},
+        container: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          "justify-content": "center",
+          "flex-wrap": "wrap",
+          "row-gap": "sm",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          gap: "2xl",
         },
         image: {
-          "object-fit": "contain",
-          width: "500px",
-          height: "500px",
+          "object-fit": "cover",
+          width: "100%",
+          "max-width": "820px",
+          height: "420px",
+          "aspect-ratio": "16 / 9",
+          "border-radius": "lg",
           mobile: {
-            width: "100%",
-            height: "300px",
+            height: "260px",
           },
         },
         info_section: {
-          "background-color": "white",
-          "border-radius": "base",
-          "box-shadow": "default",
-          "padding-top": "lg",
-          "padding-bottom": "lg",
-          "padding-left": "lg",
-          "padding-right": "lg",
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "lg",
           width: "100%",
-          mobile: {
-            width: "100%",
-          },
+          "max-width": "720px",
+          "text-align": "center",
         },
         title: {
-          "margin-bottom": "lg",
           "font-weight": 700,
         },
+        description: {
+          color: "text-2",
+        },
         cities_levoGroup: {
           display: "flex",
           "flex-wrap": "wrap",
           gap: "sm",
-          "margin-bottom": "lg",
+          "justify-content": "center",
         },
-        "cities.0.city_name": {
-          "background-color": "background-2",
-          color: "text-1",
-          "font-weight": "500",
-          "font-size": "sm",
-          "padding-top": "xs",
-          "padding-bottom": "xs",
-          "padding-left": "sm",
-          "padding-right": "sm",
-          "border-radius": "full",
-          "text-align": "center",
-        },
-        cta_container: {},
-        phone_icon: {
-          width: "16px",
-          height: "16px",
-        },
-        cta_text: {
-          color: "background-1",
-          "font-weight": "600",
+        cities_levoGroupItem: CITY_PILL_STYLES,
+        cities: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+        ctas: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
         },
-        cities: [
+        ctas: [
           {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
+            cta: {
+              selectedVariants: {},
             },
           },
           {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
             },
           },
-          {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
-            },
+        ],
+      },
+    },
+    {
+      key: "card",
+      title: "Card",
+      styles: {
+        layout: {},
+        container: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          "flex-wrap": "wrap",
+          "row-gap": "sm",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          gap: "3xl",
+          mobile: {
+            "flex-direction": "column",
+            gap: "xl",
           },
-          {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
-            },
+          "padding-right": "2xl",
+          "padding-left": "2xl",
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "background-color": "background-2",
+          "border-radius": "lg",
+          "border-width": "1px",
+          "border-color": "border",
+        },
+        image: IMAGE_STYLES,
+        info_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          flex: "1",
+        },
+        title: {
+          "font-weight": 700,
+        },
+        description: {
+          color: "text-2",
+        },
+        cities_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          gap: "sm",
+        },
+        cities_levoGroupItem: CITY_PILL_STYLES,
+        cities: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+        ctas: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
           },
+        },
+        ctas: [
           {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
+            cta: {
+              selectedVariants: {},
             },
           },
           {
-            city_name: {
-              "background-color": "background-3",
-              "padding-left": "xs",
-              "padding-right": "xs",
-              "padding-top": "4xs",
-              "padding-bottom": "4xs",
-              "border-radius": "3xl",
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
             },
           },
         ],
       },
+    },
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {},
+        container: {},
+        ctas_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          "flex-wrap": "wrap",
+          "row-gap": "sm",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          gap: "3xl",
+          mobile: {
+            "flex-direction": "column",
+            gap: "xl",
+          },
+        },
+        image: IMAGE_STYLES,
+        info_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          flex: "1",
+        },
+        title: {
+          "font-weight": 700,
+        },
+        description: {
+          color: "text-2",
+        },
+        cities_levoGroup: {
+          display: "flex",
+          "flex-wrap": "wrap",
+          gap: "sm",
+        },
+        cities_levoGroupItem: CITY_PILL_STYLES,
+        cities: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+        ctas: [{}, {}],
+      },
       content: DEFAULT_CONTENT,
       config: {
         title: {
           selectedVariants: {
-            Heading_Level: "H5",
+            Heading_Level: "H2",
           },
         },
+        ctas: [
+          {
+            cta: {
+              selectedVariants: {},
+            },
+          },
+          {
+            cta: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
       },
     },
   ],