@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,50 @@
+import {
+    Box,
+    Button,
+    Container,
+    Heading,
+    type ILevoBlockBaseProps,
+    Section,
+    Typography,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { ICards4Content } from "./cards-4.schema";
+
+const Cards4: React.FC<ILevoBlockBaseProps<ICards4Content>> = ({ content }) => (
+    <Section elementKey="layout">
+        <Container elementKey="container">
+            <Box elementKey="header_section">
+                <Heading elementKey="main_title" />
+                <Button elementKey="header_button" />
+            </Box>
+            <Box elementKey="grid_levoGroup" data-levo_group>
+                {(content?.grid ?? []).map((_: any, index: number) => (
+                    <Box
+                        key={`cards-4-${index}`}
+                        data-levo_group_item
+                        elementKey={`grid.${index}.card`}
+                    >
+                        <Box elementKey={`grid.${index}.content_wrapper`}>
+                            <Heading elementKey={`grid.${index}.title`} />
+                            <Typography elementKey={`grid.${index}.details`} />
+                        </Box>
+                        <Box elementKey={`grid.${index}.ctas_levoGroup`} data-levo_group>
+                            {(content?.grid?.[index]?.ctas ?? []).map(
+                                (_: any, ctaIndex: number) => (
+                                    <Button
+                                        key={`cta-${ctaIndex}`}
+                                        data-levo_group_item
+                                        elementKey={`grid.${index}.ctas.${ctaIndex}.button`}
+                                    />
+                                ),
+                            )}
+                        </Box>
+                    </Box>
+                ))}
+            </Box>
+        </Container>
+    </Section>
+);
+
+export default Cards4;

package/src/blocks/cards/cards-5.schema.ts

@@ -0,0 +1,264 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  main_wrapper: null,
+  left_section: null,
+  left_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",
+    },
+  },
+  right_section: null,
+  background_image: {
+    id: "7141014160938075688",
+    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",
+    },
+  },
+  card_container: null,
+  title: "Transform Your Business",
+  description:
+    "Discover innovative solutions that drive growth and efficiency for your enterprise",
+  cta: "Get Started Today",
+};
+
+export type ICards5Content = typeof DEFAULT_CONTENT;
+
+export const Cards5: IBlock = {
+  category_id: "cards",
+  title: "Cards with Background Image",
+  key: "cards-5",
+  version: "v1",
+  prompt_description:
+    "A two-section layout with left image and right background image with overlaid card containing title, description and CTA",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "left_section",
+      label: "Left Section",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "left_image",
+      label: "Left Image",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Main image for the left section - should be engaging and relate to the content theme.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "hero",
+      },
+    },
+    {
+      key: "right_section",
+      label: "Right Section",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "background_image",
+      label: "Background Image",
+      field_interface: "MediaWidget",
+      hint: {
+        prompt_description:
+          "Background image for the right section that will appear behind the card overlay.",
+        orientation: "landscape",
+        size: "large",
+        usecase: "background",
+      },
+    },
+    {
+      key: "card_container",
+      label: "Card Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "cta",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "stretch",
+          "column-gap": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+          },
+        },
+        left_section: {
+          flex: "1",
+          "min-height": "400px",
+        },
+        left_image: {
+          width: "100%",
+          height: "100%",
+          "object-fit": "cover",
+          "border-radius": "lg",
+        },
+        right_section: {
+          flex: "1",
+          position: "relative",
+          "min-height": "400px",
+          "border-radius": "lg",
+          overflow: "hidden",
+        },
+        background_image: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "100%",
+          height: "100%",
+          "object-fit": "cover",
+          "z-index": "1",
+        },
+        card_container: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          "background-color": "background-1",
+          "padding-top": "xl",
+          "padding-bottom": "xl",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "border-radius": "lg",
+          "box-shadow":
+            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+          "z-index": "2",
+          "text-align": "center",
+          "max-width": "320px",
+          width: "90%",
+          mobile: {
+            "max-width": "280px",
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        title: {
+          "font-size": "2xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "base",
+          "line-height": "1.3",
+          mobile: {
+            "font-size": "xl",
+          },
+        },
+        description: {
+          "font-size": "base",
+          color: "text-2",
+          "margin-bottom": "lg",
+          "line-height": "1.6",
+          mobile: {
+            "font-size": "sm",
+            "margin-bottom": "base",
+          },
+        },
+        cta: {
+          "background-color": "background-2",
+          color: "text-1",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "border-radius": "base",
+          "font-weight": "600",
+          border: "none",
+          cursor: "pointer",
+          mobile: {
+            "padding-top": "xs",
+            "padding-bottom": "xs",
+            "padding-left": "base",
+            "padding-right": "base",
+            "font-size": "sm",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,34 @@
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+
+import type { ICards5Content } from "./cards-5.schema";
+
+const Cards5: React.FC<ILevoBlockBaseProps<ICards5Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main_wrapper">
+        <Box elementKey="left_section">
+          <Image elementKey="left_image" alt="Left section image" />
+        </Box>
+        <Box elementKey="right_section">
+          <Image elementKey="background_image" alt="Background image" />
+          <Box elementKey="card_container">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+            <Button elementKey="cta" />
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Cards5;