@levo-so/blocks 0.1.2 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levo-so/blocks",
-  "version": "0.1.2",
+  "version": "0.1.52",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Set of blocks for Levo studio",
   "type": "module",
@@ -34,7 +34,7 @@
     "@levo/ts-config": "workspace:*",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   },
   "main": "./src/index.ts",
   "exports": {

package/src/blocks/about-us/about-us-1.schema.ts

@@ -353,23 +353,21 @@ export const AboutUs1: IBlock = {
           "justify-content": "center",
         },
         label: {
-          "font-weight": 500,
+          color: "text-2",
           "margin-bottom": "xs",
-          "font-size": "sm",
           mobile: {
             "margin-bottom": "3xs",
           },
         },
         title: {
-          "font-size": "4xl",
+          color: "text-1",
           "margin-bottom": "md",
           mobile: {
-            "font-size": "3xl",
             "margin-bottom": "xs",
           },
         },
         description: {
-          "font-size": "base",
+          color: "text-2",
           "margin-bottom": "md",
           mobile: {
             "margin-bottom": "xs",
@@ -389,7 +387,16 @@ export const AboutUs1: IBlock = {
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
     {
       key: "cards",
@@ -520,23 +527,21 @@ export const AboutUs1: IBlock = {
           filter: "none",
         },
         label: {
-          "font-weight": 500,
+          color: "text-2",
           "margin-bottom": "xs",
-          "font-size": "sm",
           mobile: {
             "margin-bottom": "3xs",
           },
         },
         title: {
-          "font-size": "4xl",
+          color: "text-1",
           "margin-bottom": "md",
           mobile: {
-            "font-size": "3xl",
             "margin-bottom": "xs",
           },
         },
         description: {
-          "font-size": "base",
+          color: "text-2",
           "margin-bottom": "md",
           mobile: {
             "margin-bottom": "xs",
@@ -557,7 +562,16 @@ export const AboutUs1: IBlock = {
         },
       },
       content: CARDS_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };

package/src/blocks/about-us/about-us-2.schema.ts

@@ -0,0 +1,269 @@
+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,
+  main_content: null,
+  media_section: null,
+  media_column: null,
+  firstMedia: DEFAULT_IMAGE,
+  secondMedia: DEFAULT_IMAGE,
+  thirdMedia: DEFAULT_IMAGE,
+  content_section: null,
+  title: "About Me",
+  description:
+    "Guiding You Towards Healthier Living. With a passion for nutrition and evidence-based dietetics, I help individuals make sustainable lifestyle changes that improve health, energy, and overall well-being.",
+  stats: [
+    {
+      stat_item: null,
+      number: "200+",
+      label: "Clients Guided",
+    },
+    {
+      stat_item: null,
+      number: "10+",
+      label: "Years Experience",
+    },
+    {
+      stat_item: null,
+      number: "5+",
+      label: "Organizations",
+    },
+  ],
+};
+
+export type IAboutUs2Content = typeof DEFAULT_CONTENT;
+
+export const AboutUs2: IBlock = {
+  category_id: "about-us",
+  title: "About Us 2",
+  key: "about-us-2",
+  version: "v1",
+  prompt_description:
+    "About section with media gallery on left and content with stats on right. Features title, description and repeatable statistics with numbers and labels.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "main_content",
+      label: "Main Content",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "media_section",
+      label: "Media Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "media_column",
+      label: "Media Column",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "firstMedia",
+      label: "Media 1",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "secondMedia",
+      label: "Media 2",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "thirdMedia",
+      label: "Media 3",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "content_section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "stats",
+      label: "Stats",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "stat_item",
+          label: "Stat Item",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "number",
+          label: "Number",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+        },
+        container: {
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        main_content: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "5xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+          },
+        },
+        media_section: {
+          display: "flex",
+          "column-gap": "xs",
+          width: "50%",
+          tablet: {
+            width: "100%",
+            "justify-content": "center",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+        },
+        firstMedia: {
+          width: "60%",
+          "border-radius": "xl",
+          mobile: {
+            width: "100%",
+          },
+        },
+        media_column: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          width: "40%",
+          mobile: {
+            width: "100%",
+            "flex-direction": "row",
+            "column-gap": "xs",
+          },
+        },
+        secondMedia: {
+          "border-radius": "xl",
+          mobile: {
+            width: "50%",
+          },
+        },
+        thirdMedia: {
+          "border-radius": "xl",
+          mobile: {
+            width: "50%",
+          },
+        },
+        content_section: {
+          width: "50%",
+          tablet: {
+            width: "100%",
+            "text-align": "center",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "lg",
+          tablet: {
+            "font-size": "3xl",
+          },
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+        description: {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.6",
+          "margin-bottom": "2xl",
+        },
+        stats_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "row-gap": "lg",
+          "justify-content": "space-between",
+        },
+        stat_item: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "base",
+          tablet: {
+            "justify-content": "center",
+          },
+        },
+        number: {
+          "font-size": "3xl",
+          "font-weight": "700",
+          color: "text-1",
+          tablet: {
+            "font-size": "2xl",
+          },
+        },
+        label: {
+          "font-size": "base",
+          color: "text-2",
+          "font-weight": "500",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/about-us/about-us-2.tsx

@@ -0,0 +1,47 @@
+import {
+  type ILevoBlockBaseProps,
+  Section,
+  Container,
+  Box,
+  Heading,
+  Typography,
+  Media,
+} from "@levo-so/studio";
+
+import type { IAboutUs2Content } from "./about-us-2.schema";
+
+const AboutUs2: React.FC<ILevoBlockBaseProps<IAboutUs2Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main_content">
+        <Box elementKey="media_section">
+          <Media elementKey="firstMedia" alt="About image" />
+          <Box elementKey="media_column">
+            <Media elementKey="secondMedia" alt="About image" />
+            <Media elementKey="thirdMedia" alt="About image" />
+          </Box>
+        </Box>
+        <Box elementKey="content_section">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+          <Box elementKey="stats_levoGroup" data-levo_group>
+            {(content?.stats ?? []).map((_, index) => (
+              <Box
+                key={index}
+                data-levo_group_item
+                elementKey={`stats.${index}.stat_item`}
+              >
+                <Heading elementKey={`stats.${index}.number`} />
+                <Typography elementKey={`stats.${index}.label`} />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default AboutUs2;

package/src/blocks/blogs/blog-listing-1.schema.ts

@@ -62,13 +62,17 @@ const DEFAULT_CONTENT = {
   blogs: Array(3)
     ?.fill(0)
     ?.map((_) => BLOG_CONTENT),
+  "pagination-wrapper": null,
+  "pagination-left": "Back",
+  "pagination-text": "",
+  "pagination-right": "Next",
 };
 
 const BLOG_STYLE = {
   blog: {
     display: "flex",
     "column-gap": "lg",
-    "border-radius": "lg",
+    "border-radius": "base",
     "border-width": "1.5px",
     "border-style": "solid",
     "border-color": "border",
@@ -81,7 +85,7 @@ const BLOG_STYLE = {
   cover_image: {
     height: "184px",
     width: "64",
-    "border-radius": "md",
+    "border-radius": "base",
     "object-fit": "cover",
   },
   blog_content_wrapper: {
@@ -122,8 +126,6 @@ const BLOG_STYLE = {
     "row-gap": "3xs",
   },
   title: {
-    "font-size": "xl",
-    "font-weight": "bold",
     color: "text-1",
   },
   description: {
@@ -142,8 +144,6 @@ const BLOG_STYLE = {
     "object-fit": "cover",
   },
   author_name: {
-    "font-size": "base",
-    "font-weight": "semibold",
     color: "text-1",
   },
   author_description: {
@@ -363,6 +363,46 @@ export const BlogListing1: IBlock = {
         },
       ],
     },
+
+    {
+      key: "pagination-wrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      // Layout grouping only – no hint needed
+    },
+    {
+      key: "pagination-left",
+      label: "Pagination Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the previous page of blog cards. Keep the label brief, such as 'Previous' or a left arrow. Tone should be neutral and functional.",
+        min_characters: 5,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-text",
+      label: "Pagination text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays current and total page number in the paginator, e.g. '1/3' or 'Page 2 of 4'. Should be minimal, clear, and unambiguous.",
+        min_characters: 3,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-right",
+      label: "Pagination Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the next page of blog cards. Should be concise, such as 'Next' or a right arrow. Neutral tone.",
+        min_characters: 4,
+        max_characters: 8,
+      },
+    },
   ],
   layouts: [
     {
@@ -375,7 +415,7 @@ export const BlogListing1: IBlock = {
           "align-items": "center",
           "justify-content": "center",
           gap: "xl",
-          "border-radius": "2xl",
+          "border-radius": "base",
           "background-color": "white",
           "padding-left": "8xl",
           "padding-right": "8xl",
@@ -396,8 +436,6 @@ export const BlogListing1: IBlock = {
           "row-gap": "2xs",
         },
         title: {
-          "font-size": "3xl",
-          "font-weight": "bold",
           color: "text-1",
         },
         description: {
@@ -411,9 +449,25 @@ export const BlogListing1: IBlock = {
           "row-gap": "xl",
         },
         blogs: BLOGS_STYLES,
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
     },
   ],
 };