@levo-so/blocks 0.1.1 → 0.1.52

package/src/blocks/logos/logos-1.schema.ts

@@ -0,0 +1,270 @@
+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 LOGOS_LENGTH = 30;
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+
+  // title, description and CTA
+  textWrapper: null,
+  title: "Secure Your Financial Future",
+  description:
+    "Experience the difference of professional financial planning with our proven methodologies.",
+  ctas: [
+    {
+      cta: "Contact Us",
+    },
+  ],
+
+  logos: Array.from({ length: LOGOS_LENGTH }, () => ({
+    wrapper: null,
+    logo: DUMMY_IMAGE,
+  })),
+};
+
+export type ILogos1Content = typeof DEFAULT_CONTENT;
+
+export const Logos1: IBlock = {
+  category_id: "logos",
+  title: "Logos 1",
+  key: "logos-1",
+  version: "v1",
+  prompt_description:
+    "Centered headline, supporting text, and a prominent call-to-action button, with a horizontal auto-scrolling carousel of logos or images beneath.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Top-level block layout for organizing content sections. No content needed.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "A structural container for the central block to ensure proper alignment and spacing. No user-facing content.",
+      },
+    },
+    {
+      key: "textCTAWrapper",
+      label: "Text CTA Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A layout wrapper grouping headline, description, and main call to action. Does not contain user-facing copy.",
+      },
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A sub-container for headline and description text. No direct content required.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "A bold, compelling headline introducing the main value proposition. Should be concise, confident, and aspirational to inspire trust. Centered visually. Aim for 3-7 words.",
+        min_characters: 24, // "Secure Your Financial Future"
+        max_characters: 50, // Allowing some expansion
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "A one-sentence supporting statement elaborating on the headline. Professional, credible, and inviting in tone. Should communicate expertise or unique value. Appears just below the headline, should not exceed two lines.",
+        min_characters: 50,
+        max_characters: 130,
+      },
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary call-to-action button text. Short, actionable, inviting users to engage (e.g., 'Contact Us'). Limit to 2-3 words. Button is visually prominent and centered.",
+            min_characters: 6, // "Contact Us"
+            max_characters: 20,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A group containing one or more CTAs for user interaction. Typically includes a primary action button. Only one visible CTA in this layout.",
+        min_items: 1,
+        max_items: 1,
+      },
+    },
+    {
+      key: "logos",
+      label: "Logos",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "logo",
+          label: "Logo",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "A company or partner logo. Should be clear, well-cropped, and recognizable at small size. Used for visual credibility/social proof. Typically landscape or square, displayed in a row carousel.",
+            orientation: "landscape",
+            size: "small",
+            usecase: "logo",
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A horizontal carousel of company logos for social proof. Should contain recognizable partner or client logos. 10 visible at once; carousel may show up to 30.",
+        min_items: 8, // Number immediately visible on desktop
+        max_items: 16, // Allows full range shown
+      },
+    },
+  ],
+
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        logos_levoGroup: {
+          number_of_slides: 10,
+          tablet: {
+            number_of_slides: 5,
+          },
+          mobile: {
+            number_of_slides: 2,
+          },
+        },
+        logos: Array.from({ length: LOGOS_LENGTH }, () => ({
+          wrapper: {
+            filter: "none",
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+          },
+        })),
+        textCTAWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
+          tablet: {
+            "row-gap": "lg",
+          },
+          mobile: {
+            "row-gap": "sm",
+          },
+        },
+        textWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "4xs",
+        },
+        layout: {
+          "padding-top": "2xl",
+          "padding-bottom": "2xl",
+          "padding-right": "6xl",
+          "padding-left": "6xl",
+          tablet: {
+            "padding-top": "lg",
+            "padding-bottom": "lg",
+            "padding-right": "3xl",
+            "padding-left": "3xl",
+          },
+          mobile: {
+            "padding-top": "base",
+            "padding-bottom": "base",
+            "padding-right": "xl",
+            "padding-left": "xl",
+          },
+        },
+        title: {
+          "text-align": "center",
+          color: "text-1",
+        },
+        description: {
+          "text-align": "center",
+          color: "text-2",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "6xl",
+          tablet: {
+            "row-gap": "3xl",
+          },
+          mobile: {
+            "row-gap": "xl",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+        logos_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 2,
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/logos/logos-1.tsx

@@ -0,0 +1,60 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Image,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@levo-so/studio";
+
+import type { ILogos1Content } from "./logos-1.schema";
+
+const Logos1: React.FC<ILevoBlockBaseProps<ILogos1Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="textCTAWrapper">
+          <Box elementKey="textWrapper">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <Box elementKey="ctas_levoGroup" data-levo_group>
+            {(content.ctas ?? []).map((_, index) => (
+              <Button
+                elementKey={`ctas.${index}.cta`}
+                key={`logos-1-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+        <Carousel
+          elementKey="logos_levoGroup"
+          data-levo_group
+          opts={{
+            watchDrag: false,
+            watchResize: true,
+            watchSlides: true,
+          }}
+        >
+          <CarouselContent className="items-center">
+            {(content?.logos ?? []).map((_, index) => (
+              <CarouselItem key={`logos-1-logo-${index}`} data-levo_group_item>
+                <Box elementKey={`logos.${index}.wrapper`}>
+                  <Image elementKey={`logos.${index}.logo`} alt="Logo" />
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </Container>
+    </Section>
+  );
+};
+
+export default Logos1;