@levo-so/blocks 0.1.2 → 0.1.52

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

@@ -0,0 +1,615 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  main_title: "Enterprise Solutions Hub",
+  main_description:
+    "Comprehensive technology platform designed to accelerate business growth and operational excellence.",
+  main_wrapper: null,
+  left_container: null,
+  center_container: null,
+  right_container: null,
+  main_image: {
+    id: "4JOGKlkPlUtWm",
+    filename: "image.png",
+    kind: "image",
+    location: "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU.png",
+    srcset: {
+      "1080w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1080w.webp",
+      "1200w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1200w.webp",
+      "1920w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1920w.webp",
+      "320w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-320w.webp",
+      "640w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-640w.webp",
+      "750w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-750w.webp",
+      "828w":
+        "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-828w.webp",
+      path: "https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-ImvFuBrtkBYIU-1920w.webp 1920w",
+    },
+    mimetype: "image/png",
+  },
+  left_cards: [
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Strategic Planning",
+      description:
+        "Data-driven strategic planning solutions to optimize business operations and market positioning.",
+      icon: {
+        kind: "custom",
+        data: {
+          id: "vxmyzMLxwL34",
+          filename: "image.png",
+          kind: "image",
+          location:
+            "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43.png",
+          srcset: {
+            "1080w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp",
+            "1200w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp",
+            "1920w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp",
+            "320w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp",
+            "640w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp",
+            "750w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp",
+            "828w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp",
+            path: "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp 1200w",
+          },
+          mimetype: "image/png",
+        },
+      },
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Strategic Planning",
+      description:
+        "Data-driven strategic planning solutions to optimize business operations and market positioning.",
+      icon: {
+        kind: "custom",
+        data: {
+          id: "vxmyzMLxwL34",
+          filename: "image.png",
+          kind: "image",
+          location:
+            "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43.png",
+          srcset: {
+            "1080w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp",
+            "1200w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp",
+            "1920w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp",
+            "320w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp",
+            "640w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp",
+            "750w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp",
+            "828w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp",
+            path: "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp 1200w",
+          },
+          mimetype: "image/png",
+        },
+      },
+    },
+  ],
+  right_cards: [
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Analytics Dashboard",
+      description:
+        "<p>Data-driven strategic planning solutions to optimize business operations and market positioning.</p>",
+      icon: {
+        kind: "custom",
+        data: {
+          id: "vxmyzMLxwL34",
+          filename: "image.png",
+          kind: "image",
+          location:
+            "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43.png",
+          srcset: {
+            "1080w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp",
+            "1200w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp",
+            "1920w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp",
+            "320w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp",
+            "640w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp",
+            "750w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp",
+            "828w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp",
+            path: "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp 1200w",
+          },
+          mimetype: "image/png",
+        },
+      },
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Security Solutions",
+      description:
+        "<p>Data-driven strategic planning solutions to optimize business operations and market positioning.</p>",
+      icon: {
+        kind: "custom",
+        data: {
+          id: "vxmyzMLxwL34",
+          filename: "image.png",
+          kind: "image",
+          location:
+            "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43.png",
+          srcset: {
+            "1080w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp",
+            "1200w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp",
+            "1920w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp",
+            "320w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp",
+            "640w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp",
+            "750w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp",
+            "828w":
+              "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp",
+            path: "https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-eg6Nl4PISv43-1200w.webp 1200w",
+          },
+          mimetype: "image/png",
+        },
+      },
+    },
+  ],
+};
+
+export type ICards13Content = typeof DEFAULT_CONTENT;
+
+export const Cards13: IBlock = {
+  category_id: "cards",
+  title: "Cards 13",
+  key: "cards-13",
+  version: "v1",
+  prompt_description:
+    "A cards block with header section, repeatable cards on the left, a centered main image, and repeatable cards on the right",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "main_title",
+      label: "Main Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "main_description",
+      label: "Main Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "center_container",
+      label: "Center Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "main_image",
+      label: "Main Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "left_cards",
+      label: "Left Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+    {
+      key: "right_cards",
+      label: "Right Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "LayoutWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          "padding-left": "none",
+          "padding-right": "none",
+          tablet: {
+            "padding-left": "5xl",
+            "padding-right": "5xl",
+          },
+          mobile: {
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+          },
+        },
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "3xl",
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "base",
+        },
+        main_title: {
+          "font-size": "3xl",
+          "font-weight": "700",
+          color: "text-1",
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+        main_description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+          "max-width": "600px",
+          mobile: {
+            "font-size": "base",
+          },
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "2xl",
+            "column-gap": "none",
+          },
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "2xl",
+            "column-gap": "none",
+          },
+          "flex-direction": "row",
+          height: "100%",
+        },
+        left_container: {
+          flex: "1",
+          display: "flex",
+          "justify-content": "flex-end",
+          mobile: {
+            "justify-content": "center",
+          },
+          tablet: {
+            "justify-content": "center",
+          },
+        },
+        center_container: {
+          flex: "0 0 auto",
+          display: "flex",
+          "justify-content": "center",
+        },
+        right_container: {
+          flex: "1",
+          display: "flex",
+          "justify-content": "flex-start",
+          mobile: {
+            "justify-content": "center",
+          },
+          tablet: {
+            "justify-content": "center",
+          },
+        },
+        main_image: {
+          width: "450px",
+          height: "550px",
+          "object-fit": "cover",
+          mobile: {
+            width: "100%",
+            height: "100%",
+          },
+          "border-radius": "base",
+          tablet: {
+            width: "100%",
+            height: "100%",
+          },
+        },
+        left_cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          mobile: {
+            "max-width": "none",
+            width: "100%",
+          },
+          "justify-content": "space-between",
+        },
+        right_cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          mobile: {
+            "max-width": "none",
+            width: "100%",
+          },
+          "justify-content": "space-between",
+        },
+        "left_cards.*.card": {
+          display: "flex",
+          "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",
+        },
+        "left_cards.*.icon": {
+          width: "40px",
+          height: "40px",
+          "border-radius": "sm",
+          "object-fit": "cover",
+          "flex-shrink": "0",
+        },
+        "left_cards.*.content_wrapper": {
+          flex: "1",
+        },
+        "left_cards.*.title": {
+          "font-size": "lg",
+          "font-weight": "600",
+          "margin-bottom": "xs",
+          color: "text-1",
+        },
+        "left_cards.*.description": {
+          "font-size": "sm",
+          color: "text-2",
+          "line-height": "1.5",
+        },
+        "right_cards.*.card": {
+          display: "flex",
+          "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",
+        },
+        "right_cards.*.icon": {
+          width: "40px",
+          height: "40px",
+          "border-radius": "sm",
+          "object-fit": "cover",
+          "flex-shrink": "0",
+        },
+        "right_cards.*.content_wrapper": {
+          flex: "1",
+        },
+        "right_cards.*.title": {
+          "font-size": "lg",
+          "font-weight": "600",
+          "margin-bottom": "xs",
+          color: "text-1",
+        },
+        "right_cards.*.description": {
+          "font-size": "sm",
+          color: "text-2",
+          "line-height": "1.5",
+        },
+        left_cards: [
+          {
+            card: {
+              "border-radius": "base",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-top": "base",
+              "padding-bottom": "base",
+              "padding-right": "2xl",
+              "padding-left": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+              "box-shadow": "none",
+            },
+            icon: {
+              height: "32px",
+              width: "32px",
+              "font-size": "32px",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+          },
+          {
+            card: {
+              "border-radius": "base",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-top": "base",
+              "padding-bottom": "base",
+              "padding-right": "2xl",
+              "padding-left": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            icon: {
+              height: "32px",
+              width: "32px",
+              "font-size": "32px",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+          },
+        ],
+        right_cards: [
+          {
+            card: {
+              "border-radius": "base",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-top": "base",
+              "padding-bottom": "base",
+              "padding-right": "2xl",
+              "padding-left": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            icon: {
+              height: "32px",
+              width: "32px",
+              "font-size": "32px",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+          },
+          {
+            card: {
+              "border-radius": "base",
+              "border-style": "solid",
+              "border-width": "1px",
+              "padding-top": "base",
+              "padding-bottom": "base",
+              "padding-right": "2xl",
+              "padding-left": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            icon: {
+              height: "32px",
+              width: "32px",
+              "font-size": "32px",
+            },
+            content_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,67 @@
+import {
+  Box,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+  Icon,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { ICards13Content } from "./cards-13.schema";
+
+const Cards13: React.FC<ILevoBlockBaseProps<ICards13Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_section">
+        <Heading elementKey="main_title" />
+        <Typography elementKey="main_description" />
+      </Box>
+      <Box elementKey="main_wrapper">
+        <Box elementKey="left_container">
+          <Box elementKey="left_cards_levoGroup" data-levo_group>
+            {(content?.left_cards ?? []).map((_, index: number) => (
+              <Box
+                key={`left-card-${index}`}
+                data-levo_group_item
+                elementKey={`left_cards.${index}.card`}
+              >
+                <Icon elementKey={`left_cards.${index}.icon`} />
+                <Box elementKey={`left_cards.${index}.content_wrapper`}>
+                  <Heading elementKey={`left_cards.${index}.title`} />
+                  <Typography elementKey={`left_cards.${index}.description`} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+        <Box elementKey="center_container">
+          <Image elementKey="main_image" alt="Feature showcase" />
+        </Box>
+        <Box elementKey="right_container">
+          <Box elementKey="right_cards_levoGroup" data-levo_group>
+            {(content?.right_cards ?? []).map((_, index: number) => (
+              <Box
+                key={`right-card-${index}`}
+                data-levo_group_item
+                elementKey={`right_cards.${index}.card`}
+              >
+                <Icon elementKey={`right_cards.${index}.icon`} />
+                <Box elementKey={`right_cards.${index}.content_wrapper`}>
+                  <Heading elementKey={`right_cards.${index}.title`} />
+                  <Typography elementKey={`right_cards.${index}.description`} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards13;