@levo-so/blocks 0.1.100 → 0.1.102

package/src/blocks/stats/stats-1.schema.ts

@@ -1,13 +1,42 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
+const ICON_VOLUME = {
   kind: "icon",
   data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
+    id: "chart-success",
+    label: "Chart Success",
     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="M13 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 9V13C22.75 13.41 22.41 13.75 22 13.75C21.59 13.75 21.25 13.41 21.25 13V9C21.25 4.39 19.61 2.75 15 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H13C13.41 21.25 13.75 21.59 13.75 22C13.75 22.41 13.41 22.75 13 22.75Z" fill="currentColor"/>\n<path d="M7 14.69C6.59 14.69 6.25 14.35 6.25 13.94V10.73C6.25 10.32 6.59 9.98001 7 9.98001C7.41 9.98001 7.75 10.32 7.75 10.73V13.94C7.75 14.36 7.41 14.69 7 14.69Z" fill="currentColor"/>\n<path d="M17 14.69C16.59 14.69 16.25 14.35 16.25 13.94V10.73C16.25 10.32 16.59 9.98001 17 9.98001C17.41 9.98001 17.75 10.32 17.75 10.73V13.94C17.75 14.36 17.41 14.69 17 14.69Z" fill="currentColor"/>\n<path d="M17.5803 21.75C17.3803 21.75 17.1903 21.67 17.0503 21.53L15.4703 19.96C15.1803 19.67 15.1703 19.19 15.4703 18.9C15.7603 18.61 16.2403 18.6 16.5303 18.9L17.5403 19.9L20.4403 16.51C20.7103 16.19 21.1803 16.16 21.5003 16.43C21.8103 16.7 21.8503 17.17 21.5803 17.49L18.1603 21.49C18.0203 21.65 17.8303 21.74 17.6203 21.75C17.6003 21.75 17.5903 21.75 17.5803 21.75Z" fill="currentColor"/>\n<path d="M12 14.25C11.59 14.25 11.25 13.91 11.25 13.5V10.5C11.25 10.09 11.59 9.75 12 9.75C12.41 9.75 12.75 10.09 12.75 10.5V13.5C12.75 13.91 12.41 14.25 12 14.25Z" fill="currentColor"/>\n</svg>',
+  },
+};
+
+const ICON_UPTIME = {
+  kind: "icon",
+  data: {
+    id: "medal-star",
+    label: "Medal Star",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 16.75C11.6 16.75 11.2 16.72 10.82 16.65C8.7 16.34 6.77 15.12 5.55 13.31C4.7 12.03 4.25 10.54 4.25 9C4.25 4.73 7.73 1.25 12 1.25C16.27 1.25 19.75 4.73 19.75 9C19.75 10.54 19.3 12.03 18.45 13.31C17.22 15.13 15.29 16.34 13.15 16.66C12.8 16.72 12.4 16.75 12 16.75ZM12 2.75C8.55 2.75 5.75 5.55 5.75 9C5.75 10.25 6.11 11.45 6.79 12.47C7.78 13.93 9.33 14.91 11.05 15.16C11.69 15.27 12.32 15.27 12.91 15.16C14.66 14.91 16.21 13.92 17.2 12.46C17.88 11.44 18.24 10.24 18.24 8.98999C18.25 5.54999 15.45 2.75 12 2.75Z" fill="currentColor"/>\n<path d="M6.46933 22.59C6.32933 22.59 6.19933 22.57 6.05933 22.54C5.40933 22.39 4.90933 21.89 4.75933 21.24L4.40933 19.77C4.38933 19.68 4.31933 19.61 4.21933 19.58L2.56933 19.19C1.94933 19.04 1.45933 18.58 1.28933 17.97C1.11933 17.36 1.28933 16.7 1.73933 16.25L5.63933 12.35C5.79933 12.19 6.01933 12.11 6.23933 12.13C6.45933 12.15 6.65933 12.27 6.78933 12.46C7.77933 13.92 9.32933 14.91 11.0593 15.16C11.6993 15.27 12.3293 15.27 12.9193 15.16C14.6693 14.91 16.2193 13.92 17.2093 12.46C17.3293 12.27 17.5393 12.15 17.7593 12.13C17.9793 12.11 18.1993 12.19 18.3593 12.35L22.2593 16.25C22.7093 16.7 22.8793 17.36 22.7093 17.97C22.5393 18.58 22.0393 19.05 21.4293 19.19L19.7793 19.58C19.6893 19.6 19.6193 19.67 19.5893 19.77L19.2393 21.24C19.0893 21.89 18.5893 22.39 17.9393 22.54C17.2893 22.7 16.6193 22.47 16.1993 21.96L11.9993 17.13L7.79933 21.97C7.45933 22.37 6.97933 22.59 6.46933 22.59ZM6.08933 14.03L2.79933 17.32C2.70933 17.41 2.71933 17.51 2.73933 17.57C2.74933 17.62 2.79933 17.72 2.91933 17.74L4.56933 18.13C5.21933 18.28 5.71933 18.78 5.86933 19.43L6.21933 20.9C6.24933 21.03 6.34933 21.07 6.40933 21.09C6.46933 21.1 6.56933 21.11 6.65933 21.01L10.4893 16.6C8.78933 16.27 7.22933 15.36 6.08933 14.03ZM13.5093 16.59L17.3393 20.99C17.4293 21.1 17.5393 21.1 17.5993 21.08C17.6593 21.07 17.7493 21.02 17.7893 20.89L18.1393 19.42C18.2893 18.77 18.7893 18.27 19.4393 18.12L21.0893 17.73C21.2093 17.7 21.2593 17.61 21.2693 17.56C21.2893 17.51 21.2993 17.4 21.2093 17.31L17.9193 14.02C16.7693 15.35 15.2193 16.26 13.5093 16.59Z" fill="currentColor"/>\n<path d="M13.8901 12.89C13.6301 12.89 13.3201 12.82 12.9501 12.6L12.0001 12.03L11.0501 12.59C10.1801 13.11 9.61014 12.81 9.40014 12.66C9.19014 12.51 8.74014 12.06 8.97014 11.07L9.21014 10.04L8.41014 9.29999C7.97014 8.85999 7.81014 8.33001 7.96014 7.85001C8.11014 7.37001 8.55014 7.02999 9.17014 6.92999L10.2401 6.75L10.7501 5.63C11.0401 5.06 11.4901 4.73999 12.0001 4.73999C12.5101 4.73999 12.9701 5.07001 13.2501 5.64001L13.8401 6.82001L14.8301 6.94C15.4401 7.04 15.8801 7.37999 16.0401 7.85999C16.1901 8.33999 16.0301 8.87 15.5901 9.31L14.7601 10.14L15.0201 11.07C15.2501 12.06 14.8001 12.51 14.5901 12.66C14.4801 12.75 14.2401 12.89 13.8901 12.89ZM9.61014 8.39001L10.3001 9.07999C10.6201 9.39999 10.7801 9.94 10.6801 10.38L10.4901 11.18L11.2901 10.71C11.7201 10.46 12.3001 10.46 12.7201 10.71L13.5201 11.18L13.3401 10.38C13.2401 9.93001 13.3901 9.39999 13.7101 9.07999L14.4001 8.39001L13.5301 8.23999C13.1101 8.16999 12.6901 7.86001 12.5001 7.48001L12.0001 6.5L11.5001 7.5C11.3201 7.87 10.9001 8.19001 10.4801 8.26001L9.61014 8.39001Z" fill="currentColor"/>\n</svg>',
+  },
+};
+
+const ICON_LATENCY = {
+  kind: "icon",
+  data: {
+    id: "flash",
+    label: "Flash",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.98959 22.75C9.78959 22.75 9.62959 22.71 9.50959 22.66C9.10959 22.51 8.42959 22.02 8.42959 20.47V14.02H6.08959C4.74959 14.02 4.26959 13.39 4.09959 13.02C3.92959 12.64 3.77959 11.87 4.65959 10.86L12.2296 2.26001C13.2496 1.10001 14.0796 1.18001 14.4796 1.33001C14.8796 1.48001 15.5596 1.97001 15.5596 3.52001V9.97001H17.8996C19.2396 9.97001 19.7196 10.6 19.8896 10.97C20.0596 11.35 20.2096 12.12 19.3296 13.13L11.7596 21.73C11.0496 22.54 10.4296 22.75 9.98959 22.75ZM13.9296 2.74001C13.8996 2.78001 13.6896 2.88001 13.3596 3.26001L5.78959 11.86C5.50959 12.18 5.46959 12.38 5.46959 12.42C5.48959 12.43 5.66959 12.53 6.08959 12.53H9.17959C9.58959 12.53 9.92959 12.87 9.92959 13.28V20.48C9.92959 20.98 10.0196 21.2 10.0596 21.26C10.0896 21.22 10.2996 21.12 10.6296 20.74L18.1996 12.14C18.4796 11.82 18.5196 11.62 18.5196 11.58C18.4996 11.57 18.3196 11.47 17.8996 11.47H14.8096C14.3996 11.47 14.0596 11.13 14.0596 10.72V3.52001C14.0696 3.02001 13.9696 2.81001 13.9296 2.74001Z" fill="currentColor"/>\n</svg>',
+  },
+};
+
+const ICON_COMPLIANCE = {
+  kind: "icon",
+  data: {
+    id: "shield-tick",
+    label: "Shield Tick",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.0004 22.7599C10.9104 22.7599 9.83039 22.4399 8.98039 21.8099L4.68039 18.5999C3.54039 17.7499 2.65039 15.9699 2.65039 14.5599V7.11994C2.65039 5.57994 3.78039 3.93994 5.23039 3.39994L10.2204 1.52994C11.2104 1.15994 12.7704 1.15994 13.7604 1.52994L18.7504 3.39994C20.2004 3.93994 21.3304 5.57994 21.3304 7.11994V14.5499C21.3304 15.9699 20.4404 17.7399 19.3004 18.5899L15.0004 21.7999C14.1704 22.4399 13.0904 22.7599 12.0004 22.7599ZM10.7504 2.93994L5.76039 4.80994C4.91039 5.12994 4.16039 6.20994 4.16039 7.12994V14.5599C4.16039 15.5099 4.83039 16.8399 5.58039 17.3999L9.88039 20.6099C11.0304 21.4699 12.9704 21.4699 14.1304 20.6099L18.4304 17.3999C19.1904 16.8299 19.8504 15.5099 19.8504 14.5599V7.11994C19.8504 6.20994 19.1004 5.12994 18.2504 4.79994L13.2604 2.92994C12.5804 2.68994 11.4204 2.68994 10.7504 2.93994Z" fill="currentColor"/>\n<path d="M10.6602 14.2301C10.4702 14.2301 10.2802 14.1601 10.1302 14.0101L8.52023 12.4001C8.23023 12.1101 8.23023 11.6301 8.52023 11.3401C8.81023 11.0501 9.29023 11.0501 9.58023 11.3401L10.6602 12.4201L14.4302 8.65012C14.7202 8.36012 15.2002 8.36012 15.4902 8.65012C15.7802 8.94012 15.7802 9.42012 15.4902 9.71012L11.1902 14.0101C11.0402 14.1601 10.8502 14.2301 10.6602 14.2301Z" fill="currentColor"/>\n</svg>',
   },
 };
 
