@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,415 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_wrapper: null,
+  badge_wrapper: null,
+  badge_icon: {
+    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",
+    },
+  },
+  badge_text: "Your Trusted Partner in Financial Growth & Security.",
+  headings_wrapper: null,
+  title: "Empowering Your Financial Future",
+  description:
+    "Experience a higher standard of banking and investment with tailored solutions designed for individuals and institutions.",
+  features_levoGroup: null,
+  features: [
+    {
+      card: null,
+      icon_wrapper: null,
+      icon: {
+        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",
+        },
+      },
+      title: "Comprehensive Wealth Management",
+      description:
+        "Personalized strategies to preserve, grow, and transfer wealth for individuals and families.",
+    },
+    {
+      card: null,
+      icon_wrapper: null,
+      icon: {
+        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",
+        },
+      },
+      title: "Strategic Investment Advisory",
+      description:
+        "Expert market insights and portfolio diversification tailored to your financial ambitions.",
+    },
+    {
+      card: null,
+      icon_wrapper: null,
+      icon: {
+        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",
+        },
+      },
+      title: "Secure Digital Banking",
+      description:
+        "Modern, secure and seamless banking experiences—anytime, anywhere, for your business and personal needs.",
+    },
+  ],
+};
+
+export type IHero3Content = typeof DEFAULT_CONTENT;
+
+export const Hero3: IBlock = {
+  category_id: "hero",
+  title: "Hero 3",
+  key: "hero-3",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "header_wrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "badge_wrapper",
+      label: "Badge Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "badge_icon",
+      label: "Badge Icon",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "badge_text",
+      label: "Badge Text",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "headings_wrapper",
+      label: "Headings Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "features_levoGroup",
+      label: "Features Levo Group",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "features",
+      label: "Features",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "icon_wrapper",
+          label: "Icon Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "ImageWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      config: {},
+      content: DEFAULT_CONTENT,
+      styles: {
+        container: {
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          "background-color": "white",
+        },
+        header_wrapper: {
+          "margin-bottom": "7xl",
+        },
+        badge_wrapper: {
+          display: "inline-flex",
+          "align-items": "center",
+          gap: "xs",
+          "font-size": "sm",
+          "font-weight": "500",
+          color: "brand",
+        },
+        badge_icon: {
+          color: "brand",
+        },
+        headings_wrapper: {
+          "margin-top": "4xl",
+          display: "flex",
+          "flex-direction": "row",
+          "justify-content": "space-between",
+          "align-items": "start",
+          gap: "xl",
+          mobile: {
+            "flex-direction": "column",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          "font-weight": "700",
+          color: "text-1",
+          "line-height": "1.2",
+          "max-width": "36rem",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        description: {
+          color: "text-2",
+          "font-size": "sm",
+          "max-width": "28rem",
+          "margin-top": "3xs",
+          mobile: {
+            "font-size": "base",
+            "margin-top": "xs",
+          },
+        },
+        features_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          gap: "xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        features: [
+          {
+            card: {
+              "background-color": "white",
+              "border-radius": "xl",
+              border: "1px solid",
+              "border-color": "background-3",
+              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+              padding: "xl",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+              mobile: {},
+            },
+            icon_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              height: "3rem",
+              width: "3rem",
+              "border-radius": "full",
+              "background-color": "background-2",
+              "margin-bottom": "lg",
+            },
+            icon: {
+              color: "brand",
+            },
+            title: {
+              "font-weight": "600",
+              "font-size": "lg",
+              color: "text-1",
+              "margin-bottom": "base",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "sm",
+            },
+          },
+          {
+            card: {
+              "background-color": "white",
+              "border-radius": "xl",
+              border: "1px solid",
+              "border-color": "background-3",
+              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+              padding: "xl",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+              mobile: {},
+            },
+            icon_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              height: "3rem",
+              width: "3rem",
+              "border-radius": "full",
+              "background-color": "background-2",
+              "margin-bottom": "lg",
+            },
+            icon: {
+              color: "brand",
+            },
+            title: {
+              "font-weight": "600",
+              "font-size": "lg",
+              color: "text-1",
+              "margin-bottom": "base",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "sm",
+            },
+          },
+          {
+            card: {
+              "background-color": "white",
+              "border-radius": "xl",
+              border: "1px solid",
+              "border-color": "background-3",
+              "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+              padding: "xl",
+              display: "flex",
+              "flex-direction": "column",
+              "align-items": "start",
+              transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+              mobile: {},
+            },
+            icon_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              height: "3rem",
+              width: "3rem",
+              "border-radius": "full",
+              "background-color": "background-2",
+              "margin-bottom": "lg",
+            },
+            icon: {
+              color: "brand",
+            },
+            title: {
+              "font-weight": "600",
+              "font-size": "lg",
+              color: "text-1",
+              "margin-bottom": "base",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "sm",
+            },
+          },
+        ],
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,50 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IHero3Content } from "./hero-3.schema";
+
+const Hero3: React.FC<ILevoBlockBaseProps<IHero3Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Box elementKey="badge_wrapper">
+          <Image alt="" elementKey="badge_icon" width={20} height={20} />
+          <Typography elementKey="badge_text" />
+        </Box>
+        <Box elementKey="headings_wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+      </Box>
+      <Box data-levo_group elementKey="features_levoGroup">
+        {[...(content.features ?? []).slice(0, 3)].map((_, index) => (
+          <Box
+            data-levo_group_item
+            elementKey={`features.${index}.card`}
+            key={index}
+          >
+            <Box elementKey={`features.${index}.icon_wrapper`}>
+              <Image
+                elementKey={`features.${index}.icon`}
+                width={24}
+                height={24}
+                alt=""
+              />
+            </Box>
+            <Heading elementKey={`features.${index}.title`} />
+            <Typography elementKey={`features.${index}.description`} />
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero3;