@levo-so/blocks 0.1.1 → 0.1.52

package/src/blocks/stats/stats-1.schema.ts

@@ -0,0 +1,262 @@
+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 DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  stats_levoGroup: null,
+  stats: [
+    {
+      stat: null,
+      icon: DUMMY_ICON,
+      "content-wrapper": null,
+      header: "20+",
+      description: "Years of experience",
+    },
+    {
+      stat: null,
+      icon: DUMMY_ICON,
+      "content-wrapper": null,
+      header: "500+",
+      description: "Happy Client Worldwide",
+    },
+    {
+      stat: null,
+      icon: DUMMY_ICON,
+      "content-wrapper": null,
+      header: "1K+",
+      description: "Audits Completed",
+    },
+    {
+      stat: null,
+      icon: DUMMY_ICON,
+      "content-wrapper": null,
+      header: "22+",
+      description: "Business Awards",
+    },
+  ],
+};
+
+export type IStats1Content = typeof DEFAULT_CONTENT;
+
+const STAT_STYLE = {
+  stat: {
+    border: "none",
+    "background-color": "transparent",
+    "box-shadow": "none",
+    display: "flex",
+    width: "100%",
+    "flex-direction": "column",
+    "row-gap": "xl",
+  },
+  icon: {
+    width: "48px",
+    height: "48px",
+    "object-fit": "contain",
+    "margin-left": "auto",
+    "margin-right": "auto",
+  },
+  "content-wrapper": {
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "center",
+    "row-gap": "xs",
+  },
+  header: {
+    color: "var(--color-brand-foreground)",
+  },
+  description: {
+    color: "var(--color-brand-foreground)",
+    "font-size": "base",
+    "font-weight": 600,
+  },
+};
+
+const STATS_STYLES = Array(4)
+  ?.fill(0)
+  ?.map((_: any) => STAT_STYLE);
+
+export const Stats1: IBlock = {
+  category_id: "stats",
+  title: "Stats 1",
+  key: "stats-1",
+  version: "v1",
+  prompt_description:
+    "Four-column stats block with bold numbers, descriptive captions, and matching icons above each stat, all set on a solid color background for high visibility.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall section layout for a horizontal metrics/statistics block. Use a balanced, four-column grid with generous spacing and central alignment.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Acts as the main content container for the statistics block, ensuring visual consistency, providing padding, and maintaining readability on a colored background.",
+      },
+    },
+    {
+      key: "stats",
+      label: "Stats",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "stat",
+          label: "Stat",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Holds the content for a single statistics card. Used to group an icon, a prominent numeric/statistic header, and a brief descriptive label.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "An illustrative, line-style icon visually representing the corresponding statistic (such as years of experience, clients, etc.) in a friendly, simple style. Appears above each stat.",
+            orientation: "square",
+            size: "small",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "content-wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Groups and aligns the header and description text for a stat. Maintains vertical stacking and central alignment beneath the icon.",
+          },
+        },
+        {
+          key: "header",
+          label: "Header",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "The headline number/statistic for the metric, such as '20+', '500+', etc. Must be very brief, bold, and immediately catch the eye. Use compact statistic formats. Tone is factual and celebratory.",
+            min_characters: 2,
+            max_characters: 6,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "A short, clear phrase describing what the headline number/stat means (e.g., 'Years of experience', 'Happy Client Worldwide'). Should be descriptive but concise, generally one line. Tone is professional, positive, and straightforward.",
+            min_characters: 10,
+            max_characters: 32,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A group of statistic cards highlighting key business achievements or metrics. Each card showcases one metric, icon, and label. Used to quickly communicate credentials or success factors.",
+        min_items: 4,
+        max_items: 4,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "background-color": "var(--color-brand)",
+          "padding-top": "9xl",
+          "padding-bottom": "9xl",
+          "padding-right": "12xl",
+          "padding-left": "12xl",
+          tablet: {
+            "padding-top": "9xl",
+            "padding-bottom": "9xl",
+            "padding-right": "9xl",
+            "padding-left": "9xl",
+          },
+          mobile: {
+            "padding-top": "6xl",
+            "padding-bottom": "6xl",
+            "padding-right": "6xl",
+            "padding-left": "6xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        stats_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          "column-gap": "9xl",
+          "row-gap": "9xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        stats: STATS_STYLES,
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        "stats.0.header": {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        "stats.1.header": {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        "stats.2.header": {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        "stats.3.header": {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/stats/stats-1.tsx

@@ -0,0 +1,38 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Container,
+  Heading,
+  Icon,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { IStats1Content } from "./stats-1.schema";
+
+const Stats1: React.FC<ILevoBlockBaseProps<IStats1Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="stats_levoGroup">
+          {(content?.stats ?? []).map((_: any, index: number) => (
+            <Box
+              data-levo_group_item
+              elementKey={`stats.${index}.stat`}
+              key={index}
+            >
+              <Icon elementKey={`stats.${index}.icon`} />
+              <Box elementKey={`stats.${index}.content-wrapper`}>
+                <Heading elementKey={`stats.${index}.header`} />
+                <Typography elementKey={`stats.${index}.description`} />
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Stats1;

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

@@ -0,0 +1,111 @@
+import type { IBlock } from "@levo-so/studio";
+
+import type { DEFAULT_CONTENT } from "./variants";
+import { defaultStats2Variant, heroStats2Variant } from "./variants";
+
+export type IStats2Content = typeof DEFAULT_CONTENT;
+
+export const Stats2: IBlock = {
+  category_id: "stats",
+  title: "Stats 2",
+  key: "stats-2",
+  version: "v1",
+  prompt_description:
+    "Clean horizontal stats layout with section title, description, and four key metrics displayed as large numbers with descriptive labels below. Hero variant includes additional content section with small title, main title, description and CTA button.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "text_content",
+      label: "Text Content",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "small_title_wrapper",
+      label: "Small Title Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "horizontal_divider",
+      label: "Horizontal Divider",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "small_title",
+      label: "Small Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "main_title",
+      label: "Main Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "cta",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "stats_section",
+      label: "Stats Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "section_title",
+      label: "Section Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "section_description",
+      label: "Section Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "stats",
+      label: "Stats",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "stat_card",
+          label: "Stat Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "number",
+          label: "Number",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [defaultStats2Variant, heroStats2Variant],
+};

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

@@ -0,0 +1,52 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { IStats2Content } from "./stats-2.schema";
+
+const Stats2: React.FC<ILevoBlockBaseProps<IStats2Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="content_wrapper">
+          <Box elementKey="text_content">
+            <Box elementKey="small_title_wrapper">
+              <Box elementKey="horizontal_divider" />
+              <Typography elementKey="small_title" />
+            </Box>
+            <Heading elementKey="main_title" />
+            <Typography elementKey="description" />
+            <Button elementKey="cta" />
+          </Box>
+          <Box elementKey="stats_section">
+            <Box elementKey="header_section">
+              <Heading elementKey="section_title" />
+              <Typography elementKey="section_description" />
+            </Box>
+            <Box elementKey="stats_levoGroup" data-levo_group>
+              {(content?.stats ?? []).map((_: unknown, index: number) => (
+                <Box
+                  data-levo_group_item
+                  elementKey={`stats.${index}.stat_card`}
+                  key={index}
+                >
+                  <Heading elementKey={`stats.${index}.number`} />
+                  <Typography elementKey={`stats.${index}.label`} />
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Stats2;

package/src/blocks/stats/variants/default.ts

@@ -0,0 +1,189 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+
+export const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  content_wrapper: null,
+  text_content: null,
+  small_title: "About Us",
+  main_title: "Where bold ideas meet flawless execution",
+  description:
+    "We are a modern venture studio dedicated to building world-class products and companies from the ground up.",
+  cta: "Built With Us",
+  stats_section: null,
+  header_section: null,
+  section_title: "Who we are",
+  section_description:
+    "We specialize in smart real estate solutions that enhance efficiency, streamline operations, and unlock growth potential. Our expert team and integrated services support developers, investors, and property owners across the real estate lifecycle.",
+  stats: [
+    {
+      stat_card: null,
+      number: "1200+",
+      label: "Active Members",
+    },
+    {
+      stat_card: null,
+      number: "88%",
+      label: "Member Retention Rate",
+    },
+    {
+      stat_card: null,
+      number: "30+",
+      label: "Weekly Classes",
+    },
+    {
+      stat_card: null,
+      number: "95%",
+      label: "Satisfaction Rating",
+    },
+  ],
+};
+
+export const defaultStats2Variant: IBlockLayouts = {
+  title: "Default",
+  key: "default",
+  content: DEFAULT_CONTENT,
+  config: {},
+  styles: {
+    layout: {
+      "padding-top": "3xl",
+      "padding-bottom": "3xl",
+      "padding-left": "base",
+      "padding-right": "base",
+    },
+    container: {
+      "max-width": "1280px",
+      "margin-left": "auto",
+      "margin-right": "auto",
+      filter: "none",
+      mobile: {
+        filter: "none",
+      },
+      tablet: {
+        filter: "none",
+      },
+    },
+    content_wrapper: {
+      display: "block",
+    },
+    text_content: {
+      display: "none",
+    },
+    stats_section: {
+      display: "block",
+    },
+    header_section: {
+      "margin-bottom": "3xl",
+      "text-align": "center",
+      "max-width": "none",
+      "margin-left": "auto",
+      "margin-right": "auto",
+      filter: "none",
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "start",
+      "justify-content": "start",
+      mobile: {
+        filter: "none",
+        "justify-content": "center",
+        "align-items": "center",
+      },
+    },
+    section_title: {
+      "font-size": "xs",
+      "font-weight": "600",
+      color: "text-1",
+      "margin-bottom": "lg",
+      "background-color": "background-2",
+      "padding-top": "xs",
+      "padding-bottom": "xs",
+      "padding-left": "base",
+      "padding-right": "base",
+      "border-radius": "100px",
+      display: "inline-block",
+      mobile: {
+        "font-size": "xs",
+      },
+      filter: "none",
+    },
+    section_description: {
+      "font-size": "2xl",
+      "font-weight": "400",
+      color: "text-1",
+      "line-height": "1.6",
+      mobile: {
+        "font-size": "lg",
+        filter: "none",
+        "text-align": "center",
+      },
+      filter: "none",
+      display: "block",
+      width: "auto",
+      "object-fit": "none",
+      "justify-content": "start",
+      "align-items": "start",
+      "text-align": "left",
+      tablet: {
+        filter: "none",
+      },
+    },
+    stats_levoGroup: {
+      display: "grid",
+      "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+      "column-gap": "2xl",
+      "row-gap": "xl",
+      width: "100%",
+      tablet: {
+        "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+        filter: "none",
+        width: "100%",
+        display: "grid",
+      },
+      mobile: {
+        "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+        filter: "none",
+        display: "grid",
+        width: "100%",
+        "place-items": "center",
+      },
+      filter: "none",
+      "border-style": "solid",
+      "border-top-width": "1px",
+      "border-color": "background-2",
+      "padding-bottom": "none",
+      "padding-top": "2xl",
+    },
+    "stats.$.stat_card": {
+      "text-align": "center",
+    },
+    "stats.$.number": {
+      "font-size": "4xl",
+      "font-weight": "700",
+      color: "text-1",
+      "margin-bottom": "xs",
+      mobile: {
+        "font-size": "3xl",
+      },
+    },
+    "stats.$.label": {
+      "font-size": "base",
+      "font-weight": "500",
+      color: "text-2",
+      mobile: {
+        "font-size": "sm",
+      },
+    },
+    small_title: {
+      display: "none",
+    },
+    main_title: {
+      display: "none",
+    },
+    description: {
+      display: "none",
+    },
+    cta: {
+      display: "none",
+    },
+  },
+};