@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -15,6 +15,9 @@ const DEFAULT_CONTENT = {
   layout: null,
   container: null,
   stats_levoGroup: null,
+  title: "Title",
+  description:
+    "Description Description Description Description Description Description Description Description ",
   stats: [
     {
       stat: null,
@@ -112,6 +115,21 @@ export const Stats1: IBlock = {
           "Acts as the main content container for the statistics block, ensuring visual consistency, providing padding, and maintaining readability on a colored background.",
       },
     },
+    {
+      key: "header",
+      label: "Header",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
     {
       key: "stats",
       label: "Stats",
@@ -185,28 +203,12 @@ export const Stats1: IBlock = {
       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",
-          },
+          "background-color": "brand",
         },
         container: {
-          "margin-left": "auto",
-          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
         },
         stats_levoGroup: {
           display: "grid",
@@ -220,7 +222,141 @@ export const Stats1: IBlock = {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
           },
         },
-        stats: STATS_STYLES,
+        stats: [
+          {
+            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": "4xs",
+            },
+            header: {
+              color: "brandForeground",
+            },
+            description: {
+              "font-weight": 600,
+              color: "brandForeground",
+            },
+          },
+          {
+            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": "4xs",
+            },
+            header: {
+              color: "brandForeground",
+            },
+            description: {
+              "font-weight": 600,
+              color: "brandForeground",
+            },
+          },
+          {
+            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": "4xs",
+            },
+            header: {
+              color: "brandForeground",
+            },
+            description: {
+              "font-weight": 600,
+              color: "brandForeground",
+            },
+          },
+          {
+            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": "4xs",
+            },
+            header: {
+              color: "brandForeground",
+            },
+            description: {
+              "font-weight": 600,
+              color: "brandForeground",
+            },
+          },
+        ],
+        title: {
+          color: "brandForeground",
+          "text-align": "center",
+          "margin-bottom": "4xs",
+        },
+        description: {
+          "text-align": "center",
+          color: "brandForeground",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -256,6 +392,74 @@ export const Stats1: IBlock = {
             Heading_Level: "H2",
           },
         },
+        stats: [
+          {
+            header: {
+              heading: {
+                level: "3",
+              },
+              selectedVariants: {
+                Heading_Level: "H2",
+              },
+            },
+            "content-wrapper": {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            header: {
+              selectedVariants: {
+                Heading_Level: "H2",
+              },
+            },
+            "content-wrapper": {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            header: {
+              selectedVariants: {
+                Heading_Level: "H2",
+              },
+              heading: {
+                level: "3",
+              },
+            },
+            "content-wrapper": {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+          {
+            header: {
+              selectedVariants: {
+                Heading_Level: "H2",
+              },
+              heading: {
+                level: "3",
+              },
+            },
+            "content-wrapper": {
+              selectedVariants: {},
+            },
+            description: {
+              selectedVariants: {},
+            },
+          },
+        ],
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
       },
     },
   ],

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

@@ -1,13 +1,6 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Container,
-  Heading,
-  Icon,
-  Section,
-  Typography,
-} from "@levo-so/studio";
-import React from "react";
+import { Box, Container, Heading, Icon, Section, Typography } from "@levo-so/studio";
+import type React from "react";
 
 import type { IStats1Content } from "./stats-1.schema";
 
