@levo-so/blocks 0.1.101 → 0.1.102

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

@@ -1,21 +1,27 @@
 import type { IBlock } from "@levo-so/studio";
 
 const IMG = {
-  id: "HXVK4tirkNvhr",
-  filename: "cards-3-1.png",
+  id: "7452991585623566044",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2.png",
+  location: "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-3-1-UpLP5Wh3X9LV2-750w.webp 750w",
+    "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",
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -23,28 +29,58 @@ const DEFAULT_CONTENT = {
   container: null,
   hero_section: null,
   text_content: null,
-  main_title: "Schedule a productivity boost",
+  main_title: "Trusted by teams shipping every day",
   description:
-    "Take control of your time and energy with smart planning tools. Build better habits, stay focused, and get more done—every day.",
+    "Real-time workspaces, automations that actually fire, and integrations across 300+ tools. Built for the way modern product teams ship.",
   hero_image: IMG,
   stats_section: null,
   stats_cards: [
     {
       card: null,
-      number: "500%",
-      label: "Return on Investment",
+      number: "12,000+",
+      label: "Teams onboarded",
       separator: null,
     },
     {
       card: null,
-      number: "250+",
-      label: "Project in 5 Years",
+      number: "99.99%",
+      label: "Uptime SLA, last 12 months",
       separator: null,
     },
     {
       card: null,
-      number: "20M+",
-      label: "Return on Investment",
+      number: "4.9 / 5",
+      label: "G2 score across 1,800 reviews",
+      separator: null,
+    },
+  ],
+};
+
+const FOUR_STATS_CONTENT = {
+  ...DEFAULT_CONTENT,
+  stats_cards: [
+    {
+      card: null,
+      number: "12,000+",
+      label: "Teams onboarded",
+      separator: null,
+    },
+    {
+      card: null,
+      number: "99.99%",
+      label: "Uptime SLA, last 12 months",
+      separator: null,
+    },
+    {
+      card: null,
+      number: "300+",
+      label: "Native integrations",
+      separator: null,
+    },
+    {
+      card: null,
+      number: "4.9 / 5",
+      label: "G2 score, 1,800 reviews",
       separator: null,
     },
   ],
@@ -58,7 +94,7 @@ export const Cards3: IBlock = {
   key: "cards-3",
   version: "v1",
   prompt_description:
-    "Productivity boost section with hero content and three statistics cards displaying key performance metrics with separators between them.",
+    "Hero with headline, supporting copy, photography, and a row of company-trust statistics with vertical separators between each metric.",
   content_schema: [
     {
       key: "layout",
@@ -134,68 +170,59 @@ export const Cards3: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {},
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
         container: {},
         hero_section: {
           display: "flex",
-          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
-          "column-gap": "3xl",
-          "align-items": "center",
-          "margin-bottom": "4xl",
-          tablet: {
-            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
-            "row-gap": "2xl",
-          },
+          "flex-direction": "column",
+          "row-gap": "3xl",
+          "margin-bottom": "3xl",
           mobile: {
-            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
             "row-gap": "xl",
+            "margin-bottom": "2xl",
           },
-
-          "flex-direction": "column",
         },
         text_content: {
           display: "flex",
           "flex-direction": "row",
-          "row-gap": "base",
-
+          "column-gap": "3xl",
+          "row-gap": "lg",
           width: "100%",
           "justify-content": "space-between",
-          "align-items": "center",
+          "align-items": "end",
           mobile: {
             "flex-direction": "column",
+            "align-items": "start",
           },
           tablet: {
-            "flex-direction": "row",
-            "justify-content": "start",
+            "flex-direction": "column",
             "align-items": "start",
           },
         },
         main_title: {
-          width: "500px",
+          "max-width": "560px",
           mobile: {
             width: "100%",
-            "text-align": "center",
           },
         },
         description: {
+          "max-width": "440px",
+          color: "muted-foreground",
           mobile: {
             width: "100%",
-            "text-align": "center",
           },
-          width: "400px",
         },
         hero_image: {
           width: "100%",
-          height: "500px",
+          height: "440px",
           "border-radius": "base",
-
           "object-fit": "cover",
-          "margin-top": "8xl",
-          "margin-bottom": "3xl",
+          "aspect-ratio": "16 / 9",
           mobile: {
-            height: "100%",
-            "margin-top": "xl",
-            "margin-bottom": "none",
+            height: "240px",
           },
         },
         stats_section: {
@@ -205,6 +232,7 @@ export const Cards3: IBlock = {
           display: "flex",
           "align-items": "center",
           "justify-content": "space-between",
+          "column-gap": "2xl",
           width: "100%",
           tablet: {
             "flex-direction": "row",
@@ -213,83 +241,306 @@ export const Cards3: IBlock = {
           mobile: {
             "flex-direction": "column",
             "row-gap": "lg",
+            "align-items": "start",
+          },
+        },
+        stats_cards_levoGroupItem: {
+          separator: {
+            height: "72px",
+            width: "1px",
+            "background-color": "border",
+            mobile: {
+              display: "none",
+            },
+          },
+          number: {
+            mobile: {
+              "text-align": "left",
+            },
+          },
+          label: {
+            color: "muted-foreground",
+          },
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+        },
+        stats_cards: [{}, {}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
           },
         },
-        "stats_cards.$.card": {
+        stats_cards: [
+          {
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+          {
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+          {
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+        ],
+      },
+    },
+    {
+      title: "Stats Grid",
+      key: "stats_grid",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {},
+        hero_section: {
           display: "flex",
           "flex-direction": "column",
+          "row-gap": "2xl",
           "align-items": "center",
+          "margin-bottom": "3xl",
+          mobile: {
+            "row-gap": "xl",
+            "margin-bottom": "2xl",
+          },
+        },
+        text_content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          width: "100%",
+          "align-items": "center",
+          "text-align": "center",
+        },
+        main_title: {
+          "max-width": "640px",
           "text-align": "center",
         },
-        "stats_cards.$.number": {
-          color: "text-1",
-          "margin-bottom": "xs",
+        description: {
+          "max-width": "560px",
+          "text-align": "center",
+          color: "muted-foreground",
         },
-        "stats_cards.$.label": {
-          color: "text-2",
+        hero_image: {
+          width: "100%",
+          height: "320px",
+          "border-radius": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "21 / 9",
+          mobile: {
+            height: "200px",
+          },
+        },
+        stats_section: {
+          width: "100%",
         },
-        "stats_cards.$.separator": {
-          width: "1px",
-          height: "80px",
-          "background-color": "border",
+        stats_cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          gap: "xl",
+          width: "100%",
           tablet: {
-            display: "none",
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           },
           mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            gap: "lg",
+          },
+        },
+        stats_cards_levoGroupItem: {
+          separator: {
             display: "none",
           },
+          number: {
+            "text-align": "center",
+          },
+          label: {
+            "text-align": "center",
+            color: "muted-foreground",
+          },
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+            "align-items": "center",
+            height: "100%",
+            "padding-top": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "background-color": "background-2",
+            "border-radius": "base",
+          },
+        },
+        stats_cards: [{}, {}, {}, {}],
+      },
+      content: FOUR_STATS_CONTENT,
+      config: {
+        main_title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
         },
         stats_cards: [
           {
-            separator: {
-              height: "100px",
-              width: "1px",
-              "background-color": "black",
-              mobile: {
-                display: "none",
-              },
-            },
-            number: {
-              mobile: {
-                "text-align": "center",
-              },
-            },
-            label: {},
-            card: {},
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+          {
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
           },
           {
-            number: {
-              mobile: {
-                "text-align": "center",
-              },
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+          {
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
+          },
+        ],
+      },
+    },
+    {
+      title: "Overlay Stats",
+      key: "overlay_stats",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "4xl",
+        },
+        container: {},
+        hero_section: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+          "align-items": "center",
+          "margin-bottom": "3xl",
+          mobile: {
+            "margin-bottom": "2xl",
+          },
+        },
+        text_content: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          width: "100%",
+          "align-items": "center",
+          "text-align": "center",
+        },
+        main_title: {
+          "max-width": "640px",
+          "text-align": "center",
+        },
+        description: {
+          "max-width": "560px",
+          "text-align": "center",
+          color: "muted-foreground",
+        },
+        hero_image: {
+          width: "100%",
+          height: "440px",
+          "border-radius": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "21 / 9",
+          mobile: {
+            height: "260px",
+          },
+        },
+        stats_section: {
+          width: "100%",
+          "margin-top": "-72px",
+          "padding-left": "4xl",
+          "padding-right": "4xl",
+          position: "relative",
+          "z-index": "10",
+          mobile: {
+            "margin-top": "-32px",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+        },
+        stats_cards_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "column-gap": "2xl",
+          width: "100%",
+          "background-color": "background-2",
+          "border-radius": "base",
+          "box-shadow": "default",
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            "align-items": "start",
+            "padding-top": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+        },
+        stats_cards_levoGroupItem: {
+          number: {
+            mobile: {
+              "text-align": "left",
             },
+          },
+          label: {
+            color: "muted-foreground",
+          },
+          card: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+        },
+        stats_cards: [
+          {
             separator: {
-              height: "100px",
+              height: "64px",
               width: "1px",
-              "background-color": "black",
-              mobile: {
-                display: "none",
-              },
+              "background-color": "border",
+              mobile: { display: "none" },
             },
-            label: {},
-            card: {},
           },
           {
-            number: {
-              mobile: {
-                "text-align": "center",
-              },
-            },
-            label: {},
             separator: {
-              height: "100px",
+              height: "64px",
               width: "1px",
-              "background-color": "black",
-              mobile: {
-                display: "none",
-              },
+              "background-color": "border",
+              mobile: { display: "none" },
             },
-            card: {},
+          },
+          {
+            separator: { display: "none" },
           },
         ],
       },
@@ -310,28 +561,16 @@ export const Cards3: IBlock = {
         },
         stats_cards: [
           {
-            label: {
-              selectedVariants: {},
-            },
-            card: {
-              selectedVariants: {},
-            },
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
           },
           {
-            label: {
-              selectedVariants: {},
-            },
-            card: {
-              selectedVariants: {},
-            },
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
           },
           {
-            label: {
-              selectedVariants: {},
-            },
-            card: {
-              selectedVariants: {},
-            },
+            label: { selectedVariants: {} },
+            card: { selectedVariants: {} },
           },
         ],
       },