@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,325 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  slider_dots: null,
+  slider_dot: null,
+  slides: [
+    {
+      wrapper: null,
+      headerWrapper: null,
+      title: "Your Trusted Partner in Financial Excellence",
+      cta: "Get Started",
+      image: DEFAULT_IMAGE,
+    },
+    {
+      wrapper: null,
+      headerWrapper: null,
+      title: "Smart Investment Solutions for Your Future",
+      cta: "Invest Now",
+      image: DEFAULT_IMAGE,
+    },
+    {
+      wrapper: null,
+      headerWrapper: null,
+      title: "Secure Digital Banking at Your Fingertips",
+      cta: "Open Account",
+      image: DEFAULT_IMAGE,
+    },
+    {
+      wrapper: null,
+      headerWrapper: null,
+      title: "Expert Financial Planning for Business Growth",
+      cta: "Learn More",
+      image: DEFAULT_IMAGE,
+    },
+  ],
+};
+
+export type IHero4Content = typeof DEFAULT_CONTENT;
+
+export const Hero4: IBlock = {
+  category_id: "hero",
+  title: "Hero 4",
+  key: "hero-4",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "slider_dots",
+      label: "Slider Dots",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "slider_dot",
+      label: "Slider Dot",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "slides",
+      label: "Slides",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Slide Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "headerWrapper",
+          label: "Header Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "cta",
+          label: "CTA Button",
+          field_interface: "ButtonWidget",
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "ImageWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "3xl",
+          "padding-right": "3xl",
+          "padding-top": "7xl",
+          "padding-bottom": "5xl",
+          mobile: {
+            "padding-top": "none",
+            "padding-left": "none",
+            "padding-right": "none",
+            "padding-bottom": "none",
+          },
+        },
+        container: {
+          position: "relative",
+          "max-width": "72rem",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        slider_dots: {
+          position: "absolute",
+          bottom: "30px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          "column-gap": "2xs",
+          "align-items": "center",
+          "z-index": "20",
+          "padding-top": "4xs",
+          "padding-right": "4xs",
+          "padding-bottom": "4xs",
+          "padding-left": "4xs",
+          "background-color": "text-2",
+          "border-radius": "3xl",
+          tablet: {
+            bottom: "20px",
+          },
+          mobile: {
+            bottom: "10px",
+          },
+        },
+        slider_dot: {
+          width: "8px",
+          height: "8px",
+          "border-radius": "50%",
+          "background-color": "var(--color-brand-secondary)",
+        },
+        slides_levoGroup: {
+          width: "100%",
+          height: "100%",
+        },
+        slides: [
+          {
+            headerWrapper: {
+              display: "flex",
+              "align-items": "end",
+              "justify-content": "space-between",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "justify-content": "center",
+                "padding-left": "6xs",
+                "padding-top": "6xs",
+                "padding-right": "6xs",
+                "row-gap": "4xs",
+              },
+              tablet: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "row-gap": "sm",
+              },
+            },
+            title: {
+              "font-size": "4xl",
+              "font-weight": "600",
+              "line-height": "1.2",
+              "max-width": "42rem",
+              mobile: {
+                "font-size": "3xl",
+              },
+              tablet: {
+                "text-align": "center",
+                "font-size": "3xl",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "100%",
+              "object-fit": "cover",
+              "object-position": "center",
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+          {
+            headerWrapper: {
+              display: "flex",
+              "align-items": "end",
+              "justify-content": "space-between",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "justify-content": "center",
+              },
+            },
+            title: {
+              "font-size": "4xl",
+              "font-weight": "600",
+              "line-height": "1.2",
+              "max-width": "42rem",
+              mobile: {
+                "font-size": "3xl",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "100%",
+              "object-fit": "cover",
+              "object-position": "center",
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+          {
+            headerWrapper: {
+              display: "flex",
+              "align-items": "end",
+              "justify-content": "space-between",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "justify-content": "center",
+              },
+            },
+            title: {
+              "font-size": "4xl",
+              "font-weight": "600",
+              "line-height": "1.2",
+              "max-width": "42rem",
+              mobile: {
+                "font-size": "3xl",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "100%",
+              "object-fit": "cover",
+              "object-position": "center",
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+          {
+            headerWrapper: {
+              display: "flex",
+              "align-items": "end",
+              "justify-content": "space-between",
+              mobile: {
+                "flex-direction": "column",
+                "align-items": "center",
+                "justify-content": "center",
+              },
+            },
+            title: {
+              "font-size": "4xl",
+              "font-weight": "600",
+              "line-height": "1.2",
+              "max-width": "42rem",
+              mobile: {
+                "font-size": "3xl",
+              },
+            },
+            image: {
+              width: "100%",
+              height: "100%",
+              "object-fit": "cover",
+              "object-position": "center",
+            },
+            wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "base",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,89 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Container,
+  Section,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { IHero4Content } from "./hero-4.schema";
+
+const Hero4: React.FC<ILevoBlockBaseProps<IHero4Content>> = ({ content }) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Carousel elementKey="slides_levoGroup" setApi={setApi} data-levo_group>
+          <CarouselContent className="h-full">
+            {(content?.slides ?? [])?.map((_, index) => (
+              <CarouselItem key={index} className="relative h-full w-full">
+                <Box
+                  elementKey={`slides.${index}.wrapper`}
+                  data-levo_group_item
+                >
+                  <Box elementKey={`slides.${index}.headerWrapper`}>
+                    <Heading elementKey={`slides.${index}.title`} />
+                    <Button elementKey={`slides.${index}.cta`} />
+                  </Box>
+                  <Image
+                    elementKey={`slides.${index}.image`}
+                    alt="hero image"
+                  />
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        {count > 0 && (
+          <Box elementKey="slider_dots">
+            {Array(count)
+              ?.fill(0)
+              ?.map((_, index) => (
+                <Box
+                  key={index}
+                  elementKey="slider_dot"
+                  style={
+                    index + 1 === current
+                      ? {
+                          backgroundColor: "var(--color-brand)",
+                        }
+                      : {}
+                  }
+                  onClick={() => {
+                    if (api) {
+                      api?.scrollTo(index);
+                    }
+                  }}
+                />
+              ))}
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Hero4;

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

@@ -0,0 +1,192 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_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",
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  headerWrapper: null,
+  title: "Your Trusted Partner in Financial Excellence",
+  cta: "Get Started",
+  slider_dots: null,
+  slider_dot: null,
+  images: [
+    {
+      image: DEFAULT_IMAGE,
+    },
+    {
+      image: DEFAULT_IMAGE,
+    },
+    {
+      image: DEFAULT_IMAGE,
+    },
+    {
+      image: DEFAULT_IMAGE,
+    },
+  ],
+};
+
+export type IHero5Content = typeof DEFAULT_CONTENT;
+
+export const Hero5: IBlock = {
+  category_id: "hero",
+  title: "Hero 5",
+  key: "hero-5",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "headerWrapper",
+      label: "Header Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "cta",
+      label: "CTA Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "slider_dots",
+      label: "Slider Dots",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "slider_dot",
+      label: "Slider Dot",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "images",
+      label: "Images",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "MediaWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        container: {
+          position: "relative",
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          tablet: {
+            "padding-bottom": "5xl",
+            "padding-left": "5xl",
+            "padding-right": "5xl",
+            "padding-top": "5xl",
+          },
+          mobile: {
+            "padding-bottom": "2xl",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+            "padding-top": "2xl",
+          },
+        },
+        slider_dots: {
+          position: "absolute",
+          bottom: "130px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          "column-gap": "2xs",
+          "align-items": "center",
+          "z-index": "20",
+          "padding-top": "4xs",
+          "padding-right": "4xs",
+          "padding-bottom": "4xs",
+          "padding-left": "4xs",
+          "background-color": "text-2",
+          "border-radius": "3xl",
+          tablet: {
+            bottom: "70px",
+          },
+          mobile: {
+            bottom: "50px",
+          },
+        },
+        slider_dot: {
+          width: "8px",
+          height: "8px",
+          "border-radius": "50%",
+          "background-color": "var(--color-brand-secondary)",
+        },
+        slides_levoGroup: {
+          width: "100%",
+          height: "100%",
+        },
+        headerWrapper: {
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "margin-bottom": "7xl",
+          tablet: {
+            "flex-direction": "column",
+            "row-gap": "base",
+            "margin-bottom": "3xl",
+          },
+        },
+        title: {
+          "font-size": "4xl",
+          tablet: {
+            "font-size": "3xl",
+            "text-align": "center",
+          },
+        },
+        cta: {
+          tablet: {
+            filter: "none",
+          },
+          mobile: {
+            filter: "none",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

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

@@ -0,0 +1,86 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Container,
+  Section,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { IHero5Content } from "./hero-5.schema";
+
+const Hero5: React.FC<ILevoBlockBaseProps<IHero5Content>> = ({ content }) => {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="headerWrapper">
+          <Heading elementKey="title" />
+          <Button elementKey="cta" />
+        </Box>
+
+        <Carousel elementKey="images_levoGroup" setApi={setApi} data-levo_group>
+          <CarouselContent className="h-full">
+            {(content?.images ?? [])?.map((_, index) => (
+              <CarouselItem key={index} className="relative h-full w-full">
+                <Image
+                  elementKey={`images.${index}.image`}
+                  alt={`hero image ${index + 1}`}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+
+        {count > 0 && (
+          <Box elementKey="slider_dots">
+            {Array(count)
+              ?.fill(0)
+              ?.map((_, index) => (
+                <Box
+                  key={index}
+                  elementKey="slider_dot"
+                  style={
+                    index + 1 === current
+                      ? {
+                          backgroundColor: "var(--color-brand)",
+                        }
+                      : {}
+                  }
+                  onClick={() => {
+                    if (api) {
+                      api?.scrollTo(index);
+                    }
+                  }}
+                />
+              ))}
+          </Box>
+        )}
+      </Container>
+    </Section>
+  );
+};
+
+export default Hero5;