@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,62 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Typography,
+  Section,
+  Container,
+  Box,
+  Media,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+
+import type { IHero6Content } from "./hero-6.schema";
+
+const Hero6: React.FC<ILevoBlockBaseProps<IHero6Content>> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="content_wrapper">
+        <Typography elementKey="label" />
+        <Heading elementKey="title" />
+        <Typography elementKey="description" />
+
+        <Box elementKey="stats_levoGroup" data-levo_group>
+          {(content?.stats ?? []).map((_: any, index: number) => (
+            <Box
+              key={`hero-6-stat-${index}`}
+              data-levo_group_item
+              elementKey={`stats.${index}.stat_wrapper`}
+            >
+              <Heading elementKey={`stats.${index}.value`} />
+              <Typography elementKey={`stats.${index}.label`} />
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
+      <Carousel
+        elementKey="media_collage_levoGroup"
+        data-levo_group
+        opts={{
+          watchDrag: false,
+          watchResize: true,
+          watchSlides: true,
+        }}
+      >
+        <CarouselContent>
+          {(content?.media_collage ?? []).map((_: any, index: number) => (
+            <CarouselItem key={`hero-6-media-${index}`} data-levo_group_item>
+              <Media
+                elementKey={`media_collage.${index}.image`}
+                alt={`Healthcare professional ${index + 1}`}
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </Container>
+  </Section>
+);
+
+export default Hero6;

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

@@ -0,0 +1,508 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_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 DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_SLIDES_COUNT = 3;
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  slider_dots: null,
+  slider_dot: null,
+
+  slides: Array(DEFAULT_SLIDES_COUNT).fill({
+    slide_wrapper: null,
+    background_image: DUMMY_IMAGE,
+    content_wrapper: null,
+    metadata_wrapper: null,
+    date_time_wrapper: null,
+    date_wrapper: null,
+    calendar_icon: DUMMY_ICON,
+    date: "September 28, 2025",
+    time_wrapper: null,
+    time_icon: DUMMY_ICON,
+    time: "10 min read",
+    title:
+      "Wellness isn't a destination — it's the small choices you make each day that shape a healthier, calmer you",
+    description:
+      "Discover the power of mindful living and how small daily practices can transform your overall well-being and bring lasting peace to your life.",
+    author_wrapper: null,
+    avatar: DUMMY_ICON,
+    author_name: "Lily Morphine",
+    ctas_wrapper: null,
+    primary_cta: "Read Article",
+    secondary_cta: "Save for Later",
+  }),
+};
+
+export type IHero7Content = typeof DEFAULT_CONTENT;
+
+export const Hero7: IBlock = {
+  category_id: "hero",
+  title: "Hero 7",
+  key: "hero-7",
+  version: "v1",
+  prompt_description:
+    "Full-screen hero carousel with background images, centered content overlay featuring label, headline, description, and dual call-to-action buttons on each slide.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure of the full-screen hero carousel section. No content generation required—used for layout only.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container to provide padding and alignment for hero content overlay. Not for content, but for spacing and organizational structure only.",
+      },
+    },
+    {
+      key: "slider_dots",
+      label: "Slider Dots",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for carousel navigation dots. No content—structural only.",
+      },
+    },
+    {
+      key: "slider_dot",
+      label: "Slider Dot",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Individual carousel navigation dot. No content—structural only.",
+      },
+    },
+    {
+      key: "slides",
+      label: "Slides",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "slide_wrapper",
+          label: "Slide Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Full-screen slide container that holds the background image and content overlay. No content—structural only.",
+          },
+        },
+        {
+          key: "background_image",
+          label: "Background Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Full-screen background image for the slide. Use high-quality, professional images that complement the content and maintain good contrast for text overlay.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "content_wrapper",
+          label: "Content Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the centered content overlay including label, title, description, and buttons. No content—structural only.",
+          },
+        },
+        {
+          key: "metadata_wrapper",
+          label: "Metadata Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Main container for date, time, and other metadata elements. No content—structural only.",
+          },
+        },
+        {
+          key: "date_time_wrapper",
+          label: "Date Time Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for date and time elements arranged horizontally. No content—structural only.",
+          },
+        },
+        {
+          key: "date_wrapper",
+          label: "Date Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for calendar icon and date text. No content—structural only.",
+          },
+        },
+        {
+          key: "calendar_icon",
+          label: "Calendar Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small calendar icon displayed next to the date. Should be simple and clearly recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "date",
+          label: "Date",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Publication or event date displayed next to calendar icon. Use format like 'September 28, 2025'.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "time_wrapper",
+          label: "Time Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for time icon and time description. No content—structural only.",
+          },
+        },
+        {
+          key: "time_icon",
+          label: "Time Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small time/clock icon displayed next to the time description. Should be simple and recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "time",
+          label: "Time",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Time description such as reading time or duration. Examples: '10 min read', '5 min video', '30 min session'.",
+            min_characters: 6,
+            max_characters: 15,
+          },
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Primary headline for the slide. Write compelling, action-oriented headlines that capture attention and communicate the main value proposition.",
+            min_characters: 20,
+            max_characters: 80,
+          },
+        },
+
+        {
+          key: "author_wrapper",
+          label: "Author Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for author avatar and name. No content—structural only.",
+          },
+        },
+        {
+          key: "avatar",
+          label: "Avatar",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Author's profile picture displayed as a small, circular avatar next to their name.",
+            orientation: "square",
+            size: "small",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author_name",
+          label: "Author Name",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "The full name of the content author or speaker. Use a realistic, professional-sounding name.",
+            min_characters: 5,
+            max_characters: 30,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Full-screen carousel slides with background images and content overlay. Each slide features a label, headline, description, and dual call-to-action buttons.",
+        min_items: 2,
+        max_items: 5,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          position: "relative",
+          height: "100vh",
+          "min-height": "600px",
+          overflow: "hidden",
+        },
+        slider_dots: {
+          position: "absolute",
+          bottom: "130px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          display: "flex",
+          "column-gap": "xs",
+          "align-items": "center",
+          "z-index": "20",
+          tablet: {
+            bottom: "70px",
+          },
+          mobile: {
+            bottom: "50px",
+          },
+        },
+        slider_dot: {
+          width: "12px",
+          height: "12px",
+          "border-radius": "50%",
+          cursor: "pointer",
+          "background-color": "rgba(255, 255, 255, 0.5)",
+        },
+        slides_levoGroup: {
+          number_of_slides: 1,
+          height: "100%",
+        },
+        container: {
+          position: "relative",
+          "z-index": "2",
+          height: "100%",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+        },
+        slides: Array(DEFAULT_SLIDES_COUNT).fill({
+          slide_wrapper: {
+            position: "relative",
+            height: "100vh",
+            "min-height": "600px",
+            width: "100%",
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "background-size": "cover",
+            "background-position": "center",
+            "background-repeat": "no-repeat",
+            "background-attachment": "fixed",
+            mobile: {
+              "background-attachment": "scroll",
+            },
+          },
+          content_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "text-align": "center",
+            "row-gap": "lg",
+            "max-width": "800px",
+            "padding-left": "xl",
+            "padding-right": "xl",
+            position: "relative",
+            "z-index": "2",
+            mobile: {
+              "row-gap": "base",
+              "max-width": "100%",
+            },
+          },
+          metadata_wrapper: {
+            display: "flex",
+            "flex-direction": "column",
+            "align-items": "center",
+            "row-gap": "xs",
+          },
+          date_time_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "lg",
+            mobile: {
+              "flex-direction": "column",
+              "row-gap": "2xs",
+              "column-gap": "none",
+            },
+          },
+          date_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          calendar_icon: {
+            width: "16px",
+            height: "16px",
+            filter: "brightness(0) invert(1)",
+          },
+          date: {
+            "font-size": "sm",
+            "font-weight": "500",
+            color: "rgba(255, 255, 255, 0.9)",
+            "text-shadow": "0 1px 2px rgba(0, 0, 0, 0.3)",
+          },
+          time_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "2xs",
+          },
+          time_icon: {
+            width: "16px",
+            height: "16px",
+            filter: "brightness(0) invert(1)",
+          },
+          time: {
+            "font-size": "sm",
+            "font-weight": "500",
+            color: "rgba(255, 255, 255, 0.9)",
+            "text-shadow": "0 1px 2px rgba(0, 0, 0, 0.3)",
+          },
+          title: {
+            "font-size": "4xl",
+            "font-weight": "700",
+            "line-height": "1.1",
+            color: "white",
+            "text-shadow": "0 2px 4px rgba(0, 0, 0, 0.3)",
+            "margin-top": "base",
+            tablet: {
+              "font-size": "3xl",
+            },
+            mobile: {
+              "font-size": "2xl",
+            },
+          },
+          description: {
+            "font-size": "lg",
+            "line-height": "1.6",
+            color: "rgba(255, 255, 255, 0.9)",
+            "text-shadow": "0 1px 2px rgba(0, 0, 0, 0.3)",
+            tablet: {
+              "font-size": "base",
+            },
+          },
+          author_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+            "margin-top": "base",
+          },
+          avatar: {
+            width: "40px",
+            height: "40px",
+            "border-radius": "50%",
+            "object-fit": "cover",
+            "border-width": "2px",
+            "border-style": "solid",
+            "border-color": "rgba(255, 255, 255, 0.2)",
+          },
+          author_name: {
+            "font-size": "base",
+            "font-weight": "500",
+            color: "rgba(255, 255, 255, 0.9)",
+            "text-shadow": "0 1px 2px rgba(0, 0, 0, 0.3)",
+          },
+          ctas_wrapper: {
+            display: "flex",
+            "column-gap": "base",
+            "align-items": "center",
+            "margin-top": "lg",
+            mobile: {
+              "flex-direction": "column",
+              "row-gap": "sm",
+              "column-gap": "none",
+            },
+          },
+          primary_cta: {
+            "background-color": "white",
+            color: "var(--color-text-1)",
+            "padding-top": "base",
+            "padding-bottom": "base",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+            "border-radius": "6px",
+            "font-weight": "600",
+            "font-size": "base",
+            "border-width": "2px",
+            "border-style": "solid",
+            "border-color": "white",
+          },
+          secondary_cta: {
+            "background-color": "transparent",
+            color: "white",
+            "padding-top": "base",
+            "padding-bottom": "base",
+            "padding-left": "2xl",
+            "padding-right": "2xl",
+            "border-radius": "6px",
+            "font-weight": "600",
+            "font-size": "base",
+            "border-width": "2px",
+            "border-style": "solid",
+            "border-color": "white",
+          },
+        }),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        slides_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 4,
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,115 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { IHero7Content } from "./hero-7.schema";
+
+const Hero7: React.FC<ILevoBlockBaseProps<IHero7Content>> = ({ 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">
+      <Carousel
+        elementKey="slides_levoGroup"
+        setApi={setApi}
+        data-levo_group
+        opts={{
+          watchDrag: false,
+          watchResize: true,
+          watchSlides: true,
+        }}
+      >
+        <CarouselContent>
+          {(content?.slides ?? []).map((_: any, index: number) => (
+            <CarouselItem key={`hero-7-slide-${index}`} data-levo_group_item>
+              <Box
+                elementKey={`slides.${index}.slide_wrapper`}
+                style={{
+                  backgroundImage: `url(${content?.slides?.[index]?.background_image?.location || ""})`,
+                }}
+              >
+                <Container elementKey="container">
+                  <Box elementKey={`slides.${index}.content_wrapper`}>
+                    <Box elementKey={`slides.${index}.metadata_wrapper`}>
+                      <Box elementKey={`slides.${index}.date_time_wrapper`}>
+                        <Box elementKey={`slides.${index}.date_wrapper`}>
+                          <Icon elementKey={`slides.${index}.calendar_icon`} />
+                          <Typography elementKey={`slides.${index}.date`} />
+                        </Box>
+                        <Box elementKey={`slides.${index}.time_wrapper`}>
+                          <Icon elementKey={`slides.${index}.time_icon`} />
+                          <Typography elementKey={`slides.${index}.time`} />
+                        </Box>
+                      </Box>
+                    </Box>
+                    <Heading elementKey={`slides.${index}.title`} />
+                    <Box elementKey={`slides.${index}.author_wrapper`}>
+                      <Icon elementKey={`slides.${index}.avatar`} />
+                      <Typography elementKey={`slides.${index}.author_name`} />
+                    </Box>
+                  </Box>
+                </Container>
+              </Box>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      {count > 0 && (
+        <Box elementKey="slider_dots">
+          {Array(count)
+            ?.fill(0)
+            ?.map((_, dotIndex) => (
+              <Box
+                key={dotIndex}
+                elementKey="slider_dot"
+                style={{
+                  height: "10px",
+                  width: dotIndex + 1 === current ? "40px" : "10px",
+                  backgroundColor:
+                    dotIndex + 1 === current ? "#fff" : "#D9D9D9",
+                  borderRadius: "9999px",
+                  marginRight: "4px",
+                  transition: "all 0.3s ease",
+                  cursor: "pointer",
+                }}
+                onClick={() => {
+                  if (api) {
+                    api?.scrollTo(dotIndex);
+                  }
+                }}
+              />
+            ))}
+        </Box>
+      )}
+    </Section>
+  );
+};
+
+export default Hero7;