@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,54 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Button,
+} from "@levo-so/studio";
+
+import type { ICards9Content } from "./cards-9.schema";
+
+const Cards9: React.FC<ILevoBlockBaseProps<ICards9Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Heading elementKey="title" />
+        <Button elementKey="header_cta" />
+      </Box>
+
+      <Box elementKey="cards_levoGroup" data-levo_group>
+        {(content.cards ?? []).map((_, index) => (
+          <Box
+            elementKey={`cards.${index}.card_wrapper`}
+            key={`cards-9-card-${index}`}
+            data-levo_group_item
+          >
+            <Box elementKey={`cards.${index}.left_container`}>
+              <Image elementKey={`cards.${index}.image`} alt="Card image" />
+            </Box>
+            <Box elementKey={`cards.${index}.right_container`}>
+              <Box elementKey={`cards.${index}.meta_container`}>
+                <Box elementKey={`cards.${index}.date_wrapper`}>
+                  <Image
+                    elementKey={`cards.${index}.date_icon`}
+                    alt="Date icon"
+                  />
+                  <Typography elementKey={`cards.${index}.date_text`} />
+                </Box>
+              </Box>
+              <Box elementKey={`cards.${index}.text_container`}>
+                <Typography elementKey={`cards.${index}.card_title`} />
+                <Button elementKey={`cards.${index}.cta`} />
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards9;

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

@@ -0,0 +1,250 @@
+import type { IBlock } from "@levo-so/studio";
+
+// Extract image object into a constant for reusability
+const CAROUSEL_IMAGE = {
+  id: "7141014160938075687",
+  location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w":
+      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w":
+      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+    "1920w":
+      "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+    "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+    "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+    "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+    "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+    path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+  },
+};
+
+// Array of carousel 1 content
+const CAROUSEL_1_CONTENT = [
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+];
+
+// Array of carousel 2 content
+const CAROUSEL_2_CONTENT = [
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+  {
+    card: null,
+    image: CAROUSEL_IMAGE,
+  },
+];
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_wrapper: null,
+  title: "Enterprise Portfolio Gallery",
+  carousel_1_levoGroup: null,
+  carousel_1: CAROUSEL_1_CONTENT,
+  carousel_2_levoGroup: null,
+  carousel_2: CAROUSEL_2_CONTENT,
+};
+
+export type ICarousel1Content = typeof DEFAULT_CONTENT;
+
+// Carousel item field styles
+const CAROUSEL_ITEM_STYLE = {
+  card: {
+    display: "flex",
+    "flex-direction": "column",
+    "border-radius": "lg",
+    overflow: "hidden",
+    "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+  },
+  image: {
+    width: "100%",
+    height: "18rem",
+    "object-fit": "cover",
+  },
+};
+
+const CAROUSEL_1_STYLES = Array(5).fill(CAROUSEL_ITEM_STYLE);
+const CAROUSEL_2_STYLES = Array(5).fill(CAROUSEL_ITEM_STYLE);
+
+export const Carousel1: IBlock = {
+  category_id: "carousel",
+  title: "Carousel 1",
+  key: "carousel-1",
+  version: "v1",
+  prompt_description:
+    "A dual-row carousel block displaying image galleries with smooth transitions and responsive design",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_wrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "carousel_1_levoGroup",
+      label: "Carousel 1 Levo Group",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel_1",
+      label: "Carousel 1",
+      kind: "group",
+      field_interface: "CarouselWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+        },
+      ],
+    },
+    {
+      key: "carousel_2_levoGroup",
+      label: "Carousel 2 Levo Group",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "carousel_2",
+      label: "Carousel 2",
+      kind: "group",
+      field_interface: "CarouselWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+        },
+        container: {
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        header_wrapper: {
+          "text-align": "center",
+          "margin-bottom": "4xl",
+        },
+        title: {
+          "font-size": "3xl",
+          "font-weight": "600",
+          color: "text-1",
+          "line-height": "1.15",
+          "margin-bottom": "0",
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+        carousel_1_levoGroup: {
+          number_of_slides: 3.5,
+          "margin-bottom": "3xl",
+          tablet: {
+            number_of_slides: 2.5,
+          },
+          mobile: {
+            number_of_slides: 1.2,
+          },
+        },
+        carousel_2_levoGroup: {
+          number_of_slides: 3.5,
+          tablet: {
+            number_of_slides: 2.5,
+          },
+          mobile: {
+            number_of_slides: 1.2,
+          },
+        },
+        carousel_1: CAROUSEL_1_STYLES,
+        carousel_2: CAROUSEL_2_STYLES,
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        carousel_1_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 3,
+          },
+        },
+        carousel_2_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 2,
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,79 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Container,
+  Section,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+
+import type { ICarousel1Content } from "./carousel-1.schema";
+
+const Carousel1: React.FC<ILevoBlockBaseProps<ICarousel1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Heading elementKey="title" />
+      </Box>
+
+      {/* First Carousel Row */}
+      <Carousel
+        elementKey="carousel_1_levoGroup"
+        data-levo_group
+        opts={{
+          watchDrag: false,
+          watchResize: true,
+          watchSlides: true,
+        }}
+      >
+        <CarouselContent>
+          {(content.carousel_1 ?? []).map((_, index) => (
+            <CarouselItem key={`carousel-1-item-${index}`} data-levo_group_item>
+              <Box elementKey={`carousel_1.${index}.card`}>
+                <Image
+                  alt="carousel image"
+                  elementKey={`carousel_1.${index}.image`}
+                  width={400}
+                  height={300}
+                />
+              </Box>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+
+      {/* Second Carousel Row */}
+      <Carousel
+        elementKey="carousel_2_levoGroup"
+        data-levo_group
+        opts={{
+          watchDrag: false,
+          watchResize: true,
+          watchSlides: true,
+        }}
+      >
+        <CarouselContent>
+          {(content.carousel_2 ?? []).map((_, index) => (
+            <CarouselItem key={`carousel-2-item-${index}`} data-levo_group_item>
+              <Box elementKey={`carousel_2.${index}.card`}>
+                <Image
+                  alt="carousel image"
+                  elementKey={`carousel_2.${index}.image`}
+                  width={400}
+                  height={300}
+                />
+              </Box>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </Container>
+  </Section>
+);
+
+export default Carousel1;

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

@@ -0,0 +1,226 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+
+  contentWrapper: null,
+  title: "Get in touch",
+  description: "Connect with us and let us know how we can help you.",
+  ctas: [
+    {
+      cta: "Contact Us",
+    },
+  ],
+
+  media: {
+    id: "7141014160938075687",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+};
+
+export type IContactUs1Content = typeof DEFAULT_CONTENT;
+
+export const ContactUs1: IBlock = {
+  category_id: "contact-us",
+  title: "Contact Us 1",
+  key: "contact-us-1",
+  version: "v1",
+  prompt_description:
+    "Two-column layout with bold headline, brief supporting text, and a call-to-action button on the left, paired with a large image on the right.",
+  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 and call to action, right for visual. 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: "contentWrapper",
+      label: "Content contentWrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wrapper box for the main content (title, description, button) on the left side. Used for vertical and horizontal alignment. No direct visual/text content.",
+      },
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Box to organize and group the title, description, and CTAs. 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, inviting, action-oriented message encouraging users to make contact. Tone is clear, approachable, and encouraging.",
+        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 in touch. Tone is supportive, helpful, and concise.",
+        min_characters: 30,
+        max_characters: 90,
+      },
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary call-to-action button label for contacting the company/team. Should be short, clear, and action-driven.",
+            min_characters: 4,
+            max_characters: 22,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Group for one or more call-to-action buttons under the description. In this layout, typically only one prominent CTA is shown.",
+        min_items: 1,
+        max_items: 2,
+      },
+    },
+    {
+      key: "media",
+      label: "Media",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Prominent illustrative image displayed on the right side. Used to visually balance the block; should be inviting and align with a 'contact' or communication theme.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+  ],
+  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",
+          "justify-content": "space-between",
+          "border-radius": "3xl",
+          tablet: {
+            "flex-direction": "column",
+            "column-gap": "none",
+            "row-gap": "xl",
+            "padding-top": "xl",
+          },
+          mobile: {
+            "row-gap": "base",
+            "padding-top": "base",
+          },
+        },
+        media: {
+          width: "50%",
+          height: "100%",
+          "border-radius": "3xl",
+          tablet: {
+            width: "100%",
+            height: "auto",
+          },
+        },
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "start",
+          "justify-content": "center",
+          "row-gap": "base",
+          "padding-left": "5xl",
+          tablet: {
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+          mobile: {
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        textWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "4xs",
+        },
+        title: {
+          "font-size": "4xl",
+          mobile: {
+            "font-size": "2xl",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,39 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Heading,
+  Media,
+  Section,
+  Typography,
+  Container,
+} from "@levo-so/studio";
+
+import type { IContactUs1Content } from "./contact-us-1.schema";
+
+const ContactUs1: React.FC<ILevoBlockBaseProps<IContactUs1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="contentWrapper">
+        <Box elementKey="textWrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </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>
+      <Media alt="media" elementKey="media" />
+    </Container>
+  </Section>
+);
+
+export default ContactUs1;