@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,54 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+import { type IContent3Content } from "./content-3.schema";
+
+const Content3: React.FC<ILevoBlockBaseProps<IContent3Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+      </Box>
+      <Box elementKey="services_levoGroup" data-levo_group>
+        {(content.services ?? []).map((_: any, index: number) => (
+          <React.Fragment key={`service-${index}`}>
+            <Box
+              key={index}
+              data-levo_group_item
+              elementKey={`services.${index}.service_item`}
+            >
+              <Box elementKey={`services.${index}.number_wrapper`}>
+                <Typography elementKey={`services.${index}.number`} />
+              </Box>
+              {/* <Box elementKey={`services.${index}.content_wrapper`}> */}
+              <Heading elementKey={`services.${index}.service_title`} />
+              <Typography
+                elementKey={`services.${index}.service_description`}
+              />
+              <Button elementKey={`services.${index}.cta`} />
+            </Box>
+            {/* </Box> */}
+            {index < (content.services?.length ?? 0) - 1 && (
+              <Box
+                elementKey={`services.${index}.separator`}
+                data-levo_group_item
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Content3;

package/src/blocks/content/content-4.schema.ts

@@ -0,0 +1,287 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  title: "Why Choose Our Platform",
+  items: [
+    {
+      wrapper: null,
+      text_container: null,
+      item_title: "Personalized Training Plans",
+      description:
+        "No one-size-fits-all workouts here. Your goals, your body, your pace.",
+      image: {
+        id: "7141014160938075687",
+        location:
+          "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "1080w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          "1200w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+          "1920w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+          "320w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "750w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+          "828w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+          path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+        },
+      },
+    },
+    {
+      wrapper: null,
+      text_container: null,
+      item_title: "Real Accountability",
+      description:
+        "Get the support and motivation you need to stay on track with your fitness journey.",
+      image: {
+        id: "7141014160938075687",
+        location:
+          "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "1080w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          "1200w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+          "1920w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+          "320w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "750w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+          "828w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+          path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+        },
+      },
+    },
+    {
+      wrapper: null,
+      text_container: null,
+      item_title: "Train Anywhere, Anytime",
+      description:
+        "Access your workouts from anywhere with our mobile-first platform design.",
+      image: {
+        id: "7141014160938075687",
+        location:
+          "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+        kind: "image",
+        mimetype: "image/png",
+        srcset: {
+          "1080w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+          "1200w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+          "1920w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+          "320w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+          "640w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+          "750w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+          "828w":
+            "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+          path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+        },
+      },
+    },
+  ],
+};
+
+export type IContent4Content = typeof DEFAULT_CONTENT;
+
+export const Content4: IBlock = {
+  category_id: "content",
+  title: "Content 4",
+  key: "content-4",
+  version: "v1",
+  prompt_description:
+    "Simple content block with feature items. Each item displays title, description, and image in a clean horizontal layout.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+
+    {
+      key: "items",
+      label: "Content Items",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Item Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "text_container",
+          label: "Text Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "item_title",
+          label: "Item Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "image",
+          label: "Item Image",
+          field_interface: "ImageWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        header_section: {
+          "margin-bottom": "2xl",
+          "text-align": "center",
+        },
+
+        items_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        "items.*.wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xl",
+          "border-bottom": "1px solid",
+          "border-color": "border",
+          "padding-bottom": "xl",
+          "padding-top": "xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "lg",
+            "text-align": "center",
+          },
+        },
+        "items.*.wrapper:last-child": {
+          "border-bottom": "none",
+        },
+        "items.*.text_container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          flex: "1",
+        },
+        "items.*.item_title": {
+          "font-size": "xl",
+          "font-weight": "600",
+          color: "text-1",
+          "margin-bottom": "none",
+        },
+        "items.*.description": {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.6",
+          "margin-bottom": "none",
+        },
+        "items.*.image": {
+          width: "300px",
+          height: "200px",
+          "object-fit": "cover",
+          "border-radius": "lg",
+          "flex-shrink": "0",
+          mobile: {
+            width: "100%",
+            height: "250px",
+          },
+        },
+        items: [
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "space-between",
+            },
+            item_title: {
+              "font-size": "4xl",
+              "padding-bottom": "xs",
+            },
+            image: {
+              width: "300px",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "space-between",
+            },
+            text_container: {},
+            item_title: {
+              "font-size": "4xl",
+              "padding-bottom": "xs",
+            },
+            image: {
+              width: "300px",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "space-between",
+            },
+            item_title: {
+              "font-size": "4xl",
+              "padding-bottom": "xs",
+            },
+            image: {
+              width: "300px",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IContent4Content } from "./content-4.schema";
+
+const Content4: React.FC<ILevoBlockBaseProps<IContent4Content>> = ({
+  content,
+}) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header_section">
+          <Heading elementKey="title" />
+        </Box>
+
+        <Box elementKey="items_levoGroup" data-levo_group>
+          {(content.items ?? []).map((_, index: number) => (
+            <Box
+              key={index}
+              elementKey={`items.${index}.wrapper`}
+              data-levo_group_item
+            >
+              <Box elementKey={`items.${index}.text_container`}>
+                <Typography elementKey={`items.${index}.item_title`} />
+                <Typography elementKey={`items.${index}.description`} />
+              </Box>
+              <Image
+                elementKey={`items.${index}.image`}
+                alt={`Content item ${index + 1}`}
+              />
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Content4;