@levo-so/blocks 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levo-so/blocks",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Set of blocks for Levo studio",
   "type": "module",
@@ -9,16 +9,13 @@
     "access": "public"
   },
   "files": [
-    "dist/**/*",
-    "!dist/**/*.d.ts.map",
+    "src/**/*",
     "package.json"
   ],
   "scripts": {
-    "build": "tsc",
     "clean": "rimraf dist node_modules .turbo",
     "check-types": "tsc --noEmit",
-    "lint": "eslint",
-    "prepublishOnly": "npm run build"
+    "lint": "eslint"
   },
   "peerDependencies": {
     "@levo-so/react": "workspace:*",
@@ -39,9 +36,8 @@
     "@types/react-dom": "19.1.6",
     "typescript": "5.8.2"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./src/index.ts"
   }
 }

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

@@ -0,0 +1,563 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  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,
+
+  media: DUMMY_IMAGE,
+
+  contentWrapper: null,
+  label: "About Us",
+  title: "Transform Your Digital Presence with Our Agency",
+  description:
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
+  features: [
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "Promote Your Product",
+    },
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "Growing Businesses",
+    },
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "Best Clients Satisfaction",
+    },
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "Learn from Clients feedback",
+    },
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "Success Campaign",
+    },
+    {
+      featureWrapper: null,
+      icon: DUMMY_IMAGE,
+      feature: "24/7 customer support",
+    },
+  ],
+  ctas: [
+    {
+      cta: "Discover More",
+    },
+  ],
+};
+
+const CARDS_CONTENT = {
+  layout: null,
+  container: null,
+  media: DUMMY_IMAGE,
+  contentWrapper: null,
+  label: "About Us",
+  title: "Transform Your Digital Presence with Our Agency",
+  description:
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
+  features: [],
+  ctas: [
+    {
+      cta: "Discover More",
+    },
+  ],
+};
+
+export type IAboutUs1Content = typeof DEFAULT_CONTENT;
+
+export const AboutUs1: IBlock = {
+  category_id: "about-us",
+  title: "About Us 1",
+  key: "about-us-1",
+  version: "v1",
+  prompt_description:
+    "Large image on the left with bold headline and description on the right, followed by a two-column grid of feature icons and a prominent call-to-action button beneath.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall two-column visual structure for a hero or about-us section, with an image/media on the left and text content with features and a call-to-action on the right.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Serves as the primary outer container, providing spacing, centralized alignment, and background color for the hero section.",
+      },
+    },
+    {
+      key: "media",
+      label: "Media",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "A large, visually prominent hero image or illustration on the left side, representing the essence of the agency's digital or creative identity. Should be square, clean, and aspirational with plenty of white space for a modern look.",
+        orientation: "square",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "contentWrapper",
+      label: "Content 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",
+      field_interface: "TypographyWidget",
+      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.",
+        min_characters: 5,
+        max_characters: 24,
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      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.",
+        min_characters: 35,
+        max_characters: 75,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      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.",
+        min_characters: 60,
+        max_characters: 180,
+      },
+    },
+    {
+      key: "features",
+      label: "Features",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "A set of succinct feature highlights or agency advantages, each represented with an icon and a short text. Presented in two columns and three rows, for a total of six items.",
+        min_items: 6,
+        max_items: 6,
+      },
+      fields: [
+        {
+          key: "featureWrapper",
+          label: "Feature Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container that horizontally aligns a feature's icon and its label, ensuring consistent spacing within the features grid.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "A small, simple, square icon that visually represents a specific feature or benefit. Must be clearly legible at small sizes.",
+            size: "icon",
+            orientation: "square",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "feature",
+          label: "Feature",
+          field_interface: "TypographyWidget",
+          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.",
+            min_characters: 15,
+            max_characters: 36,
+          },
+        },
+      ],
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "One or more prominent call-to-action buttons, encouraging the visitor to engage further (e.g., 'Discover More').",
+      },
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          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.",
+            min_characters: 8,
+            max_characters: 22,
+          },
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          tablet: {
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+          },
+        },
+        container: {
+          display: "flex",
+          "column-gap": "8xl",
+          "padding-right": "3xl",
+          "padding-left": "3xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            "padding-left": "none",
+            "padding-right": "none",
+          },
+        },
+        media: {
+          width: "40%",
+          height: "400px",
+          "border-radius": "base",
+          "box-shadow": "default",
+          tablet: {
+            width: "100%",
+          },
+          mobile: {
+            height: "300px",
+          },
+        },
+        features: [
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+        ],
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "column-gap": "none",
+          "row-gap": "none",
+          "justify-content": "center",
+        },
+        label: {
+          "font-weight": 500,
+          "margin-bottom": "xs",
+          "font-size": "sm",
+          mobile: {
+            "margin-bottom": "3xs",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "margin-bottom": "md",
+          mobile: {
+            "font-size": "3xl",
+            "margin-bottom": "xs",
+          },
+        },
+        description: {
+          "font-size": "base",
+          "margin-bottom": "md",
+          mobile: {
+            "margin-bottom": "xs",
+          },
+        },
+        features_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "none",
+          "row-gap": "xs",
+          "margin-bottom": "2xl",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "margin-bottom": "base",
+            "row-gap": "2xs",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+    {
+      key: "cards",
+      title: "Cards",
+      styles: {
+        layout: {
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          tablet: {
+            "padding-left": "4xl",
+            "padding-right": "4xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            filter: "none",
+          },
+          mobile: {
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+          },
+          filter: "none",
+          "background-color": "background-1",
+        },
+        container: {
+          display: "flex",
+          "column-gap": "8xl",
+          "padding-right": "3xl",
+          "padding-left": "3xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            "padding-left": "none",
+            "padding-right": "none",
+          },
+          filter: "none",
+          "flex-direction": "row-reverse",
+          "background-color": "white",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+        },
+        media: {
+          width: "50%",
+          height: "auto",
+          "border-radius": "base",
+          tablet: {
+            width: "100%",
+          },
+          mobile: {
+            height: "300px",
+          },
+          filter: "none",
+        },
+        features: [
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+          {
+            icon: {
+              width: "24px",
+              height: "24px",
+            },
+            featureWrapper: {
+              display: "flex",
+              "column-gap": "md",
+              "align-items": "center",
+            },
+          },
+        ],
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "column-gap": "none",
+          "row-gap": "none",
+          "justify-content": "center",
+          filter: "none",
+        },
+        label: {
+          "font-weight": 500,
+          "margin-bottom": "xs",
+          "font-size": "sm",
+          mobile: {
+            "margin-bottom": "3xs",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "margin-bottom": "md",
+          mobile: {
+            "font-size": "3xl",
+            "margin-bottom": "xs",
+          },
+        },
+        description: {
+          "font-size": "base",
+          "margin-bottom": "md",
+          mobile: {
+            "margin-bottom": "xs",
+          },
+        },
+        features_levoGroup: {
+          display: "block",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "none",
+          "row-gap": "xs",
+          "margin-bottom": "2xl",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            "margin-bottom": "base",
+            "row-gap": "2xs",
+          },
+          filter: "none",
+        },
+      },
+      content: CARDS_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,53 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Media,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IAboutUs1Content } from "./about-us-1.schema";
+
+const AboutUs1: React.FC<ILevoBlockBaseProps<IAboutUs1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Media alt="media" elementKey="media" />
+      <Box elementKey="contentWrapper">
+        <Typography elementKey="label" />
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+
+        <Box elementKey="features_levoGroup" data-levo_group>
+          {Array.isArray(content?.features) &&
+            content?.features.map((feature, index) => (
+              <Box
+                key={`about-us-1-feature-${index}`}
+                elementKey={`features.${index}.featureWrapper`}
+              >
+                <Icon elementKey={`features.${index}.icon`} />
+                <Typography elementKey={`features.${index}.feature`} />
+              </Box>
+            ))}
+        </Box>
+
+        <Box elementKey="ctas_levoGroup" data-levo_group>
+          {(content.ctas ?? []).map((_, index) => (
+            <Button
+              elementKey={`ctas.${index}.cta`}
+              key={`logos-1-cta-${index}`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default AboutUs1;