@levo-so/blocks 0.1.2 → 0.1.52

package/src/blocks/hero/hero-10.schema.ts

@@ -0,0 +1,175 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  content_wrapper: null,
+  title: "Building Systems for Better Businesses",
+  description:
+    "<p>Over 25 years of ERP expertise, delivering 500+ successful implementations worldwide.</p>",
+  hero_ctas: [
+    {
+      button: "Get Started",
+    },
+  ],
+};
+
+export type IHero10Content = typeof DEFAULT_CONTENT;
+
+export const Hero10: IBlock = {
+  category_id: "hero",
+  title: "Hero 10",
+  key: "hero-10",
+  version: "v1",
+  prompt_description:
+    "Simple hero with heading, description and CTA button in a flex container",
+  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: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description: "Main heading for the hero section",
+        min_characters: 24,
+        max_characters: 48,
+      },
+    },
+    {
+      key: "text_cta_container",
+      label: "Text CTA Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Supporting description text",
+        min_characters: 80,
+        max_characters: 180,
+      },
+    },
+    {
+      key: "hero_ctas",
+      label: "Call to Action",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description: "Call-to-action button",
+            min_characters: 8,
+            max_characters: 18,
+          },
+        },
+      ],
+    },
+  ],
+
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "3xl",
+          "padding-right": "4xl",
+          "padding-bottom": "3xl",
+          "padding-left": "4xl",
+          tablet: {
+            "padding-top": "2xl",
+            "padding-right": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          flex: "1",
+          "max-width": "auto",
+          "padding-left": "none",
+          "padding-right": "none",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "row-gap": "lg",
+          width: "100%",
+        },
+        title: {
+          color: "text-1",
+          "font-size": "5xl",
+          "font-weight": "700",
+          mobile: {
+            "font-size": "3xl",
+          },
+          width: "100%",
+          "max-width": "400px",
+        },
+        text_cta_container: {
+          display: "flex",
+          width: "fit-content",
+          "align-items": "start",
+          "justify-content": "start",
+          "row-gap": "lg",
+          "column-gap": "lg",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "start",
+            "justify-content": "flex-start",
+          },
+          "flex-direction": "column",
+        },
+        description: {
+          color: "text-2",
+          "font-size": "lg",
+          flex: "1",
+          "max-width": "400px",
+        },
+        hero_ctas_levoGroup: {
+          display: "flex",
+          "flex-shrink": "0",
+        },
+        hero_ctas: [
+          {
+            button: {},
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/hero/hero-10.tsx

@@ -0,0 +1,35 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IHero10Content } from "./hero-10.schema";
+
+const Hero10: React.FC<ILevoBlockBaseProps<IHero10Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        <Heading elementKey="title" />
+        <Box elementKey="text_cta_container">
+          <Typography elementKey="description" />
+          <Box elementKey="hero_ctas_levoGroup" data-levo_group>
+            {(content?.hero_ctas || [])?.map((_, index) => (
+              <Button
+                elementKey={`hero_ctas.${index}.button`}
+                key={`hero-10-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero10;

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

@@ -2,7 +2,6 @@ import type { IBlock } from "@levo-so/studio";
 
 const DEFAULT_CONTENT = {
   layout: null,
-  container: null,
   content_wrapper: null,
   title: "Where Freshers Prepare and Land Their First Job",
   accent_heading: "India's Largest Career Network Platform",
@@ -12,49 +11,49 @@ const DEFAULT_CONTENT = {
   image_desktop: {
     id: "QsAs4Om9TjJX",
     location:
-      "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
+      "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
     mimetype: "image/png",
     kind: "image",
     srcset: {
       "1080w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
       "1200w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
       "1920w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
       "320w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
       "640w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
       "750w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
       "828w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp",
-      path: "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp 1920w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp 320w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp 640w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp 750w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp 828w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp 1080w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp 1200w",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp",
+      path: "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp 1920w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp 320w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp 640w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp 750w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp 828w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp 1080w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp 1200w",
     },
   },
   image_mobile: {
     id: "QsAs4Om9TjJX",
     location:
-      "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
+      "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
     mimetype: "image/png",
     kind: "image",
     srcset: {
       "1080w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
       "1200w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
       "1920w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
       "320w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
       "640w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
       "750w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
       "828w":
-        "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp",
-      path: "https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp 1920w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp 320w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp 640w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp 750w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp 828w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp 1080w, https://space.levo.in.net/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp 1200w",
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp",
+      path: "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp 1920w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp 320w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp 640w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp 750w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-828w.webp 828w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp 1080w, https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp 1200w",
     },
   },
 };
@@ -140,6 +139,24 @@ export const Hero2: IBlock = {
         max_characters: 32,
       },
     },
+    {
+      key: "hero_ctas",
+      label: "CTA Group",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description: "Call-to-action button",
+            min_characters: 8,
+            max_characters: 18,
+          },
+        },
+      ],
+    },
     {
       key: "spacer",
       label: "Spacer",
@@ -188,129 +205,68 @@ export const Hero2: IBlock = {
       title: "Default",
       key: "default",
       styles: {
-        layout: {
-          width: "100%",
-          "padding-bottom": "13xl",
-          "background-color": "white",
-        },
+        layout: {},
         container: {
-          "margin-left": "auto",
-          "margin-right": "auto",
-          width: "100%",
-          position: "relative",
-          "background-color": "brand",
           "padding-top": "11xl",
-          "padding-bottom": "24xl",
+          "padding-bottom": "10xl",
           "media:max:768px": {
             "padding-top": "3xl",
-            "padding-bottom": "22xl",
-          },
-          "media:max:480px": {
-            "padding-top": "3xl",
-            "padding-bottom": "15xl",
-            "max-width": "none",
-            "object-fit": "none",
-            "padding-left": "md",
-            "padding-right": "md",
+            "padding-bottom": "6xl",
           },
         },
         content_wrapper: {
-          position: "relative",
           display: "flex",
           "flex-direction": "column",
           "align-items": "center",
           "justify-content": "center",
-          "row-gap": "xl",
-          "column-gap": "xl",
+          "row-gap": "lg",
+          "column-gap": "lg",
         },
         accent_heading: {
           "text-align": "center",
-          "font-size": "base",
-          "font-weight": 700,
           "text-transform": "uppercase",
-          "line-height": 1.625,
-          color: "brandSecondary",
+          color: "text-2",
         },
         title: {
-          "max-width": "66rem",
-          "margin-left": "auto",
-          "margin-right": "auto",
           "text-align": "center",
-          "font-size": "6xl",
-          "font-weight": 700,
-          "line-height": 1.5,
-          color: "brandForeground",
-          "media:max:480px": {
-            "font-size": "4xl",
-            "line-height": 1.5,
-          },
         },
         sub_title: {
-          "max-width": "42rem",
-          "margin-left": "auto",
-          "margin-right": "auto",
-          "padding-left": "5xs",
-          "padding-right": "5xs",
+          "max-width": "600px",
           "text-align": "center",
-          "font-size": "lg",
-          "font-weight": 400,
           "line-height": 1.625,
-          color: "brandForeground",
-        },
-        button: {
-          "z-index": "10",
-          "border-radius": "3xl",
-          "padding-top": "base",
-          "padding-right": "4xl",
-          "padding-bottom": "base",
-          "padding-left": "4xl",
-          "text-align": "center",
-          "font-size": "base",
-          "font-weight": 600,
-          "line-height": 1.625,
-          "background-color": "brandSecondary",
-          color: "brandSecondaryForeground",
-          _hover: {
-            opacity: 0.85,
-          },
-        },
-        spacer: {
-          width: "100%",
-          height: "50%",
-        },
-        image_wrapper: {
-          position: "absolute",
-          "z-index": "0",
-          top: "100%",
-          display: "flex",
-          "align-items": "center",
-          "justify-content": "center",
-          "media:min:1024px": {
-            top: "80%",
-          },
         },
+        button: {},
+        spacer: {},
+        image_wrapper: {},
         image_desktop: {
           "object-fit": "contain",
           display: "block",
-          "media:min:640px": {
+          "border-radius": "base",
+          tablet: {
             display: "block",
           },
-          "media:max:480px": {
+          mobile: {
             display: "none",
           },
-          width: "100%",
-          height: "auto",
         },
         image_mobile: {
           "object-fit": "contain",
-          display: "block",
-          "media:min:640px": {
+          display: "none",
+          "border-radius": "base",
+          tablet: {
             display: "none",
           },
+          mobile: {},
         },
       },
       content: DEFAULT_CONTENT,
-      config: {},
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
     },
   ],
 };

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

@@ -11,7 +11,7 @@ import {
 
 import type { IHero2Content } from "./hero-2.schema";
 
-const Hero2: React.FC<ILevoBlockBaseProps<IHero2Content>> = () => (
+const Hero2: React.FC<ILevoBlockBaseProps<IHero2Content>> = ({ content }) => (
   <Section elementKey="layout">
     {/* <Box elementKey="background"> */}
     <Container elementKey="container">
@@ -23,8 +23,16 @@ const Hero2: React.FC<ILevoBlockBaseProps<IHero2Content>> = () => (
         <Typography elementKey="sub_title" />
 
         <Button elementKey="button" />
-
-        <Box elementKey="spacer" />
+        <Box elementKey="hero_ctas_levoGroup" data-levo_group>
+          {(content?.hero_ctas || [])?.map((_: any, index: any) => (
+            <Button
+              elementKey={`hero_ctas.${index}.button`}
+              key={`hero-10-cta-${index}`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
+        {/* <Box elementKey="spacer" /> */}
 
         <Box elementKey="image_wrapper">
           <Image