@levo-so/blocks 0.1.1 → 0.1.2

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,190 @@
+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",
+      "background-color": "background-1",
+    },
+    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",
+    },
+  },
+};

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

@@ -0,0 +1,153 @@
+import type { IBlockLayouts } from "@levo-so/studio";
+import { DEFAULT_CONTENT } from "./default";
+
+export const heroStats2Variant: IBlockLayouts = {
+  title: "Hero",
+  key: "hero",
+  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",
+    },
+    content_wrapper: {
+      display: "grid",
+      "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+      "column-gap": "3xl",
+      "align-items": "center",
+      tablet: {
+        "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+        "row-gap": "3xl",
+      },
+      mobile: {
+        "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+        "row-gap": "2xl",
+      },
+    },
+    text_content: {
+      display: "flex",
+      "flex-direction": "column",
+      "align-items": "flex-start",
+    },
+    small_title: {
+      "font-size": "xl",
+      "font-weight": "600",
+      color: "text-1",
+      "margin-bottom": "base",
+      "padding-top": "none",
+      "padding-bottom": "none",
+      "padding-left": "base",
+      "padding-right": "base",
+      "border-radius": "100px",
+      display: "inline-block",
+      "margin-top": "xs",
+    },
+    main_title: {
+      "font-size": "3xl",
+      "font-weight": "700",
+      color: "text-1",
+      "margin-bottom": "base",
+      "line-height": "1.2",
+      mobile: {
+        "font-size": "2xl",
+      },
+    },
+    description: {
+      "font-size": "lg",
+      "font-weight": "400",
+      color: "text-2",
+      "line-height": "1.6",
+      "margin-bottom": "xl",
+      mobile: {
+        "font-size": "base",
+      },
+    },
+    cta: {
+      "background-color": "text-1",
+      color: "background-1",
+      "padding-top": "base",
+      "padding-bottom": "base",
+      "padding-left": "xl",
+      "padding-right": "xl",
+      "border-radius": "6px",
+      "font-weight": "600",
+      "font-size": "base",
+      display: "inline-flex",
+      "align-items": "center",
+    },
+    stats_section: {
+      display: "block",
+    },
+    header_section: {
+      "margin-bottom": "xl",
+      display: "none",
+    },
+    section_title: {
+      display: "none",
+    },
+    section_description: {
+      display: "none",
+    },
+    stats_levoGroup: {
+      display: "grid",
+      "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+      "column-gap": "xl",
+      "row-gap": "xl",
+      width: "100%",
+      mobile: {
+        "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+        "column-gap": "base",
+        "row-gap": "base",
+      },
+    },
+    "stats.$.stat_card": {
+      "text-align": "left",
+      "padding-top": "base",
+      "padding-bottom": "base",
+      "padding-left": "base",
+      "padding-right": "base",
+      "background-color": "background-2",
+      "border-radius": "8px",
+    },
+    "stats.$.number": {
+      "font-size": "3xl",
+      "font-weight": "700",
+      color: "text-1",
+      "margin-bottom": "xs",
+      mobile: {
+        "font-size": "2xl",
+      },
+    },
+    "stats.$.label": {
+      "font-size": "sm",
+      "font-weight": "500",
+      color: "text-2",
+      mobile: {
+        "font-size": "xs",
+      },
+    },
+    horizontal_divider: {
+      width: "60px",
+      height: "2px",
+      "background-color": " #00C896",
+      "padding-top": "none",
+      "padding-bottom": "none",
+      "margin-top": "none",
+      "margin-bottom": "none",
+    },
+    small_title_wrapper: {
+      display: "flex",
+      "justify-content": "center",
+      "align-items": "center",
+      "flex-direction": "row",
+    },
+  },
+};

package/{dist/blocks/stats/variants/index.js → src/blocks/stats/variants/index.ts}

@@ -1,3 +1,4 @@
 import { defaultStats2Variant, DEFAULT_CONTENT } from "./default";
 import { heroStats2Variant } from "./hero";
+
 export { defaultStats2Variant, heroStats2Variant, DEFAULT_CONTENT };