@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,372 @@
+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 DEFAULT_SLIDES_COUNT = 3;
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_section: null,
+  title: "Dream homes Delivered",
+  cta: "Contact Us",
+  carousel_main_container: null,
+  carousel_navigation: null,
+  carousel_navigation_arrow_left: "←",
+  carousel_navigation_arrow_right: "→",
+
+  slides: Array(DEFAULT_SLIDES_COUNT).fill({
+    slide_wrapper: null,
+    left_container: null,
+    description:
+      "Discover stunning properties in prime locations tailored to your lifestyle.",
+    slide_cta: "Explore Projects",
+    right_container: null,
+    image: DUMMY_IMAGE,
+  }),
+};
+
+export type IHero8Content = typeof DEFAULT_CONTENT;
+
+export const Hero8: IBlock = {
+  category_id: "hero",
+  title: "Hero 8",
+  key: "hero-8",
+  version: "v1",
+  prompt_description:
+    "Hero section with main heading and CTA, followed by a carousel featuring description text, CTA button, and image on each slide with navigation arrows.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure of the hero section with carousel. 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. Not for content, but for spacing and organizational structure only.",
+      },
+    },
+    {
+      key: "header_section",
+      label: "Header Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the main title and CTA button at the top. No content—structural only.",
+      },
+    },
+    {
+      key: "title",
+      label: "Main Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Primary headline for the hero section. Write compelling, action-oriented headlines that capture attention and communicate the main value proposition.",
+        min_characters: 20,
+        max_characters: 80,
+      },
+    },
+    {
+      key: "cta",
+      label: "Main CTA",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Primary call-to-action button for the hero section. Use action-oriented text like 'Get Started', 'Learn More', 'Contact Us'.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "carousel_main_container",
+      label: "Carousel Main Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main container for the entire carousel section. No content—structural only.",
+      },
+    },
+    {
+      key: "carousel_navigation",
+      label: "Carousel Navigation",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for carousel navigation arrows. No content—structural only.",
+      },
+    },
+    {
+      key: "carousel_navigation_arrow_left",
+      label: "Left Arrow",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Left navigation arrow for carousel. Use simple arrow symbol or text like '←' or 'Previous'.",
+        min_characters: 1,
+        max_characters: 10,
+      },
+    },
+    {
+      key: "carousel_navigation_arrow_right",
+      label: "Right Arrow",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Right navigation arrow for carousel. Use simple arrow symbol or text like '→' or 'Next'.",
+        min_characters: 1,
+        max_characters: 10,
+      },
+    },
+    {
+      key: "slides",
+      label: "Slides",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "slide_wrapper",
+          label: "Slide Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for each slide with content and image sections. No content—structural only.",
+          },
+        },
+        {
+          key: "left_container",
+          label: "Left Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the text content, CTA button, and navigation arrows on the left side of each slide. No content—structural only.",
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Detailed description for each slide explaining the benefits, features, or value proposition. Write engaging, informative content that supports the main heading.",
+            min_characters: 50,
+            max_characters: 200,
+          },
+        },
+        {
+          key: "slide_cta",
+          label: "Slide CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for each slide. Use action-oriented text that relates to the slide content.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "right_container",
+          label: "Right Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Container for the image on the right side of each slide. No content—structural only.",
+          },
+        },
+        {
+          key: "image",
+          label: "Slide Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Image for each slide displayed on the right side. Use high-quality, professional images that complement the slide content.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Carousel slides with content on the left (description and CTA) and image on the right. Each slide showcases different aspects or features.",
+        min_items: 2,
+        max_items: 5,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "background-color": "background-1",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "xl",
+          "padding-right": "xl",
+        },
+        header_section: {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "base",
+            "margin-bottom": "xl",
+          },
+        },
+        title: {
+          color: "text-1",
+          mobile: {
+            "text-align": "center",
+          },
+        },
+        cta: {
+          "background-color": "background-2",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-color": "border",
+        },
+        carousel_main_container: {
+          "margin-bottom": "xl",
+        },
+        slides_levoGroup: {},
+        carousel_navigation: {
+          display: "flex",
+          "column-gap": "base",
+          "align-items": "center",
+          "margin-top": "lg",
+        },
+        carousel_navigation_arrow_left: {
+          "background-color": "background-2",
+          color: "text-1",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          "padding-left": "base",
+          "padding-right": "base",
+          "border-color": "border",
+          "border-radius": "base",
+        },
+        carousel_navigation_arrow_right: {
+          "background-color": "background-2",
+          color: "text-1",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          "padding-left": "base",
+          "padding-right": "base",
+          "border-color": "border",
+          "border-radius": "base",
+        },
+        slides: Array(DEFAULT_SLIDES_COUNT).fill({
+          slide_wrapper: {
+            display: "grid",
+            "grid-template-columns": "1fr 1fr",
+            "column-gap": "2xl",
+            "align-items": "center",
+            "min-height": "400px",
+            mobile: {
+              "grid-template-columns": "1fr",
+              "row-gap": "xl",
+              "min-height": "auto",
+            },
+          },
+          left_container: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            mobile: {
+              "text-align": "center",
+              "row-gap": "base",
+            },
+          },
+          description: {
+            "font-size": "lg",
+            "line-height": "1.6",
+            color: "text-1",
+            "max-width": "500px",
+            mobile: {
+              "font-size": "base",
+              "max-width": "100%",
+            },
+          },
+          slide_cta: {
+            "background-color": "background-2",
+            color: "text-1",
+            "padding-top": "sm",
+            "padding-bottom": "sm",
+            "padding-left": "lg",
+            "padding-right": "lg",
+            "border-color": "border",
+            "align-self": "flex-start",
+            mobile: {
+              "align-self": "center",
+            },
+          },
+          right_container: {
+            display: "flex",
+            "justify-content": "center",
+            "align-items": "center",
+            mobile: {
+              order: "-1",
+            },
+          },
+          image: {
+            width: "100%",
+            height: "300px",
+            "object-fit": "cover",
+            "border-radius": "base",
+            mobile: {
+              height: "250px",
+            },
+          },
+        }),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,113 @@
+import type { CarouselApi } from "@levo-so/studio";
+import {
+  type ILevoBlockBaseProps,
+  Box,
+  Button,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Container,
+  Heading,
+  Image,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import { useEffect, useState } from "react";
+
+import type { IHero8Content } from "./hero-8.schema";
+
+const Hero8: React.FC<ILevoBlockBaseProps<IHero8Content>> = ({ 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());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  // Add disabled state logic
+  const isFirstSlide = current === 0;
+  const isLastSlide = current === count - 1;
+
+  const handlePrevious = () => {
+    if (api && !isFirstSlide) {
+      api.scrollTo(current - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (api && !isLastSlide) {
+      api.scrollTo(current + 1);
+    }
+  };
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header_section">
+          <Heading elementKey="title" />
+          <Button elementKey="cta" />
+        </Box>
+        <Box elementKey="carousel_main_container">
+          <Carousel
+            elementKey="slides_levoGroup"
+            setApi={setApi}
+            data-levo_group
+          >
+            <CarouselContent>
+              {(content?.slides ?? []).map((_: any, index: number) => (
+                <CarouselItem key={index} data-levo_group_item>
+                  <Box elementKey={`slides.${index}.slide_wrapper`}>
+                    <Box elementKey={`slides.${index}.left_container`}>
+                      <Typography elementKey={`slides.${index}.description`} />
+                      <Button elementKey={`slides.${index}.slide_cta`} />
+                      {count > 0 && index === current && (
+                        <Box elementKey="carousel_navigation">
+                          <Button
+                            elementKey="carousel_navigation_arrow_left"
+                            onClick={handlePrevious}
+                            disabled={isFirstSlide}
+                            style={{
+                              opacity: isFirstSlide ? 0.5 : 1,
+                              cursor: isFirstSlide ? "not-allowed" : "pointer",
+                            }}
+                          />
+                          <Button
+                            elementKey="carousel_navigation_arrow_right"
+                            onClick={handleNext}
+                            disabled={isLastSlide}
+                            style={{
+                              opacity: isLastSlide ? 0.5 : 1,
+                              cursor: isLastSlide ? "not-allowed" : "pointer",
+                            }}
+                          />
+                        </Box>
+                      )}
+                    </Box>
+                    <Box elementKey={`slides.${index}.right_container`}>
+                      <Image
+                        elementKey={`slides.${index}.image`}
+                        alt="Slide image"
+                      />
+                    </Box>
+                  </Box>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Hero8;