@@ -15,80 +44,43 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   stats_levoGroup: null,
-  title: "Title",
+  title: "Numbers that move money safely",
   description:
-    "Description Description Description Description Description Description Description Description ",
+    "Payments, settlement, and fraud defense the world's fintechs run on — measured by the volume we clear and the downtime we don't.",
   stats: [
     {
       stat: null,
-      icon: DUMMY_ICON,
+      icon: ICON_VOLUME,
       "content-wrapper": null,
-      header: "20+",
-      description: "Years of experience",
+      header: "$420B+",
+      description: "Annual payment volume",
     },
     {
       stat: null,
-      icon: DUMMY_ICON,
+      icon: ICON_UPTIME,
       "content-wrapper": null,
-      header: "500+",
-      description: "Happy Client Worldwide",
+      header: "99.99%",
+      description: "Platform uptime, monthly",
     },
     {
       stat: null,
-      icon: DUMMY_ICON,
+      icon: ICON_LATENCY,
       "content-wrapper": null,
-      header: "1K+",
-      description: "Audits Completed",
+      header: "<80ms",
+      description: "Median auth latency",
     },
     {
       stat: null,
-      icon: DUMMY_ICON,
+      icon: ICON_COMPLIANCE,
       "content-wrapper": null,
-      header: "22+",
-      description: "Business Awards",
+      header: "PCI L1",
+      description: "Audited every quarter",
     },
   ],
 };
 
 export type IStats1Content = typeof DEFAULT_CONTENT;
 
