@levo-so/blocks 0.1.101 → 0.1.103

package/src/blocks/cards/cards-19.tsx

@@ -12,7 +12,6 @@ import {
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
-import { ClientOnly } from "../event/ClientOnly";
 import type { ICards19Content } from "./cards-19.schema";
 
 const Cards19: React.FC<ILevoBlockBaseProps<ICards19Content>> = () => {
@@ -49,9 +48,9 @@ const Cards19: React.FC<ILevoBlockBaseProps<ICards19Content>> = () => {
                   <Box elementKey={`events.${index}.date-wrapper`}>
                     <Icon elementKey={`events.${index}.date-icon`} />
                     <Typography elementKey={`events.${index}.publishedAt-header`}>
-                      <ClientOnly>
-                        {dayjs(item?.["publishedAt-header"]).format("MMM D, YYYY")}
-                      </ClientOnly>
+                      {item?.["publishedAt-header"]
+                        ? dayjs(item["publishedAt-header"]).format("MMM D, YYYY")
+                        : ""}
                     </Typography>
                   </Box>
                 </Box>
@@ -59,7 +58,7 @@ const Cards19: React.FC<ILevoBlockBaseProps<ICards19Content>> = () => {
                 <Typography elementKey={`events.${index}.title`} />
                 <Typography elementKey={`events.${index}.description`} />
                 <Typography elementKey={`events.${index}.publishedAt`}>
-                  <ClientOnly>{dayjs(item?.publishedAt).format("MMM D, YYYY")}</ClientOnly>
+                  {item?.publishedAt ? dayjs(item.publishedAt).format("MMM D, YYYY") : ""}
                 </Typography>
               </Box>
             </Box>

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

@@ -1,21 +1,27 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DEFAULT_MEDIA = {
-  id: "01TbGtz7hzVKW",
-  filename: "cards-2-1.png",
+const IMG_HERO = {
+  id: "7452990346473125719",
   kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH.png",
+  location: "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg",
+  mimetype: "image/jpeg",
   srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/cards-2-1-UpLYXWh3ohMYH-320w.webp 320w",
+    "320w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+    "640w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+    "750w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+    "828w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+    "1080w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+    "1200w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200",
+    "1920w":
+      "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920",
+    path: "https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320 320w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750 750w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828 828w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080 1080w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1200 1200w, https://images.pexels.com/photos/5256688/pexels-photo-5256688.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1920 1920w",
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -26,17 +32,17 @@ const DEFAULT_CONTENT = {
   buttons_levoGroup: null,
   buttons: [
     {
-      button: "Book A Demo",
+      button: "Book a demo",
     },
     {
-      button: "Learn More",
+      button: "See pricing",
     },
   ],
-  title: "Achieve More with Less Efforts",
+  title: "Ship work without the back-and-forth",
   description:
-    "We processes more than 10k job applications every week with 500+ employers. Book a demo to see how we can help you in scaling your placements.",
-  image_desktop: DEFAULT_MEDIA,
-  image_mobile: DEFAULT_MEDIA,
+    "Replace status meetings with real-time docs, automated handoffs, and one shared timeline. Trusted by 12,000+ teams across product, design, and engineering.",
+  image_desktop: IMG_HERO,
+  image_mobile: IMG_HERO,
 };
 
 export type ICard2Content = typeof DEFAULT_CONTENT;
@@ -175,23 +181,25 @@ export const Cards2: IBlock = {
           "align-items": "center",
           "justify-content": "space-between",
           "border-radius": "base",
+          "column-gap": "4xl",
           tablet: {
             "flex-direction": "column",
             "padding-left": "none",
             "justify-content": "center",
             "align-items": "center",
+            "column-gap": "none",
           },
         },
         content_wrapper: {
           display: "flex",
           "flex-direction": "column",
-          "margin-left": "10xl",
-          "margin-top": "11xl",
-          "margin-bottom": "7xl",
+          "margin-left": "5xl",
+          "margin-top": "5xl",
+          "margin-bottom": "5xl",
           "max-width": "36rem",
-          "row-gap": "xl",
+          "row-gap": "lg",
           tablet: {
-            "row-gap": "xs",
+            "row-gap": "md",
             padding: "2xl",
             "max-width": "none",
             "margin-left": "none",
@@ -216,34 +224,262 @@ export const Cards2: IBlock = {
           "row-gap": "md",
           "flex-wrap": "wrap",
           "align-items": "center",
+          "margin-top": "sm",
+        },
+        buttons_levoGroupItem: {
+          button: {},
+        },
+        buttons: [{}, {}],
+        image_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "end",
+          "flex-shrink": "0",
         },
-        buttons: Array(2)
-          .fill(0)
-          .map(() => ({
-            button: {},
-          })),
         image_desktop: {
-          width: "auto",
-          "align-self": "end",
+          width: "100%",
+          "max-width": "560px",
+          "border-radius": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
+          display: "block",
+          tablet: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          "border-radius-bottom-left": "base",
+          "border-radius-bottom-right": "base",
+          display: "none",
+          tablet: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        buttons: [
+          {
+            button: {
+              selectedVariants: {},
+            },
+          },
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Image Left",
+      key: "image_left",
+      styles: {
+        layout: {
+          "background-color": "brand",
+        },
+        container: {},
+        card_wrapper: {
+          display: "flex",
+          "flex-direction": "row-reverse",
+          "align-items": "center",
+          "justify-content": "space-between",
           "border-radius": "base",
-          "object-fit": "contain",
+          "column-gap": "4xl",
+          tablet: {
+            "flex-direction": "column",
+            "padding-left": "none",
+            "justify-content": "center",
+            "align-items": "center",
+            "column-gap": "none",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "margin-right": "5xl",
+          "margin-top": "5xl",
+          "margin-bottom": "5xl",
+          "max-width": "36rem",
+          "row-gap": "lg",
+          tablet: {
+            "row-gap": "md",
+            padding: "2xl",
+            "max-width": "none",
+            "margin-right": "none",
+            "margin-top": "none",
+          },
+          mobile: {
+            "margin-right": "0",
+            "margin-top": "0",
+            "margin-bottom": "0",
+          },
+        },
+        title: {
+          color: "brandForeground",
+        },
+        description: {
+          color: "brandForeground",
+        },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "margin-top": "sm",
+        },
+        buttons_levoGroupItem: {
+          button: {},
+        },
+        buttons: [{}, {}],
+        image_wrapper: {
           display: "flex",
+          "align-items": "center",
+          "justify-content": "start",
+          "flex-shrink": "0",
+        },
+        image_desktop: {
+          width: "100%",
+          "max-width": "560px",
+          "border-radius": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
+          display: "block",
           tablet: {
             display: "none",
           },
-          "align-items": "end",
-          "justify-content": "end",
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          "border-radius-bottom-left": "base",
+          "border-radius-bottom-right": "base",
+          display: "none",
+          tablet: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        buttons: [
+          {
+            button: {
+              selectedVariants: {},
+            },
+          },
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Stacked",
+      key: "stacked",
+      styles: {
+        layout: {
+          "background-color": "brand",
+        },
+        container: {},
+        card_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "border-radius": "base",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "max-width": "40rem",
+          "row-gap": "lg",
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "row-gap": "md",
+          },
+        },
+        title: {
+          color: "brandForeground",
+          "text-align": "center",
+        },
+        description: {
+          color: "brandForeground",
+          "text-align": "center",
+        },
+        buttons_levoGroup: {
+          display: "flex",
           "flex-direction": "row",
-          height: "355px",
-          "margin-left": "auto",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "justify-content": "center",
+          "margin-top": "sm",
+        },
+        buttons_levoGroupItem: {
+          button: {},
+        },
+        buttons: [{}, {}],
+        image_wrapper: {
+          display: "flex",
+          width: "100%",
+          "justify-content": "center",
+        },
+        image_desktop: {
+          width: "100%",
+          "border-radius-top-left": "base",
+          "border-radius-top-right": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "21 / 9",
+          display: "block",
+          tablet: {
+            display: "none",
+          },
         },
         image_mobile: {
-          height: "355px",
-          width: "475px",
-          "align-self": "end",
-          "border-radius-bottom-left": "3xl",
-          "border-radius-bottom-right": "3xl",
-          "object-fit": "contain",
+          width: "100%",
+          "border-radius-top-left": "base",
+          "border-radius-top-right": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
           display: "none",
           tablet: {
             display: "block",
@@ -266,11 +502,246 @@ export const Cards2: IBlock = {
               selectedVariants: {},
             },
           },
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Minimal",
+      key: "minimal",
+      styles: {
+        layout: {},
+        container: {},
+        card_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "border-radius": "base",
+          "border-width": "1px",
+          "border-color": "border",
+          "column-gap": "4xl",
+          tablet: {
+            "flex-direction": "column",
+            "padding-left": "none",
+            "justify-content": "center",
+            "align-items": "center",
+            "column-gap": "none",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "margin-left": "5xl",
+          "margin-top": "5xl",
+          "margin-bottom": "5xl",
+          "max-width": "36rem",
+          "row-gap": "lg",
+          tablet: {
+            "row-gap": "md",
+            padding: "2xl",
+            "max-width": "none",
+            "margin-left": "none",
+            "margin-top": "none",
+          },
+          mobile: {
+            "margin-left": "0",
+            "margin-top": "0",
+            "margin-bottom": "0",
+          },
+        },
+        title: {},
+        description: {
+          color: "text-2",
+        },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "md",
+          "row-gap": "md",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "margin-top": "sm",
+        },
+        buttons_levoGroupItem: {
+          button: {},
+        },
+        buttons: [{}, {}],
+        image_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "end",
+          "flex-shrink": "0",
+        },
+        image_desktop: {
+          width: "100%",
+          "max-width": "560px",
+          "border-radius": "base",
+          "object-fit": "cover",
+          "aspect-ratio": "4 / 3",
+          display: "block",
+          tablet: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          "border-radius-bottom-left": "base",
+          "border-radius-bottom-right": "base",
+          display: "none",
+          tablet: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        buttons: [
           {
             button: {
               selectedVariants: {},
             },
           },
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      title: "Compact",
+      key: "compact",
+      styles: {
+        layout: {
+          "background-color": "brand",
+        },
+        container: {},
+        card_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "border-radius": "sm",
+          "column-gap": "2xl",
+          tablet: {
+            "flex-direction": "column",
+            "justify-content": "center",
+            "align-items": "center",
+            "column-gap": "none",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "margin-left": "3xl",
+          "margin-top": "3xl",
+          "margin-bottom": "3xl",
+          "max-width": "32rem",
+          "row-gap": "md",
+          tablet: {
+            "row-gap": "sm",
+            padding: "lg",
+            "max-width": "none",
+            "margin-left": "none",
+            "margin-top": "none",
+          },
+          mobile: {
+            "margin-left": "0",
+            "margin-top": "0",
+            "margin-bottom": "0",
+          },
+        },
+        title: {
+          color: "brandForeground",
+        },
+        description: {
+          color: "brandForeground",
+        },
+        buttons_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "row-gap": "sm",
+          "flex-wrap": "wrap",
+          "align-items": "center",
+          "margin-top": "xs",
+        },
+        buttons_levoGroupItem: {
+          button: {},
+        },
+        buttons: [{}, {}],
+        image_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "end",
+          "flex-shrink": "0",
+        },
+        image_desktop: {
+          width: "100%",
+          "max-width": "440px",
+          "border-radius": "sm",
+          "object-fit": "cover",
+          "aspect-ratio": "3 / 2",
+          display: "block",
+          tablet: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          width: "100%",
+          "object-fit": "cover",
+          "aspect-ratio": "16 / 9",
+          "border-radius-bottom-left": "sm",
+          "border-radius-bottom-right": "sm",
+          display: "none",
+          tablet: {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H3",
+          },
+        },
+        buttons: [
+          {
+            button: {
+              selectedVariants: {},
+            },
+          },
+          {
+            button: {
+              selectedVariants: {
+                Button_Variants: "Secondary",
+              },
+            },
+          },
         ],
       },
     },