@levo-so/blocks 0.1.100 → 0.1.102

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

@@ -1,74 +1,81 @@
 import type { IBlock } from "@levo-so/studio";
 
-const MEDIA = {
-  id: "2EYrb5YIeOsSw",
-  filename: "cards-14-1.png",
+const MAIN_IMAGE = {
+  id: "7453030333554320818",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv.png",
+  location: "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-14-1-9GF41q5AuyIZv-1920w.webp 1920w",
+    "320w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/6949525/pexels-photo-6949525.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
+  },
+};
+
+const ICON_QUOTE = {
+  kind: "icon",
+  data: {
+    id: "quote-up",
+    label: "Quote Up",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.79999 21.47H4.58002C2.75002 21.47 1.25 19.9801 1.25 18.1401V12.3401C1.25 11.9301 1.59 11.5901 2 11.5901H7.79999C9.69999 11.5901 11.13 13.02 11.13 14.92V18.1401C11.12 20.0401 9.68999 21.47 7.79999 21.47ZM2.75 13.1V18.1501C2.75 19.1601 3.57002 19.98 4.58002 19.98H7.79999C8.85999 19.98 9.63 19.2101 9.63 18.1501V14.9301C9.63 13.8701 8.85999 13.1 7.79999 13.1H2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M2 13.1C1.59 13.1 1.25 12.76 1.25 12.35C1.25 6.10004 2.52002 4.79008 6.15002 2.64008C6.51002 2.43008 6.96999 2.55009 7.17999 2.90009C7.38999 3.26009 7.26998 3.72006 6.91998 3.93006C3.67998 5.85006 2.75 6.65004 2.75 12.35C2.75 12.76 2.41 13.1 2 13.1Z" fill="var(--color-icon-primary)"/>\n<path d="M19.4201 21.47H16.2001C14.3701 21.47 12.8701 19.9801 12.8701 18.1401V12.3401C12.8701 11.9301 13.2101 11.5901 13.6201 11.5901H19.4201C21.3201 11.5901 22.7501 13.02 22.7501 14.92V18.1401C22.7501 20.0401 21.3201 21.47 19.4201 21.47ZM14.3801 13.1V18.1501C14.3801 19.1601 15.2001 19.98 16.2101 19.98H19.4301C20.4901 19.98 21.2601 19.2101 21.2601 18.1501V14.9301C21.2601 13.8701 20.4901 13.1 19.4301 13.1H14.3801Z" fill="var(--color-icon-primary)"/>\n<path d="M13.6299 13.1C13.2199 13.1 12.8799 12.76 12.8799 12.35C12.8799 6.10004 14.1499 4.79008 17.7799 2.64008C18.1399 2.43008 18.5999 2.55009 18.8099 2.90009C19.0199 3.26009 18.8999 3.72006 18.5499 3.93006C15.3099 5.85006 14.3799 6.65004 14.3799 12.35C14.3799 12.76 14.0399 13.1 13.6299 13.1Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_TREND = {
+  kind: "icon",
+  data: {
+    id: "trend-up",
+    label: "Trend Up",
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.50043 15.25C7.31043 15.25 7.12043 15.18 6.97043 15.03C6.68043 14.74 6.68043 14.26 6.97043 13.97L10.1704 10.77C10.3304 10.61 10.5404 10.53 10.7704 10.55C10.9904 10.57 11.1904 10.69 11.3204 10.88L12.4104 12.52L15.9604 8.97C16.2504 8.68 16.7304 8.68 17.0204 8.97C17.3104 9.26 17.3104 9.74 17.0204 10.03L12.8204 14.23C12.6604 14.39 12.4504 14.47 12.2204 14.45C12.0004 14.43 11.8004 14.31 11.6704 14.12L10.5804 12.48L8.03043 15.03C7.88043 15.18 7.69043 15.25 7.50043 15.25Z" fill="var(--color-icon-primary)"/>\n<path d="M16.5 12.25C16.09 12.25 15.75 11.91 15.75 11.5V10.25H14.5C14.09 10.25 13.75 9.91 13.75 9.5C13.75 9.09 14.09 8.75 14.5 8.75H16.5C16.91 8.75 17.25 9.09 17.25 9.5V11.5C17.25 11.91 16.91 12.25 16.5 12.25Z" fill="var(--color-icon-primary)"/>\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</svg>',
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   header_section: null,
-  main_title: "Performance Metrics Overview",
+  main_title: "Teams ship faster on Levo",
   main_description:
-    "Track your key performance indicators and measure growth across important business dimensions.",
+    "Operations, product, and engineering leaders on how Levo replaces scattered tools with one connected workspace.",
   main_wrapper: null,
   left_container: null,
-  right_container: null,
-  main_image: MEDIA,
+  main_image: MAIN_IMAGE,
   cards: [
     {
       card: null,
       content_wrapper: null,
       description:
-        "<p>“Dr. Arvind, an MIT and Stanford alumnus, combines expertise in engineering, management, and technology to drive business growth through innovation, optimization, and digital transformation.”</p>",
+        "<p>“We killed four spreadsheets and two Slack channels in the first sprint. Reviews that took a week now finish inside a day — the whole team can see what's blocked without asking.”</p>",
       value_container: null,
-      icon: {
-        kind: "icon",
-        data: {
-          id: "profile-circle",
-          label: "Profile Circle",
-          tags: ["circle", "custom", "profile", "users"],
-          svgCode:
-            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.1205 13.53C12.1005 13.53 12.0705 13.53 12.0505 13.53C12.0205 13.53 11.9805 13.53 11.9505 13.53C9.68047 13.46 7.98047 11.69 7.98047 9.50998C7.98047 7.28998 9.79047 5.47998 12.0105 5.47998C14.2305 5.47998 16.0405 7.28998 16.0405 9.50998C16.0305 11.7 14.3205 13.46 12.1505 13.53C12.1305 13.53 12.1305 13.53 12.1205 13.53ZM12.0005 6.96998C10.6005 6.96998 9.47047 8.10998 9.47047 9.49998C9.47047 10.87 10.5405 11.98 11.9005 12.03C11.9305 12.02 12.0305 12.02 12.1305 12.03C13.4705 11.96 14.5205 10.86 14.5305 9.49998C14.5305 8.10998 13.4005 6.96998 12.0005 6.96998Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 22.7499C9.30984 22.7499 6.73984 21.7499 4.74984 19.9299C4.56984 19.7699 4.48984 19.5299 4.50984 19.2999C4.63984 18.1099 5.37984 16.9999 6.60984 16.1799C9.58984 14.1999 14.4198 14.1999 17.3898 16.1799C18.6198 17.0099 19.3598 18.1099 19.4898 19.2999C19.5198 19.5399 19.4298 19.7699 19.2498 19.9299C17.2598 21.7499 14.6898 22.7499 11.9998 22.7499ZM6.07984 19.0999C7.73984 20.4899 9.82984 21.2499 11.9998 21.2499C14.1698 21.2499 16.2598 20.4899 17.9198 19.0999C17.7398 18.4899 17.2598 17.8999 16.5498 17.4199C14.0898 15.7799 9.91984 15.7799 7.43984 17.4199C6.72984 17.8999 6.25984 18.4899 6.07984 19.0999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
-        },
-      },
+      icon: ICON_QUOTE,
       text_container: null,
-      title: "<p>Tim Larry</p>",
-      value: "<p>CEO,Hyphen</p>",
+      title: "<p>Priya Desai</p>",
+      value: "<p>VP Operations, Lumen</p>",
     },
     {
       card: null,
       content_wrapper: null,
       description:
-        "<p>“Dr. Arvind, an MIT and Stanford alumnus, combines expertise in engineering, management, and technology to drive business growth through innovation, optimization, and digital transformation.”</p>",
+        "<p>“Automations catch handoffs that used to slip. We cut cycle time by 42% in one quarter and finally have a single source of truth across sales, CS, and engineering.”</p>",
       value_container: null,
-      icon: {
-        kind: "icon",
-        data: {
-          id: "profile-circle",
-          label: "Profile Circle",
-          tags: ["circle", "custom", "profile", "users"],
-          svgCode:
-            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.1205 13.53C12.1005 13.53 12.0705 13.53 12.0505 13.53C12.0205 13.53 11.9805 13.53 11.9505 13.53C9.68047 13.46 7.98047 11.69 7.98047 9.50998C7.98047 7.28998 9.79047 5.47998 12.0105 5.47998C14.2305 5.47998 16.0405 7.28998 16.0405 9.50998C16.0305 11.7 14.3205 13.46 12.1505 13.53C12.1305 13.53 12.1305 13.53 12.1205 13.53ZM12.0005 6.96998C10.6005 6.96998 9.47047 8.10998 9.47047 9.49998C9.47047 10.87 10.5405 11.98 11.9005 12.03C11.9305 12.02 12.0305 12.02 12.1305 12.03C13.4705 11.96 14.5205 10.86 14.5305 9.49998C14.5305 8.10998 13.4005 6.96998 12.0005 6.96998Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 22.7499C9.30984 22.7499 6.73984 21.7499 4.74984 19.9299C4.56984 19.7699 4.48984 19.5299 4.50984 19.2999C4.63984 18.1099 5.37984 16.9999 6.60984 16.1799C9.58984 14.1999 14.4198 14.1999 17.3898 16.1799C18.6198 17.0099 19.3598 18.1099 19.4898 19.2999C19.5198 19.5399 19.4298 19.7699 19.2498 19.9299C17.2598 21.7499 14.6898 22.7499 11.9998 22.7499ZM6.07984 19.0999C7.73984 20.4899 9.82984 21.2499 11.9998 21.2499C14.1698 21.2499 16.2598 20.4899 17.9198 19.0999C17.7398 18.4899 17.2598 17.8999 16.5498 17.4199C14.0898 15.7799 9.91984 15.7799 7.43984 17.4199C6.72984 17.8999 6.25984 18.4899 6.07984 19.0999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
-        },
-      },
+      icon: ICON_TREND,
       text_container: null,
-      title: "<p>Tim Larry</p>",
-      value: "<p>CEO,Hyphen</p>",
+      title: "<p>Marcus Hale</p>",
+      value: "<p>CTO, Parallax Labs</p>",
     },
   ],
 };
@@ -118,7 +125,6 @@ export const Cards14: IBlock = {
       label: "Left Container",
       field_interface: "LayoutWidget",
     },
-
     {
       key: "main_image",
       label: "Main Image",
@@ -175,217 +181,438 @@ export const Cards14: IBlock = {
   ],
   layouts: [
     {
-      key: "default",
-      title: "Default",
+      key: "reversed",
+      title: "Reversed",
       styles: {
-        layout: {},
-        container: {},
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
         header_section: {
           "text-align": "center",
           "margin-bottom": "3xl",
           "margin-left": "auto",
           "margin-right": "auto",
-          display: "block",
-          "justify-content": "space-between",
-          tablet: {
-            "flex-direction": "column",
-          },
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "base",
+          "max-width": "720px",
+        },
+        main_title: {
+          "text-align": "center",
+        },
+        main_description: {
+          "text-align": "center",
         },
-        main_description: {},
         main_wrapper: {
           display: "flex",
-          "align-items": "center",
+          "align-items": "stretch",
           mobile: {
             "flex-direction": "column",
             "row-gap": "2xl",
-            "column-gap": "none",
+            "align-items": "stretch",
           },
           tablet: {
-            "flex-direction": "column-reverse",
-            "row-gap": "5xl",
+            "flex-direction": "column",
+            "row-gap": "3xl",
+            "align-items": "stretch",
           },
-          "flex-direction": "row-reverse",
-          "column-gap": "xl",
+          "flex-direction": "row",
+          "column-gap": "3xl",
         },
         left_container: {
-          flex: "1",
-        },
-        right_container: {
-          flex: "1",
-          display: "block",
-          "justify-content": "center",
+          flex: "1 1 0",
+          "min-width": "0",
+          display: "flex",
         },
         main_image: {
           "border-radius": "lg",
           "object-fit": "cover",
-          height: "500px",
-          width: "50%",
+          "aspect-ratio": "4 / 5",
+          height: "auto",
+          width: "100%",
+          "max-width": "440px",
+          flex: "0 1 440px",
           tablet: {
             width: "100%",
-            height: "auto",
+            "max-width": "none",
+            "aspect-ratio": "16 / 9",
           },
         },
         cards_levoGroup: {
           display: "flex",
           "flex-direction": "column",
           "row-gap": "xl",
+          flex: "1",
         },
-        "cards.*.card": {
-          display: "flex",
-          "flex-direction": "column",
-          "align-items": "flex-start",
-          "column-gap": "base",
-          "padding-top": "lg",
-          "padding-bottom": "lg",
-          "padding-left": "lg",
-          "padding-right": "lg",
-          "background-color": "background-2",
-          "border-radius": "lg",
-          "border-width": "1px",
-          "border-color": "border",
+        cards_levoGroupItem: {
+          card: {
+            "background-color": "brandSecondary",
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+            "padding-bottom": "2xl",
+            "border-radius": "lg",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            height: "100%",
+          },
+          description: {
+            color: "brandSecondaryForeground",
+            "line-height": "1.6",
+          },
+          value_container: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+            "margin-top": "auto",
+          },
+          icon: {
+            height: "28px",
+            width: "28px",
+            "font-size": "28px",
+            "flex-shrink": "0",
+          },
+          text_container: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+          },
+          title: {
+            "font-size": "base",
+            "font-weight": "600",
+            color: "brandSecondaryForeground",
+          },
+          value: {
+            "font-size": "sm",
+            color: "brandSecondaryForeground",
+          },
         },
-        "cards.*.content_wrapper": {
-          display: "flex",
-          "flex-direction": "column",
-          "row-gap": "lg",
-          flex: "1",
+        cards: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        main_description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
+        },
+        cards: [
+          {
+            description: {
+              selectedVariants: {},
+            },
+            value: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {},
+            },
+          },
+          {
+            description: {
+              selectedVariants: {},
+            },
+            value: {
+              selectedVariants: {},
+            },
+            title: {
+              selectedVariants: {},
+            },
+          },
+        ],
+      },
+    },
+    {
+      key: "stacked_center",
+      title: "Stacked Center",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
         },
-        "cards.*.description": {
-          "font-size": "base",
-          color: "text-2",
-          "line-height": "1.5",
-          "margin-bottom": "lg",
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
         },
-        "cards.*.value_container": {
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          "margin-left": "auto",
+          "margin-right": "auto",
           display: "flex",
+          "flex-direction": "column",
           "align-items": "center",
-          "column-gap": "base",
+          "row-gap": "base",
+          "max-width": "720px",
         },
-        "cards.*.icon": {
-          width: "48px",
-          height: "48px",
-          "border-radius": "sm",
-          "object-fit": "cover",
-          "flex-shrink": "0",
+        main_title: {
+          "text-align": "center",
+        },
+        main_description: {
+          "text-align": "center",
         },
-        "cards.*.text_container": {
+        main_wrapper: {
           display: "flex",
           "flex-direction": "column",
-          "row-gap": "xs",
-          flex: "1",
+          "align-items": "stretch",
+          "row-gap": "2xl",
         },
-        "cards.*.title": {
-          "font-size": "xl",
-          "font-weight": "600",
-          color: "text-1",
+        left_container: {
+          width: "100%",
         },
-        "cards.*.value": {
-          "font-size": "2xl",
-          "font-weight": "700",
-          color: "text-1",
+        main_image: {
+          "border-radius": "lg",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 7",
+          height: "auto",
+          width: "100%",
+        },
+        cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "xl",
+          "row-gap": "xl",
+          width: "100%",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        cards_levoGroupItem: {
+          card: {
+            "background-color": "brandSecondary",
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+            "padding-bottom": "2xl",
+            "border-radius": "lg",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            height: "100%",
+          },
+          description: {
+            color: "brandSecondaryForeground",
+            "line-height": "1.6",
+          },
+          value_container: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+            "margin-top": "auto",
+          },
+          icon: {
+            height: "28px",
+            width: "28px",
+            "font-size": "28px",
+            "flex-shrink": "0",
+          },
+          text_container: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+          },
+          title: {
+            "font-size": "base",
+            "font-weight": "600",
+            color: "brandSecondaryForeground",
+          },
+          value: {
+            "font-size": "sm",
+            color: "brandSecondaryForeground",
+          },
+        },
+        cards: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        main_description: {
+          selectedVariants: {
+            Typography_Variants: "Large",
+          },
         },
         cards: [
           {
-            card: {
-              "background-color": "brandSecondary",
-              "padding-top": "3xl",
-              "padding-right": "3xl",
-              "padding-left": "3xl",
-              "padding-bottom": "3xl",
-              "border-radius": "base",
-              display: "flex",
-              "flex-direction": "column",
-            },
             description: {
-              color: "brandSecondaryForeground",
-            },
-            value_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "xs",
-              "margin-top": "base",
-            },
-            icon: {
-              height: "34px",
-              width: "34px",
-              "font-size": "34px",
+              selectedVariants: {},
             },
-            text_container: {
-              display: "block",
-              "flex-direction": "column",
-              "row-gap": "xs",
+            value: {
+              selectedVariants: {},
             },
             title: {
-              tablet: {
-                "font-size": "lg",
-              },
-              "font-size": "lg",
-              mobile: {
-                "font-size": "base",
-              },
-              color: "brandSecondaryForeground",
-            },
-            value: {
-              tablet: {
-                "font-size": "xl",
-              },
-              mobile: {
-                "font-size": "lg",
-              },
-              color: "brandSecondaryForeground",
+              selectedVariants: {},
             },
           },
           {
-            card: {
-              "background-color": "brandSecondary",
-              "padding-top": "3xl",
-              "padding-right": "3xl",
-              "padding-left": "3xl",
-              "padding-bottom": "3xl",
-              "border-radius": "base",
-              display: "flex",
-              "flex-direction": "column",
-            },
             description: {
-              color: "brandSecondaryForeground",
+              selectedVariants: {},
             },
-            value_container: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "xs",
-              "margin-top": "base",
+            value: {
+              selectedVariants: {},
             },
-            icon: {
-              height: "34px",
-              width: "34px",
-              "font-size": "34px",
+            title: {
+              selectedVariants: {},
             },
-            text_container: {
-              display: "block",
-              "flex-direction": "column",
-              "row-gap": "xs",
+          },
+        ],
+      },
+    },
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "base",
+          "max-width": "720px",
+          tablet: {
+            "flex-direction": "column",
+          },
+        },
+        main_title: {
+          "text-align": "center",
+        },
+        main_description: {
+          "text-align": "center",
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "stretch",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "2xl",
+            "column-gap": "none",
+            "align-items": "stretch",
+          },
+          tablet: {
+            "flex-direction": "column-reverse",
+            "row-gap": "3xl",
+            "align-items": "stretch",
+          },
+          "flex-direction": "row-reverse",
+          "column-gap": "3xl",
+        },
+        left_container: {
+          flex: "1 1 0",
+          "min-width": "0",
+          display: "flex",
+        },
+        main_image: {
+          "border-radius": "lg",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 5",
+          height: "auto",
+          width: "100%",
+          "max-width": "440px",
+          flex: "0 1 440px",
+          tablet: {
+            width: "100%",
+            "max-width": "none",
+            "aspect-ratio": "16 / 9",
+          },
+        },
+        cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          flex: "1",
+        },
+        cards_levoGroupItem: {
+          card: {
+            "background-color": "brandSecondary",
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-left": "2xl",
+            "padding-bottom": "2xl",
+            "border-radius": "lg",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            height: "100%",
+          },
+          description: {
+            color: "brandSecondaryForeground",
+            "line-height": "1.6",
+          },
+          value_container: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+            "margin-top": "auto",
+          },
+          icon: {
+            height: "28px",
+            width: "28px",
+            "font-size": "28px",
+            "flex-shrink": "0",
+          },
+          text_container: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+          },
+          title: {
+            "font-size": "base",
+            "font-weight": "600",
+            color: "brandSecondaryForeground",
+            tablet: {
+              "font-size": "base",
             },
-            title: {
-              tablet: {
-                "font-size": "lg",
-              },
-              "font-size": "lg",
-              mobile: {
-                "font-size": "base",
-              },
-              color: "brandSecondaryForeground",
+            mobile: {
+              "font-size": "base",
             },
-            value: {
-              tablet: {
-                "font-size": "xl",
-              },
-              mobile: {
-                "font-size": "lg",
-              },
-              color: "brandSecondaryForeground",
+          },
+          value: {
+            "font-size": "sm",
+            color: "brandSecondaryForeground",
+            tablet: {
+              "font-size": "sm",
+            },
+            mobile: {
+              "font-size": "sm",
             },
           },
-        ],
+        },
+        cards: [{}, {}],
       },
       content: DEFAULT_CONTENT,
       config: {