@levo-so/blocks 0.1.54 → 0.1.59

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

@@ -0,0 +1,76 @@
+import {
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { IHero12Content } from "./hero-12.schema";
+
+const Hero12: React.FC<ILevoBlockBaseProps<IHero12Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        {/* Header Container */}
+        <Box elementKey="header_container">
+          <Container elementKey="title_container">
+            <Box elementKey="label_container">
+              <Box elementKey="label_divider" />
+              <Typography elementKey="label" />
+            </Box>
+            <Heading elementKey="title" />
+          </Container>
+          <Typography elementKey="description" />
+        </Box>
+
+        {/* Bottom Container */}
+        <Box elementKey="bottom_container">
+          <Carousel
+            elementKey="images_levoGroup"
+            data-levo_group
+            opts={{
+              loop: true,
+            }}
+          >
+            <CarouselContent>
+              {(content.images ?? []).map((_, index) => (
+                <CarouselItem
+                  key={`hero-12-image-${index}`}
+                  data-levo_group_item
+                >
+                  <Image elementKey={`images.${index}.image`} alt="Team" />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+
+          <Box elementKey="stats_levoGroup" data-levo_group>
+            {(content.stats ?? []).map((_: any, index: number) => (
+              <Box
+                key={`hero-12-stat-${index}`}
+                elementKey={`stats.${index}.stat_box`}
+                data-levo_group_item
+              >
+                <Box elementKey={`stats.${index}.number_container`}>
+                  <Icon elementKey={`stats.${index}.icon`} />
+                  <Typography elementKey={`stats.${index}.number`} />
+                </Box>
+                <Typography elementKey={`stats.${index}.label`} />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero12;

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

@@ -0,0 +1,238 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  description:
+    "<p>Get expert ERP insights, success stories, and growth tips straight to your inbox. No clutter. Just clarity.</p>",
+  title:
+    "Save 100+ hours in Research. Get your Free NetSuite Implementation Guide.",
+};
+
+export type IHero13Content = typeof DEFAULT_CONTENT;
+
+export const Hero13: IBlock = {
+  category_id: "hero",
+  title: "Hero 13",
+  key: "hero-13",
+  version: "v1",
+  prompt_description:
+    "Two-column layout with bold headline, brief supporting text on the left, paired with a call-to-action button on the right. Similar to Contact Us 1 but optimized for hero sections.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall layout definition. Used to structure the block as a two-column split: left for text content, right for call-to-action. No content needed.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main outer container for spacing and alignment. No direct content—responsible for the block's padding, background, and width.",
+      },
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Box to organize and group the title and description on the left side. No text content—used solely for grouping and alignment.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main headline positioned at the top left. Aim for a direct, inspiring, action-oriented message encouraging users to take action. Tone is confident, professional, and motivating.",
+        min_characters: 8,
+        max_characters: 28,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short explanatory paragraph under the headline providing additional context or reason to get started. Tone is supportive, convincing, and concise.",
+        min_characters: 30,
+        max_characters: 90,
+      },
+    },
+    {
+      key: "formWrapper",
+      label: "Form Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the call-to-action button on the right side. Used for positioning and alignment of the action element.",
+      },
+    },
+    {
+      key: "form_title",
+      label: "Form Title",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short explanatory paragraph under the headline providing additional context or reason to get started. Tone is supportive, convincing, and concise.",
+        min_characters: 30,
+        max_characters: 90,
+      },
+    },
+    {
+      key: "contact_form",
+      label: "Contact Form",
+      field_interface: "FormWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          width: "100%",
+          position: "relative",
+          "min-height": "600px",
+          display: "flex",
+          "align-items": "center",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+            "min-height": "500px",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+            "min-height": "400px",
+          },
+          "background-image":
+            'url("https://static.levostg.online/W6OEVMW8/Frame48097095-2EYwP5YZ0Tovp-1920w.webp")',
+          "background-position": "50% 50%",
+          "background-size": "cover",
+        },
+
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "z-index": "1",
+          display: "flex",
+          "flex-direction": "row",
+          "justify-content": "space-between",
+          "padding-left": "none",
+          "padding-right": "none",
+          tablet: {
+            "flex-direction": "column",
+          },
+        },
+        description: {
+          "font-size": "lg",
+          color: "text-1",
+          "line-height": "1.6",
+          margin: "0",
+          tablet: {
+            "font-size": "base",
+          },
+        },
+
+        form_title: {
+          "font-size": "xl",
+          "font-weight": 600,
+          color: "text-1",
+          margin: "0",
+          "text-align": "center",
+        },
+        form_button: {
+          "background-color": "brand",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "2xl",
+          "padding-right": "2xl",
+          "border-radius": "base",
+          "font-weight": 600,
+          width: "100%",
+          "text-align": "center",
+        },
+        features_section: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          width: "100%",
+          tablet: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+          },
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+
+        textWrapper: {
+          width: "55%",
+          tablet: {
+            width: "100%",
+          },
+        },
+        contentWrapper: {
+          display: "flex",
+        },
+        formWrapper: {
+          "background-color": "background-3",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "border-radius": "2xl",
+          width: "500px",
+          position: "absolute",
+          right: "80px",
+          "z-index": "9999",
+          "box-shadow": {
+            x: 0,
+            y: 4,
+            blur: 8,
+            spread: 3,
+            color: "#000000",
+            opacity: 12,
+          },
+          tablet: {
+            "background-color": "page",
+            position: "static",
+            width: "100%",
+            "margin-top": "none",
+          },
+        },
+        contact_form: {
+          display: "block",
+          "flex-direction": "column",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,31 @@
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Container,
+  Form,
+  Heading,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { IHero13Content } from "./hero-13.schema";
+
+const Hero13: React.FC<ILevoBlockBaseProps<IHero13Content>> = () => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      {/* Left Content Container */}
+      <Box elementKey="textWrapper">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
+
+      {/* Right Form Container */}
+      <Box elementKey="formWrapper">
+        <Typography elementKey="form_title" />
+        <Form elementKey="contact_form" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero13;

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,
@@ -8,7 +10,6 @@ import {
   Container,
   Heading,
   Icon,
-  Image,
   Section,
   Typography,
 } from "@levo-so/studio";

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

@@ -1,3 +1,5 @@
+"use client";
+
 import type { CarouselApi } from "@levo-so/studio";
 import {
   type ILevoBlockBaseProps,

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

@@ -174,6 +174,11 @@ export const Hero9: IBlock = {
               "Individual statistic container with proper vertical alignment for value and label.",
           },
         },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
         {
           key: "value",
           label: "Stat Value",

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

@@ -7,6 +7,7 @@ import {
   type ILevoBlockBaseProps,
   Section,
   Typography,
+  Icon,
 } from "@levo-so/studio";
 import React from "react";
 
@@ -31,6 +32,7 @@ const Hero9: React.FC<ILevoBlockBaseProps<IHero9Content>> = ({ content }) => (
                   data-levo_group_item
                   elementKey={`stats.${index}.stat_wrapper`}
                 >
+                  <Icon elementKey={`stats.${index}.icon`} />
                   <Heading elementKey={`stats.${index}.value`} />
                   <Typography elementKey={`stats.${index}.label`} />
                 </Box>

package/src/blocks/index.ts

@@ -10,6 +10,7 @@ export const blocks: Record<string, BlockComponent> = {
   "blog-post-1:v1": lazy(() => import("./blogs/blog-post-1")),
   "blog-post-2:v1": lazy(() => import("./blogs/blog-post-2")),
   "blog-post-3:v1": lazy(() => import("./blogs/blog-post-3")),
+  "calendar-1:v1": lazy(() => import("./calendar/calendar-1")),
   "cards-2:v1": lazy(() => import("./cards/cards-2")),
   "cards-3:v1": lazy(() => import("./cards/cards-3")),
   "cards-4:v1": lazy(() => import("./cards/cards-4")),
@@ -21,6 +22,8 @@ export const blocks: Record<string, BlockComponent> = {
   "cards-11:v1": lazy(() => import("./cards/cards-11")),
   "cards-12:v1": lazy(() => import("./cards/cards-12")),
   "cards-13:v1": lazy(() => import("./cards/cards-13")),
+  "cards-14:v1": lazy(() => import("./cards/cards-14")),
+  "cards-15:v1": lazy(() => import("./cards/cards-15")),
   "contact-us-1:v1": lazy(() => import("./contact-us/contact-us-1")),
   "contact-us-2:v1": lazy(() => import("./contact-us/contact-us-2")),
   "content-1:v1": lazy(() => import("./content/content-1")),
@@ -30,6 +33,9 @@ export const blocks: Record<string, BlockComponent> = {
   "content-5:v1": lazy(() => import("./content/content-5")),
   "content-6:v1": lazy(() => import("./content/content-6")),
   "content-7:v1": lazy(() => import("./content/content-7")),
+  "content-8:v1": lazy(() => import("./content/content-8")),
+  "content-9:v1": lazy(() => import("./content/content-9")),
+  "timeline-1:v1": lazy(() => import("./timeline/timeline-1")),
   "cta-1:v1": lazy(() => import("./cta/cta-1")),
   "cta-2:v1": lazy(() => import("./cta/cta-2")),
   "cta-3:v1": lazy(() => import("./cta/cta-3")),
@@ -54,6 +60,9 @@ export const blocks: Record<string, BlockComponent> = {
   "footer-4:v1": lazy(() => import("./footer/footer-4")),
   "footer-5:v1": lazy(() => import("./footer/footer-5")),
   "footer-6:v1": lazy(() => import("./footer/footer-6")),
+  "filter-listing-1:v1": lazy(
+    () => import("./filter-listing/filter-listing-1"),
+  ),
   "hero-1:v1": lazy(() => import("./hero/hero-1")),
   "hero-2:v1": lazy(() => import("./hero/hero-2")),
   "hero-4:v1": lazy(() => import("./hero/hero-4")),
@@ -63,27 +72,45 @@ export const blocks: Record<string, BlockComponent> = {
   "hero-8:v1": lazy(() => import("./hero/hero-8")),
   "hero-9:v1": lazy(() => import("./hero/hero-9")),
   "hero-10:v1": lazy(() => import("./hero/hero-10")),
+  "hero-11:v1": lazy(() => import("./hero/hero-11")),
+  "hero-12:v1": lazy(() => import("./hero/hero-12")),
+  "hero-13:v1": lazy(() => import("./hero/hero-13")),
   "logos-1:v1": lazy(() => import("./logos/logos-1")),
   "navbar-1:v1": lazy(() => import("./navbar/navbar-1")),
   "navbar-2:v1": lazy(() => import("./navbar/navbar-2")),
   "navbar-3:v1": lazy(() => import("./navbar/navbar-3")),
   "pricing-1:v1": lazy(() => import("./pricing/pricing-1")),
+  "polling-1:v1": lazy(() => import("./polling/polling-1")),
   "products-listing-1:v1": lazy(() => import("./products/products-listing-1")),
+  "products-listing-2:v1": lazy(() => import("./products/products-listing-2")),
+  "products-listing-3:v1": lazy(() => import("./products/products-listing-3")),
   "stats-1:v1": lazy(() => import("./stats/stats-1")),
   "stats-2:v1": lazy(() => import("./stats/stats-2")),
   "team-1:v1": lazy(() => import("./team/team-1")),
   "team-2:v1": lazy(() => import("./team/team-2")),
   "team-3:v1": lazy(() => import("./team/team-3")),
   "team-4:v1": lazy(() => import("./team/team-4")),
+  "team-5:v1": lazy(() => import("./team/team-5")),
+
   "testimonial-1:v1": lazy(() => import("./testimonial/testimonial-1")),
   "testimonial-2:v1": lazy(() => import("./testimonial/testimonial-2")),
   "testimonial-3:v1": lazy(() => import("./testimonial/testimonial-3")),
   "testimonial-4:v1": lazy(() => import("./testimonial/testimonial-4")),
   "testimonial-5:v1": lazy(() => import("./testimonial/testimonial-5")),
   "testimonial-6:v1": lazy(() => import("./testimonial/testimonial-6")),
+  "testimonial-7:v1": lazy(() => import("./testimonial/testimonial-7")),
   "terms-and-conditions-1:v1": lazy(
     () => import("./termsAndPrivacy/terms-and-conditions-1"),
   ),
   "carousel-1:v1": lazy(() => import("./carousel/carousel-1")),
+  "carousel-2:v1": lazy(() => import("./carousel/carousel-2")),
   "profile-1:v1": lazy(() => import("./profile/profile-1")),
+  "profile-2:v1": lazy(() => import("./profile/profile-2")),
+  "profile-3:v1": lazy(() => import("./profile/profile-3")),
+  "edit-profile:v1": lazy(() => import("./users/edit-profile")),
+  "service-2:v1": lazy(() => import("./services/service-2")),
+  "service-3:v1": lazy(() => import("./services/service-3")),
+  "tab-1:v1": lazy(() => import("./tabs/tab-1")),
+  "tab-2:v1": lazy(() => import("./tabs/tab-2")),
+  "service-1:v1": lazy(() => import("./services/service-1")),
 };

package/src/blocks/navbar/navbar-1.schema.ts

@@ -177,7 +177,7 @@ export const Navbar1: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-trigger",
@@ -187,7 +187,7 @@ export const Navbar1: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -218,7 +218,7 @@ export const Navbar1: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",
@@ -271,7 +271,7 @@ export const Navbar1: IBlock = {
         {
           key: "nav-item-title",
           label: "Nav Item Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "nav-item-dropdown-container",
@@ -286,7 +286,7 @@ export const Navbar1: IBlock = {
         {
           key: "nav-item-dropdown-trigger-title",
           label: "Nav Item Dropdown Trigger Title",
-          field_interface: "HeadingWidget",
+          field_interface: "TypographyWidget",
         },
         {
           key: "sub-items",
@@ -322,7 +322,7 @@ export const Navbar1: IBlock = {
             {
               key: "sub-item-title",
               label: "Sub Item Title",
-              field_interface: "HeadingWidget",
+              field_interface: "TypographyWidget",
             },
             {
               key: "sub-item-description",

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

@@ -6,7 +6,6 @@ import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
   Button,
-  Heading,
   Image,
   PopoverRoot,
   PopoverContent,
@@ -41,7 +40,7 @@ const DropdownNavigationItem: React.FC<{
         onMouseEnter={() => setIsDropdownPopoverOpen(true)}
         data-levo_group_item
       >
-        <Heading
+        <Typography
           elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`}
         />
         <ChevronDown
@@ -89,7 +88,7 @@ const DropdownNavigationItem: React.FC<{
                 <Box
                   elementKey={`desktop-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
                 >
-                  <Heading
+                  <Typography
                     elementKey={`desktop-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
                   />
                   <Typography
@@ -118,7 +117,7 @@ const DesktopNavItem: React.FC<{
         <DropdownNavigationItem navItem={navItem} index={index} />
       )}
       {!isNavItemDropdown && (
-        <Heading
+        <Typography
           data-levo_group_item
           elementKey={`desktop-nav-menu.${index}.nav-item-title`}
         />
@@ -160,7 +159,7 @@ const DropdownNavigationItemMobile: React.FC<{
         elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
       >
-        <Heading
+        <Typography
           elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
         />
         <ChevronDown
@@ -213,7 +212,7 @@ const DropdownNavigationItemMobile: React.FC<{
                           elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title-container`}
                           onClick={() => setIsOpen(false)}
                         >
-                          <Heading
+                          <Typography
                             elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
                           />
                         </Box>
@@ -256,7 +255,7 @@ const MobileNavItem: React.FC<{
           elementKey={`mobile-nav-menu.${index}.nav-item-title-container`}
           onClick={() => setIsOpen(false)}
         >
-          <Heading elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
+          <Typography elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
         </Box>
       )}
     </React.Fragment>