@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,88 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IPricing1Content } from "./pricing-1.schema";
+
+const Pricing1: React.FC<ILevoBlockBaseProps<IPricing1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Heading elementKey="title" />
+      <Box elementKey="pricing_cards_levoGroup" data-levo_group>
+        {(content.pricing_cards ?? []).map((_, index) => (
+          <Box
+            key={index}
+            data-levo_group_item
+            elementKey={`pricing_cards.${index}.card`}
+          >
+            {/* Title and Badge Container */}
+            <Box elementKey={`pricing_cards.${index}.title_badge_container`}>
+              {/* Badge for popular plans */}
+              {content.pricing_cards?.[index]?.badge && (
+                <Typography elementKey={`pricing_cards.${index}.badge`} />
+              )}
+              {/* Plan title */}
+              <Heading elementKey={`pricing_cards.${index}.title`} />
+            </Box>
+
+            {/* Primary Content Container */}
+            <Box
+              elementKey={`pricing_cards.${index}.primary_content_container`}
+            >
+              {/* Plan description */}
+              <Typography elementKey={`pricing_cards.${index}.description`} />
+
+              {/* Pricing section */}
+              <Box elementKey={`pricing_cards.${index}.pricing_wrapper`}>
+                <Typography elementKey={`pricing_cards.${index}.price`} />
+                {content.pricing_cards?.[index]?.period && (
+                  <Typography elementKey={`pricing_cards.${index}.period`} />
+                )}
+              </Box>
+
+              {/* CTA Button */}
+              <Button elementKey={`pricing_cards.${index}.cta`} />
+            </Box>
+
+            {/* Features section */}
+            <Box elementKey={`pricing_cards.${index}.features_wrapper`}>
+              <Heading elementKey={`pricing_cards.${index}.features_title`} />
+              <Box
+                elementKey={`pricing_cards.${index}.features_levoGroup`}
+                data-levo_group
+              >
+                {(content.pricing_cards?.[index]?.features ?? []).map(
+                  (_, featureIndex) => (
+                    <Box
+                      key={featureIndex}
+                      data-levo_group_item
+                      elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_container`}
+                    >
+                      <Icon
+                        elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_item`}
+                      />
+                      <Typography
+                        elementKey={`pricing_cards.${index}.features.${featureIndex}.feature_text`}
+                      />
+                    </Box>
+                  ),
+                )}
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Pricing1;

package/src/blocks/products/products-listing-1.schema.ts

@@ -0,0 +1,274 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_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,
+  header_box: null,
+  title: "AI-Powered Products Built for Growth",
+  cta_box: null,
+  description:
+    "Our intelligent, scalable, and user-friendly products leverage AI to enhance performance, automation, and user engagement.",
+  cta: "View More",
+  products_levoGroup: null,
+  products: [
+    {
+      card: null,
+      image: DEFAULT_IMAGE,
+      title: "Websites",
+      price: "$25.00",
+    },
+    {
+      card: null,
+      image: DEFAULT_IMAGE,
+      title: "Mobile Apps",
+      price: "$25.00",
+    },
+    {
+      card: null,
+      image: DEFAULT_IMAGE,
+      title: "Chatbots",
+      price: "$25.00",
+    },
+    {
+      card: null,
+      image: DEFAULT_IMAGE,
+      title: "Platforms",
+      price: "$25.00",
+    },
+  ],
+};
+
+export type IProductsListing1Content = typeof DEFAULT_CONTENT;
+
+export const ProductsListing1: IBlock = {
+  category_id: "products",
+  title: "Products Listing 1",
+  key: "products-listing-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_box",
+      label: "Header Box",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "cta_box",
+      label: "Cta Box",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "button_1",
+      label: "Button 1",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "products",
+      label: "Products",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "price",
+          label: "Price",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        container: {
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "7xl",
+          "padding-bottom": "7xl",
+        },
+        header_box: {
+          display: "flex",
+          "flex-direction": "row",
+          "justify-content": "space-between",
+          "column-gap": "3xl",
+          "margin-bottom": "7xl",
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          "max-width": "36rem",
+        },
+        cta_box: {
+          display: "flex",
+          "flex-direction": "column",
+          mobile: {
+            width: "100%",
+          },
+        },
+        description: {
+          color: "text-2",
+          "font-size": "base",
+          "max-width": "28rem",
+          "margin-bottom": "sm",
+          tablet: {
+            "margin-bottom": "none",
+          },
+        },
+        button_1: {
+          width: "fit-content",
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        products_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "row-gap": "3xl",
+          "column-gap": "3xl",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        products: [
+          {
+            card: {
+              "border-radius": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            image: {
+              "border-radius": "2xl",
+              width: "100%",
+              height: "411px",
+              "margin-bottom": "lg",
+            },
+            title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "2xs",
+            },
+          },
+          {
+            card: {
+              "border-radius": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            image: {
+              "border-radius": "2xl",
+              width: "100%",
+              height: "411px",
+              "margin-bottom": "lg",
+            },
+            title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "2xs",
+            },
+          },
+          {
+            card: {
+              "border-radius": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            image: {
+              "border-radius": "2xl",
+              width: "100%",
+              height: "411px",
+              "margin-bottom": "lg",
+            },
+            title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "2xs",
+            },
+          },
+          {
+            card: {
+              "border-radius": "2xl",
+              display: "flex",
+              "flex-direction": "column",
+            },
+            image: {
+              "border-radius": "2xl",
+              width: "100%",
+              height: "411px",
+              "margin-bottom": "lg",
+            },
+            title: {
+              "font-size": "lg",
+              "font-weight": "600",
+              "margin-bottom": "2xs",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/products/products-listing-1.tsx

@@ -0,0 +1,48 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IProductsListing1Content } from "./products-listing-1.schema";
+
+const ProductsListing1: React.FC<
+  ILevoBlockBaseProps<IProductsListing1Content>
+> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_box">
+        <Heading elementKey="title" />
+        <Box elementKey="cta_box">
+          <Typography elementKey="description" />
+          <Button elementKey="button_1" />
+        </Box>
+      </Box>
+      <Box data-levo_group elementKey="products_levoGroup">
+        {(content.products ?? []).map((_, index) => (
+          <Box
+            data-levo_group_item
+            elementKey={`products.${index}.card`}
+            key={index}
+          >
+            <Image
+              alt="product image"
+              elementKey={`products.${index}.image`}
+              width={400}
+              height={400}
+            />
+            <Heading elementKey={`products.${index}.title`} />
+            <Typography elementKey={`products.${index}.price`} />
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default ProductsListing1;

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

@@ -0,0 +1,231 @@
+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)",
+    "font-size": "4xl",
+    "font-weight": 700,
+  },
+  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: {},
+    },
+  ],
+};

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;