@levo-so/blocks 0.1.1 → 0.1.2

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

@@ -0,0 +1,578 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  main_wrapper: null,
+  left_container: null,
+  left_title: "Enterprise Solutions Platform",
+  left_description:
+    "Comprehensive business technology solutions designed to streamline operations and drive digital transformation across your organization.",
+  right_container: null,
+  images: [
+    {
+      image: {
+        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",
+        },
+      },
+    },
+  ],
+  cards: [
+    {
+      card: null,
+      small_desc: "Core Features",
+      title: "Advanced Analytics Dashboard",
+      description:
+        "Real-time business intelligence with comprehensive reporting tools and customizable metrics for data-driven decision making.",
+    },
+    {
+      card: null,
+      small_desc: "Integration",
+      title: "Seamless System Integration",
+      description:
+        "Connect all your business tools and applications through our unified platform with robust API connectivity and data synchronization.",
+    },
+    {
+      card: null,
+      small_desc: "Security",
+      title: "Enterprise-Grade Security",
+      description:
+        "Multi-layered security architecture with advanced encryption, access controls, and compliance management for maximum data protection.",
+    },
+    {
+      card: null,
+      small_desc: "Support",
+      title: "24/7 Professional Support",
+      description:
+        "Dedicated technical support team available around the clock with expert guidance and rapid issue resolution capabilities.",
+    },
+  ],
+};
+
+export type ICards12Content = typeof DEFAULT_CONTENT;
+
+export const Cards12: IBlock = {
+  category_id: "cards",
+  title: "Cards 12",
+  key: "cards-12",
+  version: "v1",
+  prompt_description:
+    "Two-column layout featuring left side content with title, description and image gallery, paired with right side feature cards containing small descriptions, titles, and detailed descriptions.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall section layout controlling spacing, background, and structure for the two-column cards block.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container for centering and constraining the content width within the section.",
+      },
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Primary wrapper containing both left and right sections in a flex row layout.",
+      },
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Left side container holding the main title, description, and image gallery section.",
+      },
+    },
+    {
+      key: "left_title",
+      label: "Left Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the left section that introduces the overall topic or service offering.",
+        min_characters: 15,
+        max_characters: 50,
+      },
+    },
+    {
+      key: "left_description",
+      label: "Left Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Detailed description explaining the main concept or value proposition for the left section.",
+        min_characters: 50,
+        max_characters: 200,
+      },
+    },
+    {
+      key: "images",
+      label: "Image Gallery",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Individual image in the gallery showcasing different aspects of the service or product features.",
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of images that visually support the left section content, displaying various aspects or features.",
+        min_items: 2,
+        max_items: 6,
+      },
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Right side container holding the feature cards with detailed information.",
+      },
+    },
+    {
+      key: "cards",
+      label: "Feature Cards",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual card container for styling and layout. No direct content.",
+          },
+        },
+        {
+          key: "small_desc",
+          label: "Small Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Brief category or tag line that introduces the card topic, should be concise and descriptive.",
+            min_characters: 5,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "title",
+          label: "Card Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Main heading for the card that clearly describes the feature or benefit being highlighted.",
+            min_characters: 15,
+            max_characters: 40,
+          },
+        },
+        {
+          key: "description",
+          label: "Card Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Detailed explanation of the feature or benefit, providing comprehensive information to help users understand the value.",
+            min_characters: 60,
+            max_characters: 150,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Collection of feature cards displaying key benefits, services, or capabilities with structured information hierarchy.",
+        min_items: 3,
+        max_items: 6,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          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",
+        },
+        main_wrapper: {
+          display: "flex",
+          "column-gap": "5xl",
+          "align-items": "flex-start",
+          tablet: {
+            "column-gap": "3xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+          },
+        },
+        left_container: {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        left_title: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          tablet: {
+            "font-size": "3xl",
+          },
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+        left_description: {
+          "font-size": "lg",
+          color: "text-2",
+          "line-height": "1.6",
+        },
+        images_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          "row-gap": "base",
+          "column-gap": "base",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        right_container: {
+          flex: "1",
+        },
+        cards_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        images: [
+          {
+            image: {
+              width: "100%",
+              "border-radius": "lg",
+              "aspect-ratio": "4/3",
+              "object-fit": "cover",
+            },
+          },
+        ],
+        cards: [
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+              width: "fit-content",
+              "background-color": "brandSecondary",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+              width: "fit-content",
+              "background-color": "brandSecondary",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+              width: "fit-content",
+              "background-color": "brandSecondary",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+              width: "fit-content",
+              "background-color": "brandSecondary",
+              "padding-left": "xs",
+              "padding-right": "xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "border-radius": "3xl",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "padding-top": "lg",
+              "padding-bottom": "lg",
+              "padding-left": "lg",
+              "padding-right": "lg",
+              "border-radius": "lg",
+              "border-width": "1px",
+              "border-color": "border",
+            },
+            small_desc: {
+              "font-size": "sm",
+              "font-weight": "600",
+              color: "text-3",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.05em",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "line-height": "1.3",
+            },
+            description: {
+              "font-size": "base",
+              color: "text-2",
+              "line-height": "1.6",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,54 @@
+import {
+  Box,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { ICards12Content } from "./cards-12.schema";
+
+const Cards12: React.FC<ILevoBlockBaseProps<ICards12Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main_wrapper">
+        <Box elementKey="left_container">
+          <Heading elementKey="left_title" />
+          <Typography elementKey="left_description" />
+          <Box elementKey="images_levoGroup" data-levo_group>
+            {(content?.images ?? []).map((_, index: number) => (
+              <Image
+                key={`image-${index}`}
+                data-levo_group_item
+                elementKey={`images.${index}.image`}
+                alt={`Feature image ${index + 1}`}
+              />
+            ))}
+          </Box>
+        </Box>
+        <Box elementKey="right_container">
+          <Box elementKey="cards_levoGroup" data-levo_group>
+            {(content?.cards ?? []).map((_, index: number) => (
+              <Box
+                key={`card-${index}`}
+                data-levo_group_item
+                elementKey={`cards.${index}.card`}
+              >
+                <Typography elementKey={`cards.${index}.small_desc`} />
+                <Heading elementKey={`cards.${index}.title`} />
+                <Typography elementKey={`cards.${index}.description`} />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards12;