@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,338 @@
+import type { IBlock } from "@levo-so/studio";
+
+// Extract image object into a constant for reusability
+const FEATURE_IMAGE = {
+  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",
+  },
+};
+
+// Array of features content
+const FEATURES_CONTENT = [
+  {
+    card: null,
+    image: FEATURE_IMAGE,
+    content_wrapper: null,
+    number: null,
+    text_wrapper: null,
+    label: "01",
+    title: "AI-Powered Website Development",
+    description:
+      "Transform your digital banking with secure, scalable AI websites and client portals.",
+  },
+  {
+    card: null,
+    image: FEATURE_IMAGE,
+    content_wrapper: null,
+    number: null,
+    text_wrapper: null,
+    label: "02",
+    title: "Automated Client Services",
+    description:
+      "Streamline operations with AI chatbots, analytics, and automated compliance reporting.",
+  },
+  {
+    card: null,
+    image: FEATURE_IMAGE,
+    content_wrapper: null,
+    number: null,
+    text_wrapper: null,
+    label: "03",
+    title: "SEO & Digital Growth",
+    description:
+      "Increase brand authority and drive client acquisition with targeted financial marketing.",
+  },
+  {
+    card: null,
+    image: FEATURE_IMAGE,
+    content_wrapper: null,
+    number: null,
+    text_wrapper: null,
+    label: "04",
+    title: "Advanced Analytics",
+    description:
+      "Gain deep insights into customer behavior and optimize your financial services with AI-driven analytics.",
+  },
+];
+
+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",
+  features_levoGroup: null,
+  features: FEATURES_CONTENT,
+};
+
+export type IFeatures2Content = typeof DEFAULT_CONTENT;
+
+// Feature field styles
+const FEATURE_STYLE = {
+  card: {
+    display: "flex",
+    "flex-direction": "column",
+    gap: "xl",
+  },
+  image: {
+    width: "100%",
+    height: "12rem",
+    "object-fit": "cover",
+    "border-radius": "xl",
+  },
+  content_wrapper: {
+    display: "flex",
+    "align-items": "start",
+    gap: "lg",
+  },
+  number: {
+    "font-size": "3xl",
+    "font-weight": "700",
+    color: "text-1",
+  },
+  text_wrapper: {
+    flex: "1 1 0%",
+  },
+  label: {
+    "font-size": "4xl",
+    "font-weight": "700",
+    color: "text-1",
+    "line-height": "1",
+    "min-width": "4rem",
+  },
+  title: {
+    "font-size": "xl",
+    "font-weight": "600",
+    color: "text-1",
+    "margin-bottom": "xs",
+  },
+  description: {
+    color: "text-2",
+    "font-size": "base",
+  },
+};
+
+const FEATURES_STYLES = Array(4).fill(FEATURE_STYLE);
+
+export const Features2: IBlock = {
+  category_id: "features",
+  title: "Features 2",
+  key: "features-2",
+  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: "features_levoGroup",
+      label: "Features Levo Group",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "features",
+      label: "Features",
+      kind: "group",
+      field_interface: "CarouselWidget",
+      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: "number",
+          label: "Number",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "text_wrapper",
+          label: "Text Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+        },
+      ],
+    },
+  ],
+  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",
+          "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",
+          },
+        },
+        features_levoGroup: {
+          number_of_slides: 2.5,
+          "margin-top": "12xl",
+          tablet: {
+            number_of_slides: 2,
+          },
+          mobile: {
+            number_of_slides: 1,
+          },
+        },
+        features: FEATURES_STYLES,
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        features_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 2,
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,66 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+
+import type { IFeatures2Content } from "./features-2.schema";
+
+const Features2: React.FC<ILevoBlockBaseProps<IFeatures2Content>> = ({
+  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>
+      <Carousel
+        elementKey="features_levoGroup"
+        data-levo_group
+        opts={{
+          watchDrag: false,
+          watchResize: true,
+          watchSlides: true,
+        }}
+      >
+        <CarouselContent>
+          {(content.features ?? []).map((_, index) => (
+            <CarouselItem key={`features-2-item-${index}`} data-levo_group_item>
+              <Box elementKey={`features.${index}.card`}>
+                <Image
+                  alt="feature"
+                  elementKey={`features.${index}.image`}
+                  width={600}
+                  height={192}
+                />
+                <Box elementKey={`features.${index}.content_wrapper`}>
+                  <Typography elementKey={`features.${index}.label`} />
+                  <Box elementKey={`features.${index}.text_wrapper`}>
+                    <Heading elementKey={`features.${index}.title`} />
+                    <Typography elementKey={`features.${index}.description`} />
+                  </Box>
+                </Box>
+              </Box>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </Container>
+  </Section>
+);
+
+export default Features2;