@levo-so/blocks 0.1.1 → 0.1.52

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

@@ -0,0 +1,59 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Icon,
+  Button,
+} from "@levo-so/studio";
+
+import type { ITeam4Content } from "./team-4.schema";
+
+const Team4: React.FC<ILevoBlockBaseProps<ITeam4Content>> = ({ content }) => {
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="header">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="team_levoGroup" data-levo_group>
+          {(content?.team ?? [])?.map((_: any, index: number) => (
+            <Box
+              key={index}
+              data-levo_group_item
+              elementKey={`team.${index}.card`}
+            >
+              <Box elementKey={`team.${index}.info`}>
+                <Box elementKey={`team.${index}.name-position-wrapper`}>
+                  <Heading elementKey={`team.${index}.name`} />
+                </Box>
+                <Box
+                  elementKey={`team.${index}.social_levoGroup`}
+                  data-levo_group
+                >
+                  {(content?.team?.[index]?.social ?? [])?.map(
+                    (_: any, socialIndex: number) => (
+                      <Icon
+                        key={socialIndex}
+                        data-levo_group_item
+                        elementKey={`team.${index}.social.${socialIndex}.icon`}
+                      />
+                    ),
+                  )}
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="cta_wrapper">
+          <Button elementKey="cta" />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Team4;

package/src/blocks/termsAndPrivacy/terms-and-conditions-1.schema.ts

@@ -0,0 +1,158 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  header_content: null,
+  title: "Terms and Conditions",
+  subtitle: "Enterprise Legal Documentation - Effective from January 1, 2025",
+  content_wrapper: null,
+  content:
+    "<h2>1. Agreement to Terms</h2><p>By accessing and using our enterprise platform, you confirm your acceptance of these Terms and Conditions. These terms apply to all users, including clients, partners, and service providers who access our business solutions.</p><h2>2. Service Description</h2><p>Our platform provides comprehensive business technology solutions designed to streamline operations, enhance productivity, and drive growth for enterprises of all sizes. We offer scalable infrastructure, data analytics, and integration services.</p><h2>3. User Responsibilities</h2><p>Users are responsible for maintaining the confidentiality of their account credentials and for all activities that occur under their account. You agree to use our services in compliance with all applicable laws and regulations.</p><h2>4. Data Privacy and Protection</h2><p>We are committed to protecting your data privacy. Our data processing practices comply with industry standards and applicable privacy regulations. We implement robust security measures to safeguard your business information.</p><h2>5. Intellectual Property</h2><p>All content, features, and functionality of our platform are owned by us and are protected by international copyright, trademark, and other intellectual property laws.</p><h2>6. Limitation of Liability</h2><p>Our liability is limited to the maximum extent permitted by law. We provide our services on an 'as is' basis and make no warranties regarding uninterrupted or error-free operation.</p><h2>7. Contact Information</h2><p>For questions regarding these terms, please contact our legal team at legal@company.com or through our official support channels.</p>",
+};
+
+export type ITermsAndConditions1Content = typeof DEFAULT_CONTENT;
+
+export const TermsAndConditions1: IBlock = {
+  category_id: "termsAndPrivacy",
+  title: "Terms and Conditions 1",
+  key: "terms-and-conditions-1",
+  version: "v1",
+  prompt_description:
+    "A comprehensive terms and conditions page with header section containing title and subtitle, followed by detailed legal content in rich text format.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Provides the overall page layout with proper spacing and alignment for legal document presentation.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main content container that ensures proper width constraints and center alignment for readability.",
+      },
+    },
+    {
+      key: "header_content",
+      label: "Header Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Header section wrapper that groups the main title and subtitle with consistent spacing.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main page title for the legal document. Should be clear and professional. Tone: formal, authoritative.",
+        min_characters: 10,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "subtitle",
+      label: "Subtitle",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Subtitle providing additional context such as effective date or document description. Tone: informative, professional.",
+        min_characters: 20,
+        max_characters: 120,
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wrapper for the main legal content area with appropriate spacing and typography styles.",
+      },
+    },
+    {
+      key: "content",
+      label: "Content",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Main legal document content with structured sections, headings, and paragraphs. Should include comprehensive terms covering service usage, responsibilities, privacy, and legal compliance. Tone: formal, clear, legally compliant.",
+        min_characters: 500,
+        max_characters: 10000,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          width: "100%",
+          "padding-top": "8xl",
+          "padding-bottom": "8xl",
+          "background-color": "white",
+        },
+        container: {
+          width: "100%",
+          "margin-left": "auto",
+          "margin-right": "auto",
+          "padding-left": "none",
+          "padding-right": "none",
+          "media:max:768px": {
+            "padding-left": "xl",
+            "padding-right": "xl",
+          },
+          "max-width": "1200px",
+          "padding-top": "none",
+          "padding-bottom": "none",
+        },
+        header_content: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "text-align": "center",
+          "margin-bottom": "6xl",
+          "row-gap": "lg",
+        },
+        title: {
+          color: "text-1",
+        },
+        subtitle: {
+          color: "text-2",
+          "max-width": "2xl",
+        },
+        content_wrapper: {
+          width: "100%",
+        },
+        content: {
+          color: "text-1",
+          "text-align": "justify",
+          "media:max:768px": {
+            "text-align": "left",
+          },
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/termsAndPrivacy/terms-and-conditions-1.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import {
+  Box,
+  Container,
+  Heading,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+
+import type { ITermsAndConditions1Content } from "./terms-and-conditions-1.schema";
+
+const TermsAndConditions1: React.FC<
+  ILevoBlockBaseProps<ITermsAndConditions1Content>
+> = () => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_content">
+        <Heading elementKey="title" />
+        <Typography elementKey="subtitle" />
+      </Box>
+      <Box elementKey="content_wrapper">
+        <Typography elementKey="content" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default TermsAndConditions1;

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

@@ -0,0 +1,351 @@
+import type { IBlock } from "@levo-so/studio";
+
+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_TESTIMONIALS_COUNT = 8;
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+
+  // title, description and CTA
+  textWrapper: null,
+  title: "What Our Clients Say",
+  description:
+    "Hear from our satisfied clients about their experience working with our team.",
+  ctas: [
+    {
+      cta: "View All Testimonials",
+    },
+  ],
+
+  testimonials: Array(DEFAULT_TESTIMONIALS_COUNT).fill({
+    wrapper: null,
+
+    profileWrapper: null,
+    image: DUMMY_ICON,
+    namePositionWrapper: null,
+    name: "John Smith",
+    position: "CEO",
+
+    testimonial:
+      "Navigate complex markets confidently with our expert financial advisory services.",
+  }),
+};
+
+export type ITestimonial1Content = typeof DEFAULT_CONTENT;
+
+export const Testimonial1: IBlock = {
+  category_id: "testimonial",
+  title: "Testimonial 1",
+  key: "testimonial-1",
+  version: "v1",
+  prompt_description:
+    "Centered headline, subheadline, and button above a horizontally auto-scrolling carousel of testimonial cards with client photos, names, roles, and brief quotes.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall layout structure of the testimonial section block, keeping content centered and spaced for visual emphasis. No content generation required—used for layout only.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main outer container to provide padding and alignment for testimonial section. Not for content, but for spacing and organizational structure only.",
+      },
+    },
+    // Title, description and CTA
+    {
+      key: "textCTAWrapper",
+      label: "Text CTA Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container that vertically stacks the section heading, description, and the call-to-action button in the top center of the block. No content generation—structural use.",
+      },
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Groups the heading and subheading text, ensuring central alignment and consistent spacing. No content—structural use.",
+      },
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Primary headline introducing the testimonial section. Write a clear, inviting headline that builds trust—example: 'What Our Clients Say'. Use a confident, aspirational but neutral tone.",
+        min_characters: 16,
+        max_characters: 40,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short subheadline that explains the purpose of this section (sharing positive client experiences). Use a friendly, inviting, and concise tone.",
+        min_characters: 40,
+        max_characters: 120,
+      },
+    },
+    {
+      key: "ctas",
+      label: "CTAs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Main call-to-action button below the description, encouraging visitors to read more testimonials. Text should be direct, action-oriented, and brief (e.g., 'View All Testimonials').",
+            min_characters: 8,
+            max_characters: 32,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "Wrapper for call-to-action buttons (typically one). The button prompts users to view all testimonials.",
+        min_items: 1,
+        max_items: 2,
+      },
+    },
+    {
+      key: "testimonials",
+      label: "Testimonials",
+      field_interface: "CarouselWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Card container for individual testimonial, used for visual grouping and spacing. No content—structural only.",
+          },
+        },
+        {
+          key: "profileWrapper",
+          label: "Profile Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Groups together the client avatar, name, and position for layout purposes inside the card. Structural only.",
+          },
+        },
+        {
+          key: "image",
+          label: "Image",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Client avatar displayed as a small, circular portrait to the left of their name. Use a neutral or professional style avatar if not available.",
+            orientation: "square",
+            size: "small",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "namePositionWrapper",
+          label: "Name Position Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Holds the client's name and position, keeping them visually grouped next to the avatar. No content—structural only.",
+          },
+        },
+        {
+          key: "name",
+          label: "Name",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "The full name of the client giving the testimonial. Use a realistic, professional-sounding name.",
+            min_characters: 5,
+            max_characters: 24,
+          },
+        },
+        {
+          key: "position",
+          label: "Position",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "The professional title or position of the client listed under their name. Keep it concise (e.g., CEO, Founder, Marketing Director).",
+            min_characters: 2,
+            max_characters: 32,
+          },
+        },
+        {
+          key: "testimonial",
+          label: "Testimonial",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "A brief, authentic-sounding client quote describing their positive experience. Write in first-person and keep the tone genuine and professional.",
+            min_characters: 60,
+            max_characters: 150,
+          },
+        },
+      ],
+      hint: {
+        prompt_description:
+          "A horizontally scrollable group of testimonial cards, each showing a client avatar, name, position, and a brief quote. Use for displaying client feedback in a visually appealing carousel.",
+        min_items: 4,
+        max_items: 10,
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        testimonials_levoGroup: {
+          number_of_slides: 4,
+          tablet: {
+            number_of_slides: 2,
+          },
+          mobile: {
+            number_of_slides: 1,
+          },
+        },
+        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",
+          },
+        },
+        testimonials: Array(DEFAULT_TESTIMONIALS_COUNT).fill({
+          wrapper: {
+            "border-solid": "solid",
+            "border-width": "1px",
+            "border-color": "var(--color-border)",
+            "border-radius": "base",
+            padding: "xl",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+          profileWrapper: {
+            display: "flex",
+            "column-gap": "2xs",
+          },
+          image: {
+            height: "40px",
+            width: "40px",
+            "border-radius": "base",
+            "object-fit": "cover",
+            "border-solid": "solid",
+            "border-width": "1px",
+            "border-color": "var(--color-border)",
+          },
+          name: {
+            color: "text-1",
+          },
+          testimonial: {
+            color: "text-2",
+            overflow: "hidden",
+            display: "-webkit-box",
+            "-webkit-box-orient": "vertical",
+            "-webkit-line-clamp": 2,
+          },
+        }),
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        testimonials_levoGroup: {
+          carousel: {
+            loop: true,
+            autoScroll: true,
+            speed: 2,
+          },
+        },
+        title: {
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+          heading: {
+            level: 2,
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,79 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Image,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  Icon,
+} from "@levo-so/studio";
+
+import type { ITestimonial1Content } from "./testimonial-1.schema";
+
+const Testimonial1: React.FC<ILevoBlockBaseProps<ITestimonial1Content>> = ({
+  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={`testimonial-1-cta-${index}`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+        <Carousel
+          elementKey="testimonials_levoGroup"
+          data-levo_group
+          opts={{
+            watchDrag: false,
+            watchResize: true,
+            watchSlides: true,
+          }}
+        >
+          <CarouselContent>
+            {(content?.testimonials ?? []).map((_, index) => (
+              <CarouselItem
+                key={`testimonial-1-item-${index}`}
+                data-levo_group_item
+              >
+                <Box elementKey={`testimonials.${index}.wrapper`}>
+                  <Box elementKey={`testimonials.${index}.profileWrapper`}>
+                    <Icon elementKey={`testimonials.${index}.image`} />
+                    <Box
+                      elementKey={`testimonials.${index}.namePositionWrapper`}
+                    >
+                      <Typography elementKey={`testimonials.${index}.name`} />
+                      <Typography
+                        elementKey={`testimonials.${index}.position`}
+                      />
+                    </Box>
+                  </Box>
+                  <Typography
+                    elementKey={`testimonials.${index}.testimonial`}
+                  />
+                </Box>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </Container>
+    </Section>
+  );
+};
+
+export default Testimonial1;