@levo-so/blocks 0.1.54 → 0.1.58

package/src/blocks/services/service-1.tsx

@@ -0,0 +1,139 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Icon,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Button,
+} from "@levo-so/studio";
+
+import type { IService1Content } from "./service-1.schema";
+
+const Service1: React.FC<ILevoBlockBaseProps<IService1Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="main-wrapper">
+        <Box elementKey="left-container">
+          <Box elementKey="content-box">
+            <Heading elementKey="main-title" />
+
+            <AccordionRoot
+              type="single"
+              elementKey="services-accordion_levoGroup"
+              data-levo_group
+              defaultValue={`item-0`}
+            >
+              {(content?.["services-accordion"] ?? []).map((_, index) => (
+                <AccordionItem
+                  value={`item-${index}`}
+                  key={index}
+                  elementKey={`services-accordion.${index}.wrapper`}
+                  data-levo_group_item
+                >
+                  <AccordionTrigger
+                    elementKey={`services-accordion.${index}.trigger`}
+                  >
+                    <Box
+                      elementKey={`services-accordion.${index}.iconQuestionWrapper`}
+                    >
+                      <Typography
+                        elementKey={`services-accordion.${index}.question`}
+                      />
+                    </Box>
+                  </AccordionTrigger>
+                  <AccordionContent
+                    elementKey={`services-accordion.${index}.content`}
+                  >
+                    <Typography
+                      elementKey={`services-accordion.${index}.answer`}
+                    />
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </AccordionRoot>
+          </Box>
+
+          <Box elementKey="features-section">
+            <Heading elementKey="features-title" />
+            <Box elementKey="features-list_levoGroup" data-levo_group>
+              {(content?.["features-list"] ?? []).map((_, index) => (
+                <Typography
+                  key={index}
+                  elementKey={`features-list.${index}.title`}
+                />
+              ))}
+            </Box>
+          </Box>
+        </Box>
+
+        <Box elementKey="right-container">
+          <Box elementKey="service-cards_levoGroup" data-levo_group>
+            {(content?.["service-cards"] ?? []).map((_, cardIndex) => (
+              <Box
+                key={cardIndex}
+                data-levo_group_item
+                elementKey={`service-cards.${cardIndex}.card-container`}
+              >
+                <Heading elementKey={`service-cards.${cardIndex}.title`} />
+                <Image
+                  elementKey={`service-cards.${cardIndex}.image`}
+                  alt={`Service ${cardIndex + 1} image`}
+                />
+                <Typography
+                  elementKey={`service-cards.${cardIndex}.description`}
+                />
+                <Button elementKey={`service-cards.${cardIndex}.cta`} />
+
+                {content?.["service-cards"]?.[cardIndex]?.[
+                  "service-features"
+                ] && (
+                  <Box
+                    elementKey={`service-cards.${cardIndex}.service-features_levoGroup`}
+                    data-levo_group
+                  >
+                    {(
+                      content?.["service-cards"]?.[cardIndex]?.[
+                        "service-features"
+                      ] ?? []
+                    ).map((_, featureIndex) => (
+                      <Box
+                        key={`feature-${featureIndex}`}
+                        data-levo_group_item
+                        elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.feature-container`}
+                      >
+                        <Icon
+                          elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.icon`}
+                        />
+                        <Box
+                          elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.text-container`}
+                        >
+                          <Typography
+                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.title`}
+                          />
+                          <Typography
+                            elementKey={`service-cards.${cardIndex}.service-features.${featureIndex}.description`}
+                          />
+                        </Box>
+                      </Box>
+                    ))}
+                  </Box>
+                )}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Service1;

package/src/blocks/services/service-2.schema.ts

@@ -0,0 +1,433 @@
+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_CONTENT = {
+  layout: null,
+  container: null,
+  main_wrapper: null,
+  left_container: null,
+  content_wrapper: null,
+  label: "Professional Services",
+  title: "Expert Business Consulting Solutions",
+  description:
+    "Strategic consulting services that drive growth and innovation for your business. Our expert team delivers tailored solutions for sustainable success.",
+  cta: "Get Started",
+  stats_container: null,
+  stats: [
+    {
+      stat_wrapper: null,
+      value: "500+",
+      label: "Clients Served",
+    },
+    {
+      stat_wrapper: null,
+      value: "15+",
+      label: "Years Experience",
+    },
+    {
+      stat_wrapper: null,
+      value: "98%",
+      label: "Success Rate",
+    },
+  ],
+  search_input_wrapper: null,
+  search_button: "Search",
+  right_container: null,
+  hero_image: DUMMY_IMAGE,
+};
+
+export type IService2Content = typeof DEFAULT_CONTENT;
+
+export const Service2: IBlock = {
+  category_id: "services",
+  title: "Service 2",
+  key: "service-2",
+  version: "v1",
+  prompt_description:
+    "Two-column service section with left side content including title, description, CTA button, statistics grid, and file upload, paired with a large service image on the right side.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall service section layout controlling spacing, background, and structure for the two-column layout.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container for centering and constraining the service section content width.",
+      },
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Primary wrapper containing both left content and right image sections in a flex row layout.",
+      },
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Left side container holding the main content including title, description, CTA, statistics, and file upload.",
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wrapper for the main content elements (title, description, CTA) with proper vertical spacing.",
+      },
+    },
+    {
+      key: "label",
+      label: "Label",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "title",
+      label: "Service Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main service headline that communicates the primary value proposition. Should be compelling and professional.",
+        min_characters: 30,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "description",
+      label: "Service Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Supporting text that elaborates on the main headline, providing additional context and service benefits.",
+        min_characters: 80,
+        max_characters: 200,
+      },
+    },
+    {
+      key: "cta",
+      label: "Call to Action",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Primary action button that encourages user engagement. Should be clear and action-oriented.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "stats_container",
+      label: "Stats Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for the statistics section providing proper spacing and layout structure.",
+      },
+    },
+    {
+      key: "stats",
+      label: "Statistics",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "Collection of key metrics or achievements that build credibility and trust with potential customers.",
+        min_items: 3,
+        max_items: 4,
+      },
+      fields: [
+        {
+          key: "stat_wrapper",
+          label: "Stat Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual statistic container with proper vertical alignment for value and label.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "value",
+          label: "Stat Value",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "The numerical value or percentage that represents the achievement or metric (e.g., '500+', '15+').",
+            min_characters: 2,
+            max_characters: 8,
+          },
+        },
+        {
+          key: "label",
+          label: "Stat Label",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Descriptive text explaining what the statistic represents (e.g., 'Clients Served', 'Years Experience').",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+      ],
+    },
+
+    {
+      key: "search_input_wrapper",
+      label: "Search Input Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Wrapper for the zipcode search input container.",
+      },
+    },
+    {
+      key: "search_button",
+      label: "Search Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Button that initiates the search based on entered zipcode.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+      custom_fields: [
+        {
+          key: "redirect_url",
+          label: "Redirect URL",
+          field_interface: "TextWidget",
+        },
+        {
+          key: "zipcode_param",
+          label: "Zipcode Parameter",
+          field_interface: "TextWidget",
+        },
+        {
+          key: "other_params",
+          label: "Other Parameters",
+          field_interface: "TextWidget",
+        },
+      ],
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Right side container holding the service image with appropriate sizing and positioning.",
+      },
+    },
+    {
+      key: "hero_image",
+      label: "Service Image",
+      field_interface: "ImageWidget",
+      hint: {
+        prompt_description:
+          "Large, high-quality image that visually represents the service or creates professional connection with the audience.",
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "background-color": "oklch(0.9643 0.0169 61.9599)",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "4xl",
+          tablet: {
+            "column-gap": "3xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+          },
+        },
+        left_container: {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "3xl",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        label: {
+          "background-color": "brand",
+          width: "fit-content",
+          "border-radius": "3xl",
+          "padding-left": "2xs",
+          "padding-right": "2xs",
+          "padding-top": "4xs",
+          "padding-bottom": "4xs",
+          color: "white",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          color: "text-2",
+        },
+        cta: {
+          "background-color": "oklch(0.3451 0.1175 164.4309)",
+          color: "white",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "align-self": "flex-start",
+        },
+        stats_container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "base",
+        },
+        stats_levoGroup: {
+          display: "flex",
+          "column-gap": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "base",
+          },
+        },
+        search_input_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "base",
+        },
+        right_container: {
+          flex: "1",
+        },
+        hero_image: {
+          width: "100%",
+          "aspect-ratio": "4/3",
+          "object-fit": "cover",
+          "border-radius": "base",
+        },
+        stats: [
+          {
+            stat_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            value: {
+              color: "text-1",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            value: {
+              color: "text-1",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "xs",
+            },
+            value: {
+              color: "text-1",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 1,
+          },
+          selectedVariants: {
+            Heading_Level: "H1",
+          },
+        },
+        cta: {
+          selectedVariants: {
+            Button_Variants: "Primary",
+          },
+        },
+        search_button: {
+          selectedVariants: {
+            Button_Variants: "Secondary",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/services/service-2.tsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  useBlockContext,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React, { useState } from "react";
+
+import type { IService2Content } from "./service-2.schema";
+
+const Service2: React.FC<ILevoBlockBaseProps<IService2Content>> = ({
+  content,
+  config,
+}) => {
+  const [zipcode, setZipcode] = useState("");
+  const { isBuilder } = useBlockContext();
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="main_wrapper">
+          <Box elementKey="left_container">
+            <Box elementKey="content_wrapper">
+              <Typography elementKey="label" />
+              <Heading elementKey="title" />
+              <Typography elementKey="description" />
+              <Button elementKey="cta" />
+            </Box>
+            <Box elementKey="stats_container">
+              <Box elementKey="stats_levoGroup" data-levo_group>
+                {(content?.stats ?? []).map((_, index: number) => (
+                  <Box
+                    key={`stat-${index}`}
+                    data-levo_group_item
+                    elementKey={`stats.${index}.stat_wrapper`}
+                  >
+                    <Icon elementKey={`stats.${index}.icon`} />
+                    <Heading elementKey={`stats.${index}.value`} />
+                    <Typography elementKey={`stats.${index}.label`} />
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+            <Box elementKey="search_input_wrapper">
+              <input
+                value={zipcode}
+                onChange={(e) => setZipcode(e.target.value)}
+                name="search"
+                placeholder="Enter your Pin code"
+                style={{
+                  background: "white",
+                  borderRadius: "999px",
+                  padding: "20px 20px 20px 20px",
+
+                  border: "1px solid #E5E5E5",
+                }}
+                type="number"
+                min="6"
+                max="6"
+              />
+              <Button
+                elementKey="search_button"
+                onClick={() => {
+                  if (
+                    !isBuilder &&
+                    zipcode &&
+                    zipcode.length === 6 &&
+                    config?.search_button?.custom_fields?.redirect_url
+                  ) {
+                    if (config?.search_button?.custom_fields?.other_params) {
+                      window.open(
+                        `${config?.search_button?.custom_fields?.redirect_url}?${config?.search_button?.custom_fields?.other_params}&${config?.search_button?.custom_fields?.zipcode_param ?? "zipcode"}=${zipcode}`,
+                      );
+                    } else {
+                      window.open(
+                        `${config?.search_button?.custom_fields?.redirect_url}?${config?.search_button?.custom_fields?.zipcode_param ?? "zipcode"}=${zipcode}`,
+                      );
+                    }
+                  }
+                }}
+              />
+            </Box>
+          </Box>
+          <Box elementKey="right_container">
+            <Image elementKey="hero_image" alt="Hero image" />
+          </Box>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default Service2;