@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  type ILevoBlockBaseProps,
+  Section,
+  Container,
+  Box,
+  Heading,
+  Typography,
+  Image,
+} from "@levo-so/studio";
+
+import type { ICards3Content } from "./cards-3.schema";
+
+const Cards3: React.FC<ILevoBlockBaseProps<ICards3Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="hero_section">
+        <Box elementKey="text_content">
+          <Heading elementKey="main_title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Image elementKey="hero_image" alt="Productivity team" />
+      </Box>
+      <Box elementKey="stats_section">
+        <Box elementKey="stats_cards_levoGroup" data-levo_group>
+          {(content?.stats_cards ?? []).map((_: any, index: number) => (
+            <React.Fragment key={`cards-3-stat-${index}`}>
+              <Box
+                data-levo_group_item
+                elementKey={`stats_cards.${index}.card`}
+              >
+                <Heading elementKey={`stats_cards.${index}.number`} />
+                <Typography elementKey={`stats_cards.${index}.label`} />
+              </Box>
+              {index < (content?.stats_cards?.length ?? 0) - 1 && (
+                <Box
+                  elementKey={`stats_cards.${index}.separator`}
+                  data-levo_group_item
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards3;

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

@@ -0,0 +1,655 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  main_title: "Career Opportunity",
+  header_button: "View All",
+  grid: [
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Marketing Executive",
+      details:
+        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      ctas: [
+        {
+          button: "Apply Now",
+        },
+        {
+          button: "Learn More",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Product Designer",
+      details:
+        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      ctas: [
+        {
+          button: "Apply Now",
+        },
+        {
+          button: "Learn More",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Web Designer",
+      details:
+        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      ctas: [
+        {
+          button: "Apply Now",
+        },
+        {
+          button: "Learn More",
+        },
+      ],
+    },
+    {
+      card: null,
+      content_wrapper: null,
+      title: "Software Developer",
+      details:
+        "Full Time• Expert • Onsite 98 street Chicago USA salary $2000-$3000 Monthly",
+      ctas: [
+        {
+          button: "Apply Now",
+        },
+        {
+          button: "Learn More",
+        },
+      ],
+    },
+  ],
+  header_button_rightIcon: {
+    kind: "custom",
+    data: {
+      id: "UpLVWyg9E9QC",
+      location: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs.png",
+      mimetype: "image/png",
+      kind: "image",
+      srcset: {
+        "1080w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp",
+        "1200w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp",
+        "1920w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp",
+        "320w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp",
+        "640w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp",
+        "750w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp",
+        "828w":
+          "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp",
+        path: "https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1920w.webp 1920w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-sR8IjbcW18vs-1080w.webp 1080w",
+      },
+    },
+  },
+};
+
+export type ICards4Content = typeof DEFAULT_CONTENT;
+
+export const Cards4: IBlock = {
+  category_id: "cards",
+  title: "Cards 4",
+  key: "cards-4",
+  version: "v1",
+  prompt_description:
+    "Career opportunities section with header title and 'View All' button, featuring job cards in a grid layout. Each card displays job title, details, and action buttons.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall section layout for the career opportunities block. Controls spacing, background, and structure.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container for centering and constraining the content width.",
+      },
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Header area containing the main title and view all button, positioned horizontally.",
+      },
+    },
+    {
+      key: "main_title",
+      label: "Main Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main section heading that describes the career opportunities section. Should be engaging and professional.",
+        min_characters: 10,
+        max_characters: 40,
+      },
+    },
+    {
+      key: "header_button",
+      label: "Header  Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Secondary action button for viewing all career opportunities. Should encourage exploration.",
+        min_characters: 6,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "grid",
+      label: " Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual job card container for styling and layout. No direct content.",
+          },
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Wrapper for job title and details within each card. Used for spacing and alignment.",
+          },
+        },
+        {
+          key: "title",
+          label: " Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Job position title that's clear, professional, and attractive to potential candidates.",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "details",
+          label: " Details",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Detailed job information including employment type, experience level, location, and salary range. Should be comprehensive yet concise.",
+            min_characters: 40,
+            max_characters: 120,
+          },
+        },
+        {
+          key: "ctas",
+          label: "Action Buttons",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "button",
+              label: "Button",
+              field_interface: "ButtonWidget",
+              hint: {
+                prompt_description:
+                  "Action button for job application or learning more. Should be clear and action-oriented.",
+                min_characters: 6,
+                max_characters: 20,
+              },
+            },
+          ],
+          hint: {
+            prompt_description:
+              "Group of action buttons for each job card, typically including Apply and Learn More options.",
+            min_items: 2,
+            max_items: 2,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of job opportunity cards featuring different positions with titles, details, and action buttons.",
+        min_items: 2,
+        max_items: 6,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "6xl",
+          "padding-bottom": "6xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "background-color": "oklch(0.9643 0.0169 61.9599)",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          filter: "none",
+        },
+        header_section: {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "4xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "lg",
+            filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+            "justify-content": "center",
+          },
+          filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+        },
+        main_title: {
+          color: "text-1",
+          filter: "none",
+        },
+        header_button: {
+          color: "text-3",
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+          filter: "none",
+          "text-decoration": "none",
+        },
+        cards_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "row-gap": "xl",
+          "column-gap": "xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "row-gap": "lg",
+            "column-gap": "lg",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "row-gap": "base",
+          },
+        },
+        grid: [
+          {
+            title: {
+              filter: "none",
+            },
+            card: {
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              display: "block",
+              "background-color": "white",
+              "padding-top": "4xl",
+              "padding-bottom": "4xl",
+              "padding-left": "4xl",
+              "padding-right": "4xl",
+              "border-radius": "base",
+              mobile: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "padding-bottom": "xl",
+              },
+              tablet: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-right": "xl",
+                "padding-left": "xl",
+                "padding-bottom": "xl",
+              },
+            },
+            details: {
+              filter: "none",
+            },
+            ctas_levoGroup: {
+              filter: "none",
+              display: "flex",
+              "column-gap": "xs",
+              "margin-top": "lg",
+              mobile: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+              tablet: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+            },
+            content_wrapper: {
+              filter: "none",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            ctas: [
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+            ],
+          },
+          {
+            title: {
+              filter: "none",
+            },
+            card: {
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              display: "block",
+              "background-color": "white",
+              "padding-top": "4xl",
+              "padding-bottom": "4xl",
+              "padding-left": "4xl",
+              "padding-right": "4xl",
+              "border-radius": "base",
+              mobile: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "padding-bottom": "xl",
+              },
+              tablet: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-right": "xl",
+                "padding-left": "xl",
+                "padding-bottom": "xl",
+              },
+            },
+            details: {
+              filter: "none",
+            },
+            ctas_levoGroup: {
+              filter: "none",
+              display: "flex",
+              "column-gap": "xs",
+              "margin-top": "lg",
+              mobile: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+              tablet: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+            },
+            content_wrapper: {
+              filter: "none",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            ctas: [
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+            ],
+          },
+          {
+            title: {
+              filter: "none",
+            },
+            card: {
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              display: "block",
+              "background-color": "white",
+              "padding-top": "4xl",
+              "padding-bottom": "4xl",
+              "padding-left": "4xl",
+              "padding-right": "4xl",
+              "border-radius": "base",
+              mobile: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "padding-bottom": "xl",
+              },
+              tablet: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-right": "xl",
+                "padding-left": "xl",
+                "padding-bottom": "xl",
+              },
+            },
+            details: {
+              filter: "none",
+            },
+            ctas_levoGroup: {
+              filter: "none",
+              display: "flex",
+              "column-gap": "xs",
+              "margin-top": "lg",
+              mobile: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+              tablet: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+            },
+            content_wrapper: {
+              filter: "none",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            ctas: [
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+            ],
+          },
+          {
+            title: {
+              filter: "none",
+            },
+            card: {
+              filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+              display: "block",
+              "background-color": "white",
+              "padding-top": "4xl",
+              "padding-bottom": "4xl",
+              "padding-left": "4xl",
+              "padding-right": "4xl",
+              "border-radius": "base",
+              mobile: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "padding-bottom": "xl",
+              },
+              tablet: {
+                filter: "drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2))",
+                "padding-top": "xl",
+                "padding-right": "xl",
+                "padding-left": "xl",
+                "padding-bottom": "xl",
+              },
+            },
+            details: {
+              filter: "none",
+            },
+            ctas_levoGroup: {
+              filter: "none",
+              display: "flex",
+              "column-gap": "xs",
+              "margin-top": "lg",
+              mobile: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+              tablet: {
+                filter: "none",
+                "flex-direction": "column",
+                "row-gap": "xs",
+              },
+            },
+            content_wrapper: {
+              filter: "none",
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+            },
+            ctas: [
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+              {
+                button: {
+                  filter: "none",
+                },
+              },
+            ],
+          },
+        ],
+        header_button_rightIcon: {
+          width: "18px",
+          filter: "none",
+        },
+        grid_levoGroup: {
+          filter: "none",
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "row-gap": "xl",
+          "column-gap": "xl",
+          mobile: {
+            filter: "none",
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        main_title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+
+        "cards.0.ctas.0.button": {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        "cards.0.ctas.1.button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+        "cards.1.ctas.0.button": {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        "cards.1.ctas.1.button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+        "cards.2.ctas.0.button": {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        "cards.2.ctas.1.button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+        "cards.3.ctas.0.button": {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        "cards.3.ctas.1.button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+        header_button: {
+          selectedVariants: {
+            Button_Variants: "Link",
+          },
+          button_icons: {
+            right: {
+              enabled: true,
+            },
+          },
+        },
+      },
+    },
+  ],
+};