@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,293 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  card_wrapper: null,
+  content_wrapper: null,
+  title: "Achieve More with Less Efforts",
+  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.",
+  button: "Book A Demo",
+  image_desktop: {
+    id: "7141014160938075687",
+    location:
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+  image_mobile: {
+    id: "7141014160938075687",
+    location:
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+};
+
+export type ICard2Content = typeof DEFAULT_CONTENT;
+
+export const Cards2: IBlock = {
+  category_id: "cards",
+  title: "Card 2",
+  key: "cards-2",
+  version: "v1",
+  prompt_description:
+    "Rounded, colored content block with a bold headline, supporting text, and call-to-action button on the left, paired with an image on the right for a balanced, two-column layout.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall grid and responsive alignment of the hero section, ensuring the headline content appears left-aligned and the image is to the right, with proper spacing and vertical centering.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Provides an inner container for centering and constraining the hero card's maximum width, suitable for desktop and mobile layouts with generous padding.",
+      },
+    },
+    {
+      key: "card_wrapper",
+      label: "Card Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wraps the hero content with a visually distinctive colored background and rounded corners, creating a strong focal point for the hero section.",
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Organizes the left column of the hero: holding title, description, and button with sufficient vertical spacing, ensuring readability and clear hierarchy.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main headline for the hero section, bold and concise, communicates the core value proposition in an aspirational and confident tone.",
+        min_characters: 24,
+        max_characters: 48,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short supporting paragraph describing benefits, statistics, and an invitation to learn more. Tone is informative, professional, and encouraging.",
+        min_characters: 80,
+        max_characters: 220,
+      },
+    },
+    {
+      key: "button",
+      label: "Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Primary call to action button text, inviting users to book a demo or take the next step. Tone is direct, action-oriented, and concise.",
+        min_characters: 10,
+        max_characters: 24,
+      },
+    },
+    {
+      key: "image_wrapper",
+      label: "Image Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Contains and aligns the hero image to the right side, sized to match the vertical height of the text block, with ample padding for balanced visual weight.",
+      },
+    },
+    {
+      key: "image_desktop",
+      label: "Image Desktop",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Right-side visual for the hero section when viewed on desktop—should be visually simple, with a light background (often an illustration or brand imagery). Not a logo or avatar.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "image_mobile",
+      label: "Image Mobile",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Hero image variant optimized for mobile: simple illustration or engaging imagery relating to the brand or theme, fitting within a smaller, responsive area.",
+        orientation: "landscape",
+        size: "medium",
+        usecase: "hero",
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          width: "100%",
+        },
+        container: {
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "7xl",
+          "padding-right": "7xl",
+          "media:max:480px": {
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          "media:max:768px": {
+            "padding-left": "5xl",
+            "padding-right": "5xl",
+          },
+        },
+        card_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "border-radius": "3xl",
+          "background-color": "brand",
+          "media:max:768px": {
+            "flex-direction": "column",
+            "padding-left": "none",
+            "justify-content": "center",
+            "align-items": "center",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "margin-left": "10xl",
+          "margin-top": "11xl",
+          "margin-bottom": "7xl",
+          "max-width": "36rem",
+          "row-gap": "xl",
+          "media:max:768px": {
+            "row-gap": "xs",
+            padding: "2xl",
+            "max-width": "none",
+            "margin-left": "none",
+            "margin-top": "none",
+          },
+          "media:max:480px": {
+            "margin-left": "0",
+            "margin-top": "0",
+            "margin-bottom": "0",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": 700,
+          color: "brandForeground",
+          "line-height": "47px",
+          "media:max:768px": {
+            "font-size": "3xl",
+          },
+        },
+        description: {
+          "font-size": "base",
+          "font-weight": 400,
+          "line-height": 1.5,
+          color: "brandForeground",
+        },
+        button: {
+          "border-radius": "3xl",
+          "font-size": "base",
+          "font-weight": 600,
+          "line-height": 1.5,
+          width: "fit-content",
+          "background-color": "brandSecondary",
+          color: "brandSecondaryForeground",
+          _hover: {
+            opacity: 0.85,
+          },
+        },
+        image_desktop: {
+          width: "auto",
+          "align-self": "end",
+          "border-radius": "3xl",
+          "object-fit": "contain",
+          display: "flex",
+          "media:max:640px": {
+            display: "none",
+          },
+          "align-items": "end",
+          "justify-content": "end",
+          "flex-direction": "row",
+          height: "355px",
+          "margin-left": "auto",
+        },
+        image_mobile: {
+          height: "355px",
+          width: "475px",
+          "align-self": "end",
+          "border-radius-bottom-left": "3xl",
+          "border-radius-bottom-right": "3xl",
+          "object-fit": "contain",
+          display: "none",
+          "media:max:640px": {
+            display: "block",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,42 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ICard2Content } from "./cards-2.schema";
+
+const Cards2: React.FC<ILevoBlockBaseProps<ICard2Content>> = ({}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="card_wrapper">
+        <Box elementKey="content_wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+          <Button elementKey="button" />
+        </Box>
+        <Box elementKey="image_wrapper">
+          <Image
+            elementKey="image_desktop"
+            width={475}
+            height={355}
+            alt="Card feature image"
+          />
+          <Image
+            elementKey="image_mobile"
+            width={475}
+            height={355}
+            alt="Card feature image mobile"
+          />
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards2;

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

@@ -0,0 +1,365 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  hero_section: null,
+  text_content: null,
+  main_title: "Schedule a productivity boost",
+  description:
+    "Take control of your time and energy with smart planning tools. Build better habits, stay focused, and get more done—every day.",
+  hero_image: {
+    id: "7141014160938075687",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+  stats_section: null,
+  stats_cards: [
+    {
+      card: null,
+      number: "500%",
+      label: "Return on Investment",
+      separator: null,
+    },
+    {
+      card: null,
+      number: "250+",
+      label: "Project in 5 Years",
+      separator: null,
+    },
+    {
+      card: null,
+      number: "20M+",
+      label: "Return on Investment",
+      separator: null,
+    },
+  ],
+};
+
+export type ICards3Content = typeof DEFAULT_CONTENT;
+
+export const Cards3: IBlock = {
+  category_id: "cards",
+  title: "Cards 3",
+  key: "cards-3",
+  version: "v1",
+  prompt_description:
+    "Productivity boost section with hero content and three statistics cards displaying key performance metrics with separators between them.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "hero_section",
+      label: "Hero Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "text_content",
+      label: "Text Content",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "main_title",
+      label: "Main Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "hero_image",
+      label: "Hero Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "stats_section",
+      label: "Stats Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "stats_cards",
+      label: "Stats Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "number",
+          label: "Number",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "separator",
+          label: "Separator",
+          field_interface: "BoxWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "base",
+          "padding-right": "base",
+          "background-color": "background-1",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          mobile: {
+            filter: "none",
+          },
+          filter: "none",
+        },
+        hero_section: {
+          display: "flex",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "3xl",
+          "align-items": "center",
+          "margin-bottom": "4xl",
+          tablet: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "2xl",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "xl",
+            filter: "none",
+          },
+          filter: "none",
+          "flex-direction": "column",
+        },
+        text_content: {
+          display: "flex",
+          "flex-direction": "row",
+          "row-gap": "base",
+          filter: "none",
+          width: "100%",
+          "justify-content": "space-between",
+          "align-items": "center",
+          mobile: {
+            filter: "none",
+            "flex-direction": "column",
+          },
+          tablet: {
+            filter: "none",
+            "flex-direction": "row",
+            "justify-content": "start",
+            "align-items": "start",
+          },
+        },
+        main_title: {
+          "font-size": "5xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          mobile: {
+            "font-size": "3xl",
+            filter: "none",
+            width: "100%",
+            "text-align": "center",
+          },
+          filter: "none",
+          width: "500px",
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+          mobile: {
+            "font-size": "base",
+            filter: "none",
+            width: "100%",
+            "text-align": "center",
+          },
+          filter: "none",
+          width: "400px",
+        },
+        hero_image: {
+          width: "100%",
+          height: "500px",
+          "border-radius": "lg",
+          filter: "none",
+          "object-fit": "cover",
+          "margin-top": "8xl",
+          "margin-bottom": "3xl",
+          mobile: {
+            filter: "none",
+            height: "100%",
+            "margin-top": "xl",
+            "margin-bottom": "none",
+          },
+        },
+        stats_section: {
+          width: "100%",
+        },
+        stats_cards_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          width: "100%",
+          tablet: {
+            "flex-direction": "row",
+            "row-gap": "xl",
+            filter: "none",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            filter: "none",
+          },
+          filter: "none",
+        },
+        "stats_cards.$.card": {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+        },
+        "stats_cards.$.number": {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "xs",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        "stats_cards.$.label": {
+          "font-size": "base",
+          "font-weight": "500",
+          color: "text-2",
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+        "stats_cards.$.separator": {
+          width: "1px",
+          height: "80px",
+          "background-color": "border",
+          tablet: {
+            display: "none",
+          },
+          mobile: {
+            display: "none",
+          },
+        },
+        stats_cards: [
+          {
+            separator: {
+              filter: "none",
+              height: "100px",
+              width: "1px",
+              "background-color": "black",
+              mobile: {
+                filter: "none",
+                display: "none",
+              },
+            },
+            number: {
+              "font-size": "5xl",
+              filter: "none",
+              "font-weight": 700,
+              mobile: {
+                filter: "none",
+                "text-align": "center",
+              },
+            },
+            label: {
+              filter: "none",
+              "font-weight": 500,
+            },
+          },
+          {
+            number: {
+              filter: "none",
+              "font-size": "5xl",
+              "font-weight": 700,
+              mobile: {
+                filter: "none",
+                "text-align": "center",
+              },
+            },
+            separator: {
+              filter: "none",
+              width: "1px",
+              height: "100px",
+              "background-color": "black",
+              mobile: {
+                filter: "none",
+                display: "none",
+              },
+              tablet: {
+                filter: "none",
+              },
+            },
+            label: {
+              filter: "none",
+              "font-weight": 500,
+            },
+          },
+          {
+            number: {
+              filter: "none",
+              "font-size": "5xl",
+              "font-weight": 700,
+              mobile: {
+                filter: "none",
+                "text-align": "center",
+              },
+            },
+            label: {
+              filter: "none",
+              "font-weight": 500,
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};