@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,631 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_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",
+  },
+};
+
+const PRODUCT_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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  content_wrapper: null,
+  header_section: null,
+  title: "Enterprise Solutions Overview",
+  subtitle: "Comprehensive Business Technology Platform",
+
+  // Left specifications area
+  specifications_wrapper: null,
+  specifications: [
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "99.9%",
+      label: "Uptime Guarantee",
+    },
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "24/7",
+      label: "Customer Support",
+    },
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "256-bit",
+      label: "Encryption Standard",
+    },
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "10,000+",
+      label: "Active Users",
+    },
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "50TB",
+      label: "Storage Capacity",
+    },
+    {
+      spec_item: null,
+      icon: DUMMY_ICON,
+      value: "12 Months",
+      label: "Warranty Period",
+    },
+  ],
+
+  // Specifications 2 section
+  specifications_2_wrapper: null,
+  specifications_2_title: "Service Level Agreements",
+  specifications_2: [
+    {
+      spec_2_item: null,
+      icon: DUMMY_ICON,
+      value: "Response Time: 4 hours | Resolution: 24 hours",
+      label: "Critical Issue Support",
+    },
+    {
+      spec_2_item: null,
+      icon: DUMMY_ICON,
+      value: "Response Time: 8 hours | Resolution: 48 hours",
+      label: "Standard Issue Support",
+    },
+  ],
+
+  // Right product image
+  product_image: PRODUCT_IMAGE,
+};
+
+export type IFeatures4Content = typeof DEFAULT_CONTENT;
+
+export const Features4: IBlock = {
+  category_id: "features",
+  title: "Features 4",
+  key: "features-4",
+  version: "v1",
+  prompt_description:
+    "Product specification layout with main title, specifications grid on the left with icons and values, dimensions section, and large product image on the right side.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Main layout container for the product specification block with proper spacing and background.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Container providing structural alignment and padding for the entire product specification section.",
+      },
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Header container for the main title and subtitle, centered above the content.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main heading for the product specification section. Use clear, professional language that describes the product or specification overview.",
+        min_characters: 12,
+        max_characters: 40,
+      },
+    },
+    {
+      key: "subtitle",
+      label: "Subtitle",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Supporting subtitle providing additional context about the product. Keep it concise and descriptive.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main content wrapper organizing the layout between specifications on the left and product image on the right.",
+      },
+    },
+    {
+      key: "specifications_wrapper",
+      label: "Specifications Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the left side specifications grid, organizing individual specification items.",
+      },
+    },
+    {
+      key: "specifications",
+      label: "Specifications",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "spec_item",
+          label: "Specification Item",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual specification item container with icon, value, and label.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon representing the specification category. Use simple, recognizable icons related to the specification type.",
+          },
+        },
+        {
+          key: "value",
+          label: "Value",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "The main specification value (e.g., '110V-240V, 5A', '250 Kg'). Keep it clear and concise.",
+            min_characters: 2,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Descriptive label for the specification (e.g., 'Power Requirement', 'Weight'). Use clear, professional terminology.",
+            min_characters: 4,
+            max_characters: 25,
+          },
+        },
+      ],
+    },
+    {
+      key: "specifications_2_wrapper",
+      label: "Specifications 2 Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the specifications 2 section, typically placed below the main specifications.",
+      },
+    },
+    {
+      key: "specifications_2_title",
+      label: "Specifications 2 Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Title for the specifications 2 section (e.g., 'Service Level Agreements'). Provide clear context for the additional specifications.",
+        min_characters: 15,
+        max_characters: 50,
+      },
+    },
+    {
+      key: "specifications_2",
+      label: "Specifications 2",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "spec_2_item",
+          label: "Specification 2 Item",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual specification 2 item container with icon, value, and description.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Icon representing the specification type or configuration. Use icons that clearly indicate the specification category.",
+          },
+        },
+        {
+          key: "value",
+          label: "Value",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Detailed specification information (e.g., 'Response Time: 4 hours | Resolution: 24 hours'). Use precise details with proper formatting.",
+            min_characters: 10,
+            max_characters: 60,
+          },
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Description of the specification (e.g., 'Critical Issue Support'). Provide clear context for the specification.",
+            min_characters: 8,
+            max_characters: 40,
+          },
+        },
+      ],
+    },
+    {
+      key: "product_image",
+      label: "Product Image",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Main product image showcasing the item in context. Use high-quality, professional product photography that clearly shows the product's design and key features.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          tablet: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "max-width": "7xl",
+          mobile: {
+            filter: "none",
+          },
+          filter: "none",
+        },
+        content_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "4xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+            filter: "none",
+          },
+        },
+        header_section: {
+          "text-align": "center",
+          "margin-bottom": "4xl",
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "sm",
+          tablet: {
+            "font-size": "3xl",
+          },
+        },
+        subtitle: {
+          "font-size": "lg",
+          color: "text-2",
+        },
+        specifications_wrapper: {
+          flex: "1",
+          "max-width": "50%",
+          width: "100%",
+          tablet: {
+            flex: "auto",
+            "max-width": "100%",
+            filter: "none",
+          },
+          filter: "none",
+          mobile: {
+            filter: "none",
+          },
+        },
+        specifications_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, 1fr)",
+          gap: "xl",
+          "margin-bottom": "3xl",
+          mobile: {
+            "grid-template-columns": "1fr",
+            gap: "lg",
+          },
+        },
+        specifications: [
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.5rem",
+              height: "1.5rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "lg",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+        ],
+        specifications_2_wrapper: {
+          "background-color": "white",
+          "border-radius": "xl",
+          padding: "lg",
+          "border-width": "1px",
+          "border-color": "border",
+          "border-style": "solid",
+        },
+        specifications_2_title: {
+          "font-size": "lg",
+          "font-weight": "600",
+          color: "text-1",
+          "margin-bottom": "base",
+        },
+        specifications_2_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          gap: "base",
+        },
+        specifications_2: [
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.25rem",
+              height: "1.25rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "base",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+          {
+            spec_2_item: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "sm",
+            },
+            icon: {
+              width: "1.25rem",
+              height: "1.25rem",
+              "margin-top": "2xs",
+              color: "brand",
+            },
+            value: {
+              "font-size": "base",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "3xs",
+            },
+            label: {
+              "font-size": "sm",
+              color: "text-2",
+            },
+          },
+        ],
+        product_image: {
+          width: "50%",
+          height: "100%",
+          "border-radius": "xl",
+          "object-fit": "cover",
+          tablet: {
+            filter: "none",
+            width: "100%",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/features/features-4.tsx

@@ -0,0 +1,75 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IFeatures4Content } from "./features-4.schema";
+
+const Features4: React.FC<ILevoBlockBaseProps<IFeatures4Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_section">
+        <Heading elementKey="title" />
+        <Typography elementKey="subtitle" />
+      </Box>
+
+      <Box elementKey="content_wrapper">
+        <Box elementKey="specifications_wrapper">
+          <Box elementKey="specifications_levoGroup" data-levo_group>
+            {(content?.specifications ?? [])?.map((_, index) => (
+              <Box
+                elementKey={`specifications.${index}.spec_item`}
+                key={`features-4-spec-${index}`}
+                data-levo_group_item
+              >
+                <Icon elementKey={`specifications.${index}.icon`} />
+                <Box elementKey={`specifications.${index}.text_wrapper`}>
+                  <Heading elementKey={`specifications.${index}.value`} />
+                  <Typography elementKey={`specifications.${index}.label`} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+
+          <Box elementKey="specifications_2_wrapper">
+            <Heading elementKey="specifications_2_title" />
+            <Box elementKey="specifications_2_levoGroup" data-levo_group>
+              {(content?.specifications_2 ?? [])?.map((_, index) => (
+                <Box
+                  elementKey={`specifications_2.${index}.spec_2_item`}
+                  key={`features-4-spec-2-${index}`}
+                  data-levo_group_item
+                >
+                  <Icon elementKey={`specifications_2.${index}.icon`} />
+                  <Box elementKey={`specifications_2.${index}.text_wrapper`}>
+                    <Heading elementKey={`specifications_2.${index}.value`} />
+                    <Typography
+                      elementKey={`specifications_2.${index}.label`}
+                    />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+
+        <Media
+          elementKey="product_image"
+          alt="Product specification image"
+          width={640}
+          height={480}
+        />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Features4;