@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,52 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Media,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IHero1Content } from "./hero-1.schema";
+
+const Hero1: React.FC<ILevoBlockBaseProps<IHero1Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        <Box elementKey="text_wrapper">
+          <Box elementKey="label_wrapper">
+            <Box elementKey="horizontal_divider" />
+            <Typography elementKey="label" />
+          </Box>
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="hero_ctas_levoGroup" data-levo_group>
+          {(content?.hero_ctas || [])?.map((_, index) => (
+            <Button
+              elementKey={`hero_ctas.${index}.button`}
+              key={`hero-1-cta-${index}`}
+              data-levo_group_item
+            />
+          ))}
+        </Box>
+      </Box>
+      <Box elementKey="hero_images_levoGroup" data-levo_group>
+        {(content?.hero_images || [])?.map((_, index) => (
+          <Media
+            elementKey={`hero_images.${index}.image`}
+            key={`hero-1-image-${index}`}
+            alt={`hero image ${index + 1}`}
+            width={559}
+            height={400}
+            data-levo_group_item
+          />
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero1;

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

@@ -0,0 +1,272 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  content_wrapper: null,
+  title: "Where Freshers Prepare and Land Their First Job",
+  accent_heading: "India's Largest Career Network Platform",
+  sub_title:
+    "Curated exclusively for freshers, LineupX connect freshers and students with over 500 top employers actively recruiting from 100+ academic institutes. Our AI-powered tools help prepare and match you to maximize the opportunities for a perfect first job.",
+  button: "Book a Demo",
+  image_desktop: {
+    id: "QsAs4Om9TjJX",
+    location:
+      "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
+    mimetype: "image/png",
+    kind: "image",
+    srcset: {
+      "1080w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
+      "1200w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
+      "1920w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
+      "320w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
+      "640w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
+      "750w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
+      "828w":
+        "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://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX.png",
+    mimetype: "image/png",
+    kind: "image",
+    srcset: {
+      "1080w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1080w.webp",
+      "1200w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1200w.webp",
+      "1920w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-1920w.webp",
+      "320w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-320w.webp",
+      "640w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-640w.webp",
+      "750w":
+        "https://static.levostg.online/WZZKMUBH/image-qW3YQ1Uv4K2dy-jfwQp72ZrINX-750w.webp",
+      "828w":
+        "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",
+    },
+  },
+};
+
+export type IHero2Content = typeof DEFAULT_CONTENT;
+
+export const Hero2: IBlock = {
+  category_id: "hero",
+  title: "Hero 2",
+  key: "hero-2",
+  version: "v1",
+  prompt_description:
+    "Hero section featuring a vibrant illustration of connected user profiles, interface elements, and company logos, suggesting networking and opportunity, placed below headline, subheadline, and a central call-to-action button.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structural layout of the hero section, typically a centered columnar block with accent heading, title, subtitle, call-to-action, and supporting visuals. Should maintain strong visual hierarchy and balanced spacing for a modern landing page.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main bounding container for the hero content. Ensures adequate horizontal margins and vertically centers content for desktop and mobile. Should maintain clarity and visual focus on the central text and CTA.",
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A wrapper providing padding and alignment for the hero section’s textual content and primary call-to-action. Ensures optimal legibility and separation from background or visual elements.",
+      },
+    },
+    {
+      key: "accent_heading",
+      label: "Accent Heading",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "A short, uppercase or emphasized phrase placed above the main headline to introduce the platform’s unique value or status. Should be concise, attention-grabbing, and use a confident, aspirational tone.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "The main headline of the hero section, designed to immediately communicate the core outcome or promise of the platform for freshers and students. Should be bold, clear, and aspirational.",
+        min_characters: 40,
+        max_characters: 80,
+      },
+    },
+    {
+      key: "sub_title",
+      label: "Sub Title",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "A descriptive paragraph summarizing the platform’s offering, tools, and unique advantages. Should elaborate on the headline, be informative and approachable, and fit as a supporting lead under the main title.",
+        min_characters: 120,
+        max_characters: 300,
+      },
+    },
+    {
+      key: "button",
+      label: "Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Primary call-to-action button. Clear, direct, and action-oriented to prompt users to book a demo or get started. Should use a friendly but confident tone and fit on one line.",
+        min_characters: 8,
+        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",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "An element to visually separate content blocks or add vertical spacing between the text content and the illustrative hero image, ensuring a balanced layout.",
+      },
+    },
+    {
+      key: "image_wrapper",
+      label: "Image Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A container for positioning and scaling the hero illustration or composite imagery, ensuring it aligns harmoniously with the surrounding text and background elements.",
+      },
+    },
+    {
+      key: "image_desktop",
+      label: "Hero Image Desktop",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Main illustrative or composite image for the hero section on desktop. Should visually reinforce the platform’s focus on freshers, students, and job opportunities. Orientation is landscape, size is large to cover significant horizontal space, with role as hero/lead illustrative visual.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "image_mobile",
+      label: "Hero Image Mobile",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Optimized version of the hero illustration or composite for mobile screens. Must be visually coherent with the desktop version but formatted for vertical (potrait) viewing, medium to large size, and serves as the visual focus for mobile hero sections.",
+        orientation: "portrait",
+        size: "medium",
+        usecase: "hero",
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {},
+        container: {
+          "padding-top": "11xl",
+          "padding-bottom": "10xl",
+          "media:max:768px": {
+            "padding-top": "3xl",
+            "padding-bottom": "6xl",
+          },
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          "row-gap": "lg",
+          "column-gap": "lg",
+        },
+        accent_heading: {
+          "text-align": "center",
+          "text-transform": "uppercase",
+          color: "text-2",
+        },
+        title: {
+          "text-align": "center",
+        },
+        sub_title: {
+          "max-width": "600px",
+          "text-align": "center",
+          "line-height": 1.625,
+        },
+        button: {},
+        spacer: {},
+        image_wrapper: {},
+        image_desktop: {
+          "object-fit": "contain",
+          display: "block",
+          "border-radius": "base",
+          tablet: {
+            display: "block",
+          },
+          mobile: {
+            display: "none",
+          },
+        },
+        image_mobile: {
+          "object-fit": "contain",
+          display: "none",
+          "border-radius": "base",
+          tablet: {
+            display: "none",
+          },
+          mobile: {},
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,57 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IHero2Content } from "./hero-2.schema";
+
+const Hero2: React.FC<ILevoBlockBaseProps<IHero2Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    {/* <Box elementKey="background"> */}
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        <Typography elementKey="accent_heading" />
+
+        <Heading elementKey="title" />
+
+        <Typography elementKey="sub_title" />
+
+        <Button elementKey="button" />
+        <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
+            elementKey="image_desktop"
+            width={800}
+            height={600}
+            alt="hero image desktop"
+          />
+          <Image
+            elementKey="image_mobile"
+            width={400}
+            height={300}
+            alt="hero image mobile"
+          />
+        </Box>
+      </Box>
+    </Container>
+    {/* </Box> */}
+  </Section>
+);
+
+export default Hero2;