-const STAT_STYLE = {
-  stat: {
-    border: "none",
-    "background-color": "transparent",
-    "box-shadow": "none",
-    display: "flex",
-    width: "100%",
-    "flex-direction": "column",
-    "row-gap": "xl",
-  },
-  icon: {
-    width: "48px",
-    height: "48px",
-    "object-fit": "contain",
-    "margin-left": "auto",
-    "margin-right": "auto",
-  },
-  "content-wrapper": {
-    display: "flex",
-    "flex-direction": "column",
-    "align-items": "center",
-    "row-gap": "xs",
-  },
-  header: {
-    color: "var(--color-brand-foreground)",
-  },
-  description: {
-    color: "var(--color-brand-foreground)",
-    "font-size": "base",
-    "font-weight": 600,
-  },
-};
-
-const STATS_STYLES = Array(4)
-  ?.fill(0)
-  ?.map((_: any) => STAT_STYLE);
-
 export const Stats1: IBlock = {
   category_id: "stats",
   title: "Stats 1",
@@ -213,8 +205,8 @@ export const Stats1: IBlock = {
         stats_levoGroup: {
           display: "grid",
           "grid-template-columns": "repeat(4, minmax(0, 1fr))",
-          "column-gap": "9xl",
-          "row-gap": "9xl",
+          "column-gap": "3xl",
+          "row-gap": "3xl",
           tablet: {
             "grid-template-columns": "repeat(2, minmax(0, 1fr))",
           },
@@ -222,132 +214,41 @@ export const Stats1: IBlock = {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
           },
         },
-        stats: [
-          {
-            stat: {
-              border: "none",
-              "background-color": "transparent",
-              "box-shadow": "none",
-              display: "flex",
-              width: "100%",
-              "flex-direction": "column",
-              "row-gap": "xl",
-            },
-            icon: {
-              width: "48px",
-              height: "48px",
-              "object-fit": "contain",
-              "margin-left": "auto",
-              "margin-right": "auto",
-            },
-            "content-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "row-gap": "4xs",
-            },
-            header: {
-              color: "brandForeground",
-            },
-            description: {
-              "font-weight": 600,
-              color: "brandForeground",
-            },
+        stats_levoGroupItem: {
+          stat: {
+            border: "none",
+            "background-color": "transparent",
+            "box-shadow": "none",
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "row-gap": "base",
           },
-          {
-            stat: {
-              border: "none",
-              "background-color": "transparent",
-              "box-shadow": "none",
-              display: "flex",
-              width: "100%",
-              "flex-direction": "column",
-              "row-gap": "xl",
-            },
-            icon: {
-              width: "48px",
-              height: "48px",
-              "object-fit": "contain",
-              "margin-left": "auto",
-              "margin-right": "auto",
-            },
-            "content-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "row-gap": "4xs",
-            },
-            header: {
-              color: "brandForeground",
-            },
-            description: {
-              "font-weight": 600,
-              color: "brandForeground",
-            },
+          icon: {
+            width: "40px",
+            height: "40px",
+            "object-fit": "contain",
+            "margin-left": "auto",
+            "margin-right": "auto",
+            "flex-shrink": 0,
+            color: "brandForeground",
           },
-          {
-            stat: {
-              border: "none",
-              "background-color": "transparent",
-              "box-shadow": "none",
-              display: "flex",
-              width: "100%",
-              "flex-direction": "column",
-              "row-gap": "xl",
-            },
-            icon: {
-              width: "48px",
-              height: "48px",
-              "object-fit": "contain",
-              "margin-left": "auto",
-              "margin-right": "auto",
-            },
-            "content-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "row-gap": "4xs",
-            },
-            header: {
-              color: "brandForeground",
-            },
-            description: {
-              "font-weight": 600,
-              color: "brandForeground",
-            },
+          "content-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "4xs",
           },
-          {
-            stat: {
-              border: "none",
-              "background-color": "transparent",
-              "box-shadow": "none",
-              display: "flex",
-              width: "100%",
-              "flex-direction": "column",
-              "row-gap": "xl",
-            },
-            icon: {
-              width: "48px",
-              height: "48px",
-              "object-fit": "contain",
-              "margin-left": "auto",
-              "margin-right": "auto",
-            },
-            "content-wrapper": {
-              display: "flex",
-              "flex-direction": "column",
-              "align-items": "center",
-              "row-gap": "4xs",
-            },
-            header: {
-              color: "brandForeground",
-            },
-            description: {
-              "font-weight": 600,
-              color: "brandForeground",
-            },
+          header: {
+            color: "brandForeground",
           },
-        ],
+          description: {
+            "font-weight": 600,
+            color: "brandForeground",
+            "text-align": "center",
+          },
+        },
+        stats: [{}, {}, {}, {}],
         title: {
           color: "brandForeground",
           "text-align": "center",
@@ -360,99 +261,38 @@ export const Stats1: IBlock = {
       },
       content: DEFAULT_CONTENT,
       config: {
-        "stats.0.header": {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-        "stats.1.header": {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-        "stats.2.header": {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
-        "stats.3.header": {
-          heading: {
-            level: 2,
-          },
-          selectedVariants: {
-            Heading_Level: "H2",
-          },
-        },
         stats: [
           {
             header: {
-              heading: {
-                level: "3",
-              },
-              selectedVariants: {
-                Heading_Level: "H2",
-              },
-            },
-            "content-wrapper": {
-              selectedVariants: {},
-            },
-            description: {
-              selectedVariants: {},
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H2" },
             },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
           },
           {
             header: {
-              selectedVariants: {
-                Heading_Level: "H2",
-              },
-            },
-            "content-wrapper": {
-              selectedVariants: {},
-            },
-            description: {
-              selectedVariants: {},
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H2" },
             },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
           },
           {
             header: {
-              selectedVariants: {
-                Heading_Level: "H2",
-              },
-              heading: {
-                level: "3",
-              },
-            },
-            "content-wrapper": {
-              selectedVariants: {},
-            },
-            description: {
-              selectedVariants: {},
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H2" },
             },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
           },
           {
             header: {
-              selectedVariants: {
-                Heading_Level: "H2",
-              },
-              heading: {
-                level: "3",
-              },
-            },
-            "content-wrapper": {
-              selectedVariants: {},
-            },
-            description: {
-              selectedVariants: {},
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H2" },
             },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
           },
         ],
         title: {
@@ -462,5 +302,255 @@ export const Stats1: IBlock = {
         },
       },
     },
+    {
+      key: "horizontal-bar",
+      title: "Horizontal Bar",
+      styles: {
+        layout: { "background-color": "background-1" },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        stats_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "none",
+          "border-width": "1px",
+          "border-style": "solid",
+          "border-color": "border",
+          "border-radius": "xl",
+          overflow: "hidden",
+          tablet: { "flex-wrap": "wrap" },
+          mobile: { "flex-direction": "column" },
+        },
+        stats_levoGroupItem: {
+          icon: {
+            width: "32px",
+            height: "32px",
+            "object-fit": "contain",
+            "flex-shrink": 0,
+            color: "brand",
+          },
+          "content-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "2xs",
+          },
+          header: { color: "text-1" },
+          description: { "font-weight": 500, color: "text-2" },
+        },
+        stats: Array(4)
+          .fill(0)
+          .map((_, i) => ({
+            stat: {
+              border: "none",
+              "background-color": "transparent",
+              "box-shadow": "none",
+              display: "flex",
+              flex: "1",
+              "flex-direction": "row",
+              "align-items": "center",
+              "column-gap": "base",
+              "padding-top": "xl",
+              "padding-bottom": "xl",
+              "padding-left": "xl",
+              "padding-right": "xl",
+              ...(i > 0
+                ? {
+                    "border-left-width": "1px",
+                    "border-left-style": "solid",
+                    "border-color": "border",
+                  }
+                : {}),
+              mobile: {
+                "border-left-width": "0",
+                "border-top-width": i > 0 ? "1px" : "0",
+                "border-top-style": "solid",
+                "border-color": "border",
+              },
+            },
+          })),
+        title: { "text-align": "center", "margin-bottom": "4xs" },
+        description: { "text-align": "center", color: "text-2" },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        stats: Array(4)
+          .fill(0)
+          .map(() => ({
+            header: {
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H3" },
+            },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
+          })),
+        title: { selectedVariants: { Heading_Level: "H2" } },
+      },
+    },
+    {
+      key: "centered-large",
+      title: "Centered Large",
+      styles: {
+        layout: { "background-color": "background-1" },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xl",
+        },
+        stats_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          "column-gap": "3xl",
+          "row-gap": "4xl",
+          tablet: { "grid-template-columns": "repeat(2, minmax(0, 1fr))" },
+          mobile: { "grid-template-columns": "repeat(1, minmax(0, 1fr))" },
+        },
+        stats_levoGroupItem: {
+          stat: {
+            border: "none",
+            "background-color": "transparent",
+            "box-shadow": "none",
+            display: "flex",
+            width: "100%",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "sm",
+          },
+          icon: {
+            width: "0",
+            height: "0",
+            margin: "0",
+            padding: "0",
+            overflow: "hidden",
+            visibility: "hidden",
+          },
+          "content-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "xs",
+          },
+          header: {
+            color: "brand",
+            "font-size": "6xl",
+            "font-weight": 800,
+            "line-height": "1",
+          },
+          description: {
+            "font-weight": 600,
+            color: "text-2",
+            "text-transform": "uppercase",
+            "letter-spacing": "0.08em",
+            "font-size": "sm",
+            "text-align": "center",
+          },
+        },
+        stats: [{}, {}, {}, {}],
+        title: { "text-align": "center", "margin-bottom": "4xs" },
+        description: {
+          "text-align": "center",
+          color: "text-2",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        stats: Array(4)
+          .fill(0)
+          .map(() => ({
+            header: {
+              heading: { level: "2" },
+              selectedVariants: { Heading_Level: "H1" },
+            },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
+          })),
+        title: { selectedVariants: { Heading_Level: "H2" } },
+      },
+    },
+    {
+      key: "icon-cards",
+      title: "Icon Cards",
+      styles: {
+        layout: { "background-color": "background-2" },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        stats_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          "column-gap": "xl",
+          "row-gap": "xl",
+          tablet: { "grid-template-columns": "repeat(2, minmax(0, 1fr))" },
+          mobile: { "grid-template-columns": "repeat(1, minmax(0, 1fr))" },
+        },
+        stats_levoGroupItem: {
+          stat: {
+            "background-color": "background-1",
+            "box-shadow": "default",
+            display: "flex",
+            width: "100%",
+            height: "100%",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "lg",
+            "padding-top": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "border-radius": "xl",
+            border: "none",
+          },
+          icon: {
+            width: "44px",
+            height: "44px",
+            "object-fit": "contain",
+            "background-color": "brand",
+            "border-radius": "base",
+            padding: "sm",
+            "flex-shrink": 0,
+            color: "brandForeground",
+          },
+          "content-wrapper": {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "2xs",
+          },
+          header: { color: "text-1", "font-weight": 700 },
+          description: { "font-weight": 500, color: "text-2" },
+        },
+        stats: [{}, {}, {}, {}],
+        title: { "text-align": "center", "margin-bottom": "4xs" },
+        description: {
+          "text-align": "center",
+          color: "text-2",
+          "max-width": "640px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        stats: Array(4)
+          .fill(0)
+          .map(() => ({
+            header: {
+              heading: { level: "3" },
+              selectedVariants: { Heading_Level: "H3" },
+            },
+            "content-wrapper": { selectedVariants: {} },
+            description: { selectedVariants: {} },
+          })),
+        title: { selectedVariants: { Heading_Level: "H2" } },
+      },
+    },
   ],
 };