@@ -15,13 +8,13 @@ const Stats1: React.FC<ILevoBlockBaseProps<IStats1Content>> = ({ content }) => {
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
         <Box elementKey="stats_levoGroup">
           {(content?.stats ?? []).map((_: any, index: number) => (
-            <Box
-              data-levo_group_item
-              elementKey={`stats.${index}.stat`}
-              key={index}
-            >
+            <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`} />

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

@@ -51,7 +51,7 @@ export const Stats2: IBlock = {
     {
       key: "main_title",
       label: "Main Title",
-      field_interface: "TypographyWidget",
+      field_interface: "HeadingWidget",
     },
     {
       key: "description",
@@ -59,9 +59,17 @@ export const Stats2: IBlock = {
       field_interface: "TypographyWidget",
     },
     {
-      key: "cta",
-      label: "CTA Button",
-      field_interface: "ButtonWidget",
+      key: "ctas",
+      label: "CTA Buttons Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
     },
     {
       key: "stats_section",
@@ -97,7 +105,7 @@ export const Stats2: IBlock = {
         {
           key: "number",
           label: "Number",
-          field_interface: "TypographyWidget",
+          field_interface: "HeadingWidget",
         },
         {
           key: "label",

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

@@ -1,13 +1,6 @@
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
-import {
-  Box,
-  Button,
-  Container,
-  Heading,
-  Section,
-  Typography,
-} from "@levo-so/studio";
-import React from "react";
+import { Box, Button, Container, Heading, Section, Typography } from "@levo-so/studio";
+import type React from "react";
 
 import type { IStats2Content } from "./stats-2.schema";
 
@@ -23,7 +16,15 @@ const Stats2: React.FC<ILevoBlockBaseProps<IStats2Content>> = ({ content }) => {
             </Box>
             <Heading elementKey="main_title" />
             <Typography elementKey="description" />
-            <Button elementKey="cta" />
+            <Box elementKey="ctas_levoGroup" data-levo_group>
+              {(content?.ctas ?? []).map((_: any, index: number) => (
+                <Button
+                  key={`ctas.${index}.cta`}
+                  elementKey={`ctas.${index}.cta`}
+                  data-levo_group_item
+                />
+              ))}
+            </Box>
           </Box>
           <Box elementKey="stats_section">
             <Box elementKey="header_section">
@@ -32,11 +33,7 @@ const Stats2: React.FC<ILevoBlockBaseProps<IStats2Content>> = ({ content }) => {
             </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}
-                >
+                <Box data-levo_group_item elementKey={`stats.${index}.stat_card`} key={index}>
                   <Heading elementKey={`stats.${index}.number`} />
                   <Typography elementKey={`stats.${index}.label`} />
                 </Box>

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

@@ -9,7 +9,8 @@ export const DEFAULT_CONTENT = {
   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",
+  ctas_levoGroup: null,
+  ctas: [{ cta: "Built With Us" }, { cta: "Learn More" }],
   stats_section: null,
   header_section: null,
   section_title: "Who we are",
@@ -43,26 +44,51 @@ 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",
+  config: {
+    section_title: {
+      selectedVariants: {
+        Typography_Variants: "Small",
       },
-      tablet: {
-        filter: "none",
+    },
+    section_description: {
+      selectedVariants: {
+        Typography_Variants: "Large",
       },
     },
+    stats: [
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    ],
+  },
+  styles: {
+    layout: {},
+    container: {},
     content_wrapper: {
       display: "block",
     },
@@ -90,42 +116,25 @@ export const defaultStats2Variant: IBlockLayouts = {
       },
     },
     section_title: {
-      "font-size": "xs",
-      "font-weight": "600",
-      color: "text-1",
+      color: "brandSecondaryForeground",
       "margin-bottom": "lg",
-      "background-color": "background-2",
+      "background-color": "brandSecondary",
       "padding-top": "xs",
       "padding-bottom": "xs",
       "padding-left": "base",
       "padding-right": "base",
       "border-radius": "100px",
       display: "inline-block",
-      mobile: {
-        "font-size": "xs",
-      },
-      filter: "none",
+      "font-weight": 600,
     },
     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",
@@ -182,8 +191,17 @@ export const defaultStats2Variant: IBlockLayouts = {
     description: {
       display: "none",
     },
-    cta: {
-      display: "none",
-    },
+    ctas_levoGroup: {
+      display: "flex",
+      "flex-direction": "row",
+      "column-gap": "md",
+      "row-gap": "md",
+      "flex-wrap": "wrap",
+      "align-items": "center",
+    },
+    ctas: Array(2)
+      .fill(0)
+      .map(() => ({})),
+    stats: [{}, {}, {}, {}],
   },
 };

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

@@ -6,19 +6,56 @@ 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",
+  config: {
+    small_title: {
+      selectedVariants: {
+        Typography_Variants: "Lead",
+      },
+    },
+    description: {
+      selectedVariants: {
+        Typography_Variants: "Large",
+      },
     },
-    container: {
-      "max-width": "1280px",
-      "margin-left": "auto",
-      "margin-right": "auto",
+    stats: [
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+      {
+        number: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    ],
+    main_title: {
+      selectedVariants: {
+        Heading_Level: "H4",
+      },
     },
+  },
+  styles: {
+    layout: {},
+    container: {},
     content_wrapper: {
       display: "grid",
       "grid-template-columns": "repeat(2, minmax(0, 1fr))",
@@ -39,12 +76,9 @@ export const heroStats2Variant: IBlockLayouts = {
       "align-items": "flex-start",
     },
     small_title: {
-      "font-size": "xl",
-      "font-weight": "600",
+      "font-weight": 600,
       color: "text-1",
       "margin-bottom": "base",
-      "padding-top": "none",
-      "padding-bottom": "none",
       "padding-left": "base",
       "padding-right": "base",
       "border-radius": "100px",
@@ -52,26 +86,13 @@ export const heroStats2Variant: IBlockLayouts = {
       "margin-top": "xs",
     },
     main_title: {
-      "font-size": "3xl",
-      "font-weight": "700",
-      color: "text-1",
+      "font-weight": 700,
       "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",
-      },
+      "font-weight": 400,
     },
-
     stats_section: {
       display: "block",
     },
@@ -126,7 +147,7 @@ export const heroStats2Variant: IBlockLayouts = {
     horizontal_divider: {
       width: "60px",
       height: "2px",
-      "background-color": " #00C896",
+      "background-color": " brand",
       "padding-top": "none",
       "padding-bottom": "none",
       "margin-top": "none",
@@ -138,5 +159,17 @@ export const heroStats2Variant: IBlockLayouts = {
       "align-items": "center",
       "flex-direction": "row",
     },
+    stats: [{}, {}, {}, {}],
+    ctas_levoGroup: {
+      display: "flex",
+      "flex-direction": "row",
+      "column-gap": "md",
+      "row-gap": "md",
+      "flex-wrap": "wrap",
+      "align-items": "center",
+    },
+    ctas: Array(2)
+      .fill(0)
+      .map(() => ({})),
   },
 };

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

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