@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/content/content-6.tsx

@@ -0,0 +1,61 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+import { type IContent6Content } from "./content-6.schema";
+
+const Content6: React.FC<ILevoBlockBaseProps<IContent6Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
+      <Box elementKey="companies_levoGroup" data-levo_group>
+        {(content.companies ?? []).map((_: any, index: number) => (
+          <React.Fragment key={`company-${index}`}>
+            <Box
+              key={index}
+              data-levo_group_item
+              elementKey={`companies.${index}.company_item`}
+            >
+              <Box elementKey={`companies.${index}.image_wrapper`}>
+                <Image
+                  elementKey={`companies.${index}.company_image`}
+                  alt="Company logo"
+                />
+              </Box>
+
+              <Box elementKey={`companies.${index}.work_wrapper`}>
+                <Typography elementKey={`companies.${index}.work_header`} />
+                <Typography elementKey={`companies.${index}.work_value`} />
+              </Box>
+              <Box elementKey={`companies.${index}.location_wrapper`}>
+                <Typography elementKey={`companies.${index}.location_header`} />
+                <Typography elementKey={`companies.${index}.location_value`} />
+              </Box>
+              <Button elementKey={`companies.${index}.cta`} />
+            </Box>
+            {index < (content.companies?.length ?? 0) - 1 && (
+              <Box
+                elementKey={`companies.${index}.separator`}
+                data-levo_group_item
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Content6;

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

@@ -0,0 +1,361 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  title: "Be the Reason a Child Goes to School",
+  ctas: [
+    {
+      button: "Get Started Today",
+    },
+    {
+      button: "Request a Proposal",
+    },
+  ],
+  ctaIcon: {
+    id: "9GFRzqRPswl8h",
+    kind: "image",
+    location:
+      "https://static.levocdn.com/WLZ1TXTD/arrow-right-tryvMJ0Z2DosG.svg",
+    srcset: {},
+  },
+  cta2_rightIcon: {
+    kind: "custom",
+    data: {
+      id: "lDiFGcHOy3Il",
+      filename: "image.png",
+      kind: "image",
+      location: "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO.png",
+      srcset: {
+        "1080w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp",
+        "1200w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp",
+        "1920w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp",
+        "320w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-320w.webp",
+        "640w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-640w.webp",
+        "750w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-750w.webp",
+        "828w":
+          "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-828w.webp",
+        path: "https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-320w.webp 320w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1080w.webp 1080w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-828w.webp 828w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-640w.webp 640w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1200w.webp 1200w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-750w.webp 750w, https://space.levo.in.net/W6OEVMW8/image-rSCelHPGNUnO-1920w.webp 1920w",
+      },
+      mimetype: "image/png",
+    },
+  },
+  description:
+    "<p>Your support can change lives. Help us provide essential education to children who need it most.</p>",
+};
+
+export type ICta1Content = typeof DEFAULT_CONTENT;
+
+export const Cta1: IBlock = {
+  category_id: "cta",
+  title: "CTA 1",
+  key: "cta-1",
+  version: "v1",
+  prompt_description:
+    "A compelling call-to-action section with title and repeatable action buttons to drive user engagement",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall section layout for the call-to-action block. Controls spacing, background, and structure.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container for centering and constraining the content width.",
+      },
+    },
+    {
+      key: "header-container",
+      label: "Header Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the header content, used for layout and spacing.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Compelling call-to-action headline that motivates action. Should be direct, engaging, and benefit-focused.",
+        min_characters: 20,
+        max_characters: 80,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Brief description that provides additional context or value. Should be concise and informative.",
+      },
+    },
+    {
+      key: "ctas",
+      label: "Action Buttons",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "button",
+          label: "Button",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Action button text that clearly communicates what happens when clicked. Should be compelling and action-oriented.",
+            min_characters: 8,
+            max_characters: 30,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Group of action buttons for the call-to-action section, typically including primary and secondary actions.",
+        min_items: 2,
+        max_items: 3,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "6xl",
+          "padding-bottom": "6xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "background-color": "background-1",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            filter: "none",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+            filter: "none",
+          },
+          filter: "none",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "text-align": "center",
+          filter: "none",
+          mobile: {
+            filter: "none",
+            "flex-direction": "column",
+            "row-gap": "base",
+          },
+          tablet: {
+            filter: "none",
+            "flex-direction": "column",
+            "row-gap": "base",
+          },
+          "justify-content": "space-between",
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          "margin-bottom": "2xl",
+          tablet: {
+            "font-size": "4xl",
+            filter: "none",
+            "text-align": "center",
+            "margin-bottom": "xl",
+            "max-width": "100%",
+          },
+          mobile: {
+            "font-size": "2xl",
+            filter: "none",
+            "text-align": "center",
+            "margin-bottom": "lg",
+            "max-width": "100%",
+          },
+          filter: "none",
+          "text-align": "left",
+          "max-width": "500px",
+        },
+        ctas_levoGroup: {
+          filter: "none",
+          display: "flex",
+          "column-gap": "lg",
+          "align-items": "center",
+          mobile: {
+            filter: "none",
+            "flex-direction": "column",
+            "row-gap": "2xs",
+            "column-gap": "0",
+          },
+          tablet: {
+            filter: "none",
+            "flex-direction": "column",
+            "row-gap": "xs",
+            "column-gap": "0",
+            width: "100%",
+          },
+          "flex-direction": "column",
+          "justify-content": "center",
+          "row-gap": "md",
+          width: "40%",
+        },
+        ctas: [
+          {
+            button: {
+              "background-color": "background-2",
+              color: "white",
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "2xl",
+              "padding-right": "2xl",
+              "border-radius": "lg",
+              "font-size": "base",
+              "font-weight": 600,
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "xs",
+              "border-width": "0px",
+              "border-style": "none",
+              "border-color": "border",
+              tablet: {
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                filter: "none",
+                "border-radius": "base",
+                "min-width": "100%",
+                width: "auto",
+                "border-style": "none",
+                "border-width": "0px",
+              },
+              mobile: {
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "font-size": "sm",
+                filter: "none",
+                width: "100%",
+                "min-width": "100%",
+              },
+              filter: "none",
+              "flex-direction": "row",
+              "justify-content": "center",
+              "min-width": "100%",
+              width: "100%",
+            },
+          },
+          {
+            button: {
+              filter: "none",
+              display: "flex",
+              "column-gap": "xs",
+              "align-items": "center",
+              "justify-content": "center",
+              "padding-top": "xs",
+              "padding-bottom": "xs",
+              "padding-left": "2xl",
+              "padding-right": "2xl",
+              "border-radius": "lg",
+              "font-size": "base",
+              "font-weight": 600,
+              "min-width": "100%",
+              tablet: {
+                filter: "none",
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "min-width": "100%",
+                "border-style": "none",
+                "border-width": "0px",
+              },
+              mobile: {
+                filter: "none",
+                width: "100%",
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "xl",
+                "padding-right": "xl",
+                "font-size": "sm",
+                "min-width": "100%",
+              },
+              width: "100%",
+              "border-style": "none",
+              "border-width": "0px",
+            },
+          },
+        ],
+        ctaIcon: {
+          width: "20px",
+          height: "20px",
+          mobile: {
+            width: "16px",
+            height: "16px",
+          },
+        },
+        cta2_rightIcon: {
+          width: "20px",
+        },
+        "header-container": {
+          filter: "none",
+        },
+        description: {
+          filter: "none",
+          "font-weight": 500,
+          "font-size": "xl",
+          "text-align": "left",
+          "max-width": "500px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        "ctas.0.button": {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        "ctas.1.button": {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+          button_icons: {
+            right: {
+              enabled: true,
+            },
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,33 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ICta1Content } from "./cta-1.schema";
+
+const Cta1: React.FC<ILevoBlockBaseProps<ICta1Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header-container">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
+      <Box elementKey="ctas_levoGroup" data-levo_group>
+        {(content?.ctas ?? []).map((_: any, ctaIndex: number) => (
+          <Button
+            key={`cta-${ctaIndex}`}
+            data-levo_group_item
+            elementKey={`ctas.${ctaIndex}.button`}
+          />
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cta1;

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

@@ -0,0 +1,209 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  contentContainer: null,
+
+  // Left image
+  leftImage: {
+    id: "left-fitness-image",
+    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",
+    },
+  },
+
+  // Right image
+  rightImage: {
+    id: "right-fitness-image",
+    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",
+    },
+  },
+
+  // Center content
+  title: "Your Transformation Starts Today",
+  description:
+    "No more guesswork. No more excuses. Just real, proven training that delivers results built around you.",
+  ctaButton: "Book Your First Class",
+};
+
+export type ICta2Content = typeof DEFAULT_CONTENT;
+
+export const Cta2: IBlock = {
+  category_id: "cta",
+  title: "CTA 2",
+  key: "cta-2",
+  version: "v1",
+  prompt_description:
+    "Fitness-themed call-to-action with center content flanked by workout images, perfect for gym and fitness businesses",
+
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "leftImage",
+      label: "Left Image",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "contentContainer",
+      label: "Content Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Main Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "ctaButton",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "rightImage",
+      label: "Right Image",
+      field_interface: "ImageWidget",
+    },
+  ],
+
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      content: DEFAULT_CONTENT,
+      config: {},
+      styles: {
+        layout: {
+          "padding-top": "4xl",
+          "padding-bottom": "4xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          tablet: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+          mobile: {
+            "padding-top": "2xl",
+            "padding-bottom": "2xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        container: {
+          "margin-left": "auto",
+          "margin-right": "auto",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "column-gap": "2xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+            "text-align": "center",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            "text-align": "center",
+          },
+        },
+        leftImage: {
+          width: "300px",
+          height: "200px",
+          "object-fit": "cover",
+          "border-radius": "base",
+          tablet: {
+            width: "250px",
+            height: "160px",
+          },
+          mobile: {
+            width: "200px",
+            height: "130px",
+          },
+        },
+        rightImage: {
+          width: "300px",
+          height: "200px",
+          "object-fit": "cover",
+          "border-radius": "base",
+          tablet: {
+            width: "250px",
+            height: "160px",
+          },
+          mobile: {
+            width: "200px",
+            height: "130px",
+          },
+        },
+        contentContainer: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "row-gap": "base",
+          "flex-grow": "1",
+          "max-width": "600px",
+        },
+        title: {
+          "margin-bottom": "base",
+          "text-color": "text-1",
+        },
+        description: {
+          "margin-bottom": "lg",
+          "text-color": "text-2",
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,28 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ICta2Content } from "./cta-2.schema";
+
+const Cta2: React.FC<ILevoBlockBaseProps<ICta2Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Image elementKey="leftImage" alt="Left fitness image" />
+      <Box elementKey="contentContainer">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+        <Button elementKey="ctaButton" />
+      </Box>
+      <Image elementKey="rightImage" alt="Right fitness image" />
+    </Container>
+  </Section>
+);
+
+export default Cta2;