@levo-so/blocks 0.1.100 → 0.1.102

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

@@ -1,38 +1,51 @@
 import type { IBlock } from "@levo-so/studio";
 
-const MEDIA_1 = {
-  id: "OaJXLqfuFTMZ",
-  filename: "cards-with-bg-1.png",
+const IMG_TEAM = {
+  id: "7452994427219833020",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y.png",
+  location: "https://images.pexels.com/photos/5257005/pexels-photo-5257005.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-1-ZnMQUkWEUR4Y-1080w.webp 1080w",
+    "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 MEDIA_2 = {
-  id: "oilFrpqcKnhb",
-  filename: "cards-with-bg-2.png",
+
+const IMG_OFFICE = {
+  id: "7452994437321736408",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw.png",
+  location: "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-with-bg-2-tryzJ6VoupGw-750w.webp 750w",
+    "320w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/8353783/pexels-photo-8353783.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -40,19 +53,20 @@ const DEFAULT_CONTENT = {
   container: null,
   main_wrapper: null,
   left_section: null,
-  left_image: MEDIA_1,
+  left_image: IMG_TEAM,
   right_section: null,
-  background_image: MEDIA_2,
+  background_image: IMG_OFFICE,
   card_container: null,
-  title: "Transform Your Business",
-  description: "Discover innovative solutions that drive growth and efficiency for your enterprise",
+  title: "One workspace for every team",
+  description:
+    "Bring docs, tasks, and chat into a single canvas with real-time sync, granular roles, and SOC 2 Type II by default.",
   cards_ctas_levoGroup: null,
   cards_ctas: [
     {
-      cards_cta: "Get Started Today",
+      cards_cta: "Start free trial",
     },
     {
-      cards_cta: "Learn More",
+      cards_cta: "Book a demo",
     },
   ],
 };
@@ -61,7 +75,7 @@ export type ICards5Content = typeof DEFAULT_CONTENT;
 
 export const Cards5: IBlock = {
   category_id: "cards",
-  title: "Cards with Background Image",
+  title: "Cards 5",
   key: "cards-5",
   version: "v1",
   prompt_description:
@@ -150,33 +164,46 @@ export const Cards5: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {},
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
         container: {},
         main_wrapper: {
           display: "flex",
           "align-items": "stretch",
           "column-gap": "2xl",
+          "min-height": "480px",
           mobile: {
             "flex-direction": "column",
             "row-gap": "xl",
+            "min-height": "auto",
           },
         },
         left_section: {
           flex: "1",
-          "min-height": "400px",
+          "min-height": "480px",
+          "border-radius": "lg",
+          overflow: "hidden",
+          mobile: {
+            "min-height": "320px",
+          },
         },
         left_image: {
           width: "100%",
           height: "100%",
           "object-fit": "cover",
-          "border-radius": "base",
+          "aspect-ratio": "4 / 3",
         },
         right_section: {
           flex: "1",
           position: "relative",
-          "min-height": "400px",
-          "border-radius": "base",
+          "min-height": "480px",
+          "border-radius": "lg",
           overflow: "hidden",
+          mobile: {
+            "min-height": "420px",
+          },
         },
         background_image: {
           position: "absolute",
@@ -185,6 +212,7 @@ export const Cards5: IBlock = {
           width: "100%",
           height: "100%",
           "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
           "z-index": "1",
         },
         card_container: {
@@ -192,48 +220,50 @@ export const Cards5: IBlock = {
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
-          "padding-top": "xl",
-          "padding-bottom": "xl",
-          "padding-left": "lg",
-          "padding-right": "lg",
-          "border-radius": "base",
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-radius": "lg",
           "box-shadow": "default",
           "z-index": "2",
           "text-align": "center",
-          "max-width": "320px",
+          "max-width": "360px",
           "background-color": "background-2",
           width: "90%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
           mobile: {
-            "max-width": "280px",
-            "padding-top": "lg",
-            "padding-bottom": "lg",
-            "padding-left": "base",
-            "padding-right": "base",
+            "max-width": "300px",
+            "padding-top": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "row-gap": "base",
           },
         },
         title: {
-          "margin-bottom": "base",
+          "margin-bottom": "0",
         },
         description: {
-          "margin-bottom": "lg",
-          mobile: {
-            "margin-bottom": "base",
-          },
+          "margin-bottom": "0",
+          color: "text-2",
         },
         cards_ctas_levoGroup: {
           display: "flex",
-          "flex-direction": "column",
-          gap: "base",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "justify-content": "center",
           "align-items": "center",
+          "flex-wrap": "wrap",
+          "margin-top": "auto",
         },
-        cards_ctas: [
-          {
-            cards_cta: {},
-          },
-          {
-            cards_cta: {},
-          },
-        ],
+        cards_ctas_levoGroupItem: {
+          cards_cta: {},
+        },
+        cards_ctas: [{}, {}],
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -245,6 +275,128 @@ export const Cards5: IBlock = {
             Heading_Level: "H4",
           },
         },
+        cards_ctas: [
+          { cards_cta: { selectedVariants: {} } },
+          { cards_cta: { selectedVariants: { Button_Variants: "Secondary" } } },
+        ],
+      },
+    },
+    {
+      key: "reversed",
+      title: "Reversed",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {},
+        main_wrapper: {
+          display: "flex",
+          "flex-direction": "row-reverse",
+          "align-items": "stretch",
+          "column-gap": "2xl",
+          "min-height": "480px",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+            "min-height": "auto",
+          },
+        },
+        left_section: {
+          flex: "1",
+          "min-height": "480px",
+          "border-radius": "lg",
+          overflow: "hidden",
+          mobile: {
+            "min-height": "320px",
+          },
+        },
+        left_image: {
+          width: "100%",
+          height: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
+        },
+        right_section: {
+          flex: "1",
+          position: "relative",
+          "min-height": "480px",
+          "border-radius": "lg",
+          overflow: "hidden",
+          mobile: {
+            "min-height": "420px",
+          },
+        },
+        background_image: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "100%",
+          height: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
+          "z-index": "1",
+        },
+        card_container: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-radius": "lg",
+          "box-shadow": "default",
+          "z-index": "2",
+          "text-align": "center",
+          "max-width": "360px",
+          "background-color": "background-2",
+          width: "90%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          mobile: {
+            "max-width": "300px",
+            "padding-top": "xl",
+            "padding-bottom": "xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "row-gap": "base",
+          },
+        },
+        title: {
+          "margin-bottom": "0",
+        },
+        description: {
+          "margin-bottom": "0",
+          color: "text-2",
+        },
+        cards_ctas_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "justify-content": "center",
+          "align-items": "center",
+          "flex-wrap": "wrap",
+          "margin-top": "auto",
+        },
+        cards_ctas_levoGroupItem: {
+          cards_cta: {},
+        },
+        cards_ctas: [{}, {}],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: { level: 2 },
+          selectedVariants: { Heading_Level: "H4" },
+        },
+        cards_ctas: [
+          { cards_cta: { selectedVariants: {} } },
+          { cards_cta: { selectedVariants: { Button_Variants: "Secondary" } } },
+        ],
       },
     },
   ],