@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,438 @@
+import type { IBlock } from "@levo-so/studio";
+
+const IMAGE_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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_wrapper: null,
+  headline_wrapper: null,
+  title: "AI-Driven Solutions for Financial Excellence",
+  cta_wrapper: null,
+  description:
+    "Empower your financial institution with advanced AI solutions for optimized growth, security, and client satisfaction.",
+  cta_button: "Request a Demo",
+  services: [
+    {
+      card: null,
+      image: IMAGE_MEDIA,
+      content_wrapper: null,
+      text_wrapper: null,
+      label: "01",
+      title: "Custom Financial Platforms",
+      description:
+        "We build secure, scalable online banking and finance platforms tailored for institutional excellence.",
+      cta: "Request Demo",
+    },
+    {
+      card: null,
+      image: IMAGE_MEDIA,
+      content_wrapper: null,
+      text_wrapper: null,
+      label: "02",
+      title: "AI Automation in Finance",
+      description:
+        "Automate client services, compliance, and reporting with advanced AI tailored for financial institutions.",
+      cta: "See How",
+    },
+    {
+      card: null,
+      image: IMAGE_MEDIA,
+      content_wrapper: null,
+      text_wrapper: null,
+      label: "03",
+      title: "Branded Client Portals",
+      description:
+        "Deliver seamless, secure digital experiences with bespoke UI/UX for your clients and investors.",
+      cta: "Explore More",
+    },
+    {
+      card: null,
+      image: IMAGE_MEDIA,
+      content_wrapper: null,
+      text_wrapper: null,
+      label: "04",
+      title: "Enterprise Security Solutions",
+      description:
+        "Implement robust security measures and compliance frameworks designed for enterprise-level financial operations.",
+      cta: "Learn More",
+    },
+  ],
+};
+
+export type IFeatures3Content = typeof DEFAULT_CONTENT;
+
+export const Features3: IBlock = {
+  category_id: "features",
+  title: "Features 3",
+  key: "features-3",
+  version: "v1",
+  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: "headline_wrapper",
+      label: "Headline Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "cta_wrapper",
+      label: "Cta Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "cta_button",
+      label: "Cta Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "services",
+      label: "Services",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "card",
+          label: "Card",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "text_wrapper",
+          label: "Text Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "cta",
+          label: "Cta",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        container: {
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "base",
+          "padding-right": "base",
+          "padding-top": "7xl",
+          "padding-bottom": "7xl",
+        },
+        header_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "justify-content": "space-between",
+          gap: "2xl",
+          tablet: {
+            "align-items": "start",
+            gap: "3xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "start",
+            gap: "xl",
+          },
+        },
+        headline_wrapper: {
+          tablet: {
+            flex: "1 1 0%",
+          },
+        },
+        title: {
+          "font-size": "3xl",
+          "font-weight": "600",
+          color: "text-1",
+          "line-height": "1.15",
+          "margin-bottom": "0",
+          tablet: {
+            "margin-bottom": "base",
+          },
+          mobile: {
+            "font-size": "2xl",
+            "margin-bottom": "xs",
+          },
+        },
+        cta_wrapper: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "flex-shrink": "0",
+          tablet: {
+            "flex-direction": "column",
+            "align-items": "start",
+            gap: "xl",
+            width: "50%",
+          },
+          mobile: {
+            width: "100%",
+          },
+        },
+        description: {
+          color: "text-2",
+          "font-size": "base",
+          "margin-bottom": "0",
+          "margin-right": "2xl",
+          tablet: {
+            "margin-bottom": "xl",
+            "margin-right": "0",
+            "max-width": "36rem",
+          },
+          mobile: {
+            "font-size": "sm",
+            "margin-bottom": "lg",
+          },
+        },
+        services_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "7xl",
+          "row-gap": "7xl",
+          "margin-top": "12xl",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        services: [
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "100%",
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "2xl",
+            },
+            header: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "3xs",
+            },
+            label: {
+              "font-size": "3xl",
+              "font-weight": "700",
+              color: "text-1",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "2xs",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "base",
+              "margin-bottom": "2xs",
+            },
+            cta: {
+              width: "fit-content",
+            },
+            content_wrapper: {
+              display: "flex",
+              "column-gap": "base",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "100%",
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "2xl",
+            },
+            header: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "3xs",
+            },
+            label: {
+              "font-size": "3xl",
+              "font-weight": "700",
+              color: "text-1",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "2xs",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "base",
+              "margin-bottom": "2xs",
+            },
+            cta: {
+              width: "fit-content",
+            },
+            content_wrapper: {
+              display: "flex",
+              "column-gap": "base",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "100%",
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "2xl",
+            },
+            header: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "3xs",
+            },
+            label: {
+              "font-size": "3xl",
+              "font-weight": "700",
+              color: "text-1",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "2xs",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "base",
+              "margin-bottom": "2xs",
+            },
+            cta: {
+              width: "fit-content",
+            },
+            content_wrapper: {
+              display: "flex",
+              "column-gap": "base",
+            },
+          },
+          {
+            card: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+            image: {
+              width: "100%",
+              height: "18rem",
+              "object-fit": "cover",
+              "border-radius": "2xl",
+            },
+            header: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "3xs",
+            },
+            label: {
+              "font-size": "3xl",
+              "font-weight": "700",
+              color: "text-1",
+            },
+            title: {
+              "font-size": "xl",
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "2xs",
+            },
+            description: {
+              color: "text-2",
+              "font-size": "base",
+              "margin-bottom": "2xs",
+            },
+            cta: {
+              width: "fit-content",
+            },
+            content_wrapper: {
+              display: "flex",
+              "column-gap": "base",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,56 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IFeatures3Content } from "./features-3.schema";
+
+const Features3: React.FC<ILevoBlockBaseProps<IFeatures3Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_wrapper">
+        <Box elementKey="headline_wrapper">
+          <Heading elementKey="title" />
+        </Box>
+        <Typography elementKey="description" />
+        <Box elementKey="cta_wrapper">
+          <Button elementKey="cta_button" />
+        </Box>
+      </Box>
+      <Box data-levo_group elementKey="services_levoGroup">
+        {(content.services ?? []).map((_, index) => (
+          <Box
+            data-levo_group_item
+            elementKey={`services.${index}.card`}
+            key={index}
+          >
+            <Image
+              elementKey={`services.${index}.image`}
+              width={600}
+              height={208}
+              alt={`Service ${index + 1} illustration`}
+            />
+            <Box elementKey={`services.${index}.content_wrapper`}>
+              <Typography elementKey={`services.${index}.label`} />
+              <Box elementKey={`services.${index}.text_wrapper`}>
+                <Heading elementKey={`services.${index}.title`} />
+                <Typography elementKey={`services.${index}.description`} />
+                <Button elementKey={`services.${index}.cta`} />
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Features3;