@levo-so/blocks 0.1.54 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levo-so/blocks",
-  "version": "0.1.54",
+  "version": "0.1.59",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Set of blocks for Levo studio",
   "type": "module",
@@ -24,7 +24,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "embla-carousel-auto-scroll": "8.6.0",
     "embla-carousel-react": "8.6.0",
     "lucide-react": "0.424.0"

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

@@ -127,6 +127,15 @@ export const AboutUs1: IBlock = {
           "Horizontally groups and vertically aligns the heading, description, features, and call-to-action content to the right of the hero image.",
       },
     },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Horizontally groups and vertically aligns the heading, description, features, and call-to-action content to the right of the hero image.",
+      },
+    },
     {
       key: "label",
       label: "Label",
@@ -134,6 +143,7 @@ export const AboutUs1: IBlock = {
       hint: {
         prompt_description:
           "A brief section identifier or label (e.g., 'About Us') shown above the headline, using a muted or subtle style. Keep tone straightforward and concise.",
+        usecase: "label",
         min_characters: 5,
         max_characters: 24,
       },
@@ -145,6 +155,7 @@ export const AboutUs1: IBlock = {
       hint: {
         prompt_description:
           "A bold, high-impact headline that captures attention and communicates the agency's mission, benefit, or unique selling proposition. Should be motivating, clear, and direct.",
+        usecase: "main_title",
         min_characters: 35,
         max_characters: 75,
       },
@@ -156,6 +167,7 @@ export const AboutUs1: IBlock = {
       hint: {
         prompt_description:
           "A concise yet informative paragraph (1-2 sentences) that elaborates on the section headline with context about the agency, their experience or services. Maintain a professional and approachable tone.",
+        usecase: "description",
         min_characters: 60,
         max_characters: 180,
       },
@@ -200,6 +212,7 @@ export const AboutUs1: IBlock = {
           hint: {
             prompt_description:
               "A brief, benefit-driven statement or phrase emphasizing what the agency offers (e.g., 'Growing Businesses', 'Success Campaign'). Tone should be direct and positive.",
+            usecase: "feature",
             min_characters: 15,
             max_characters: 36,
           },
@@ -223,6 +236,7 @@ export const AboutUs1: IBlock = {
           hint: {
             prompt_description:
               "A primary, visually distinct action button that encourages users to take the next step (such as learning more or contacting the agency). Copy should be action-oriented and concise.",
+            usecase: "cta_button",
             min_characters: 8,
             max_characters: 22,
           },

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

@@ -19,8 +19,10 @@ const AboutUs1: React.FC<ILevoBlockBaseProps<IAboutUs1Content>> = ({
     <Container elementKey="container">
       <Media alt="media" elementKey="media" />
       <Box elementKey="contentWrapper">
-        <Typography elementKey="label" />
-        <Heading elementKey="title" />
+        <Box elementKey="textWrapper">
+          <Typography elementKey="label" />
+          <Heading elementKey="title" />
+        </Box>
         <Typography elementKey="description" />
 
         <Box elementKey="features_levoGroup" data-levo_group>

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

@@ -111,11 +111,25 @@ export const AboutUs2: IBlock = {
       key: "title",
       label: "Title",
       field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main section heading that introduces the about section, typically personalized (e.g., 'About Me') or brand-focused (e.g., 'About Us').",
+        usecase: "main_title",
+        min_characters: 8,
+        max_characters: 50,
+      },
     },
     {
       key: "description",
       label: "Description",
       field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Descriptive paragraph explaining the mission, background, or expertise. Should be informative yet engaging, establishing credibility and connection.",
+        usecase: "description",
+        min_characters: 80,
+        max_characters: 250,
+      },
     },
     {
       key: "stats",
@@ -132,11 +146,45 @@ export const AboutUs2: IBlock = {
           key: "number",
           label: "Number",
           field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Statistical number showcasing achievement or credibility (e.g., '200+', '10+', '5+'). Should be impactful and concise.",
+            usecase: "stat_number",
+            min_characters: 2,
+            max_characters: 10,
+          },
         },
         {
           key: "label",
           label: "Label",
           field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Description that explains what the statistic represents (e.g., 'Clients Guided', 'Years Experience', 'Organizations'). Should be clear and contextual.",
+            usecase: "stat_label",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+      ],
+    },
+    {
+      key: "ctas",
+      label: "CTA",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary call-to-action button encouraging visitor engagement (e.g., 'Learn More', 'Get Started', 'Contact Us'). Should be action-oriented.",
+            usecase: "cta_button",
+            min_characters: 8,
+            max_characters: 22,
+          },
         },
       ],
     },

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

@@ -6,6 +6,7 @@ import {
   Heading,
   Typography,
   Media,
+  Button,
 } from "@levo-so/studio";
 
 import type { IAboutUs2Content } from "./about-us-2.schema";
@@ -38,6 +39,11 @@ const AboutUs2: React.FC<ILevoBlockBaseProps<IAboutUs2Content>> = ({
               </Box>
             ))}
           </Box>
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {(content?.ctas ?? []).map((_: any, index: any) => (
+              <Button key={index} elementKey={`ctas.${index}.button`} />
+            ))}
+          </Box>
         </Box>
       </Box>
     </Container>

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

@@ -190,6 +190,7 @@ export const BlogListing1: IBlock = {
       hint: {
         prompt_description:
           "Primary headline for the blog/news section. Should be concise, attention-grabbing, and indicate trending or popular content for this month. Use a confident, informative, energetic tone.",
+        usecase: "main_title",
         min_characters: 20,
         max_characters: 35,
       },
@@ -201,6 +202,7 @@ export const BlogListing1: IBlock = {
       hint: {
         prompt_description:
           "Short supporting introduction for the section, summarizing the purpose or value of the featured content. Should be informative, aspirational, and encourage browsing. 1-2 lines.",
+        usecase: "description",
         min_characters: 60,
         max_characters: 140,
       },
@@ -272,6 +274,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Publish time information for the blog post. Should be brief (e.g. 'Today', '6 minutes ago', or 'June 5'). Neutral, clear style.",
+            usecase: "date",
             min_characters: 8,
             max_characters: 20,
           },
@@ -289,6 +292,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Blog article headline. Clear, bold, and appealing. Should entice users to read. Ideally not more than one line in the card, use a friendly, magazine-like tone.",
+            usecase: "title",
             min_characters: 35,
             max_characters: 60,
           },
@@ -300,6 +304,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Short excerpt or summary of the blog post content. Should be 1-2 sentences, informative, and prompt curiosity. Keep it concise and editorial.",
+            usecase: "description",
             min_characters: 60,
             max_characters: 130,
           },
@@ -335,6 +340,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Author's full name, as displayed in byline. Preferably real or realistic names.",
+            usecase: "author",
             min_characters: 5,
             max_characters: 25,
           },
@@ -346,6 +352,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Short description or job title of the author, e.g., 'Content Strategist', 'Lifestyle Editor'. Keep it short and professional.",
+            usecase: "designation",
             min_characters: 10,
             max_characters: 30,
           },
@@ -357,6 +364,7 @@ export const BlogListing1: IBlock = {
           hint: {
             prompt_description:
               "Primary action button label for each article card. Should prompt the user to read or learn more, concise (1-3 words), action-oriented.",
+            usecase: "button",
             min_characters: 6,
             max_characters: 16,
           },
@@ -377,6 +385,7 @@ export const BlogListing1: IBlock = {
       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.",
+        usecase: "button",
         min_characters: 5,
         max_characters: 12,
       },
@@ -399,6 +408,7 @@ export const BlogListing1: IBlock = {
       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.",
+        usecase: "button",
         min_characters: 4,
         max_characters: 8,
       },