@levo-so/blocks 0.1.0 → 0.1.2

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

@@ -0,0 +1,379 @@
+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: "About Us",
+  title: "Care That Feels Like Family",
+  description:
+    "Dignified, personalized senior care that keeps your loved ones safe, happy, and independent — right where they belong.",
+  cta: "Contact Us",
+  stats_container: null,
+  stats: [
+    {
+      stat_wrapper: null,
+      value: "95%",
+      label: "Client Satisfaction",
+    },
+    {
+      stat_wrapper: null,
+      value: "150+",
+      label: "Trained Caregivers",
+    },
+    {
+      stat_wrapper: null,
+      value: "80+",
+      label: "Families Served",
+    },
+  ],
+  right_container: null,
+  hero_image: DUMMY_IMAGE,
+};
+
+export type IHero9Content = typeof DEFAULT_CONTENT;
+
+export const Hero9: IBlock = {
+  category_id: "hero",
+  title: "Hero 9",
+  key: "hero-9",
+  version: "v1",
+  prompt_description:
+    "Two-column hero section with left side content including title, description, CTA button and statistics grid, paired with a large hero image on the right side.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall hero 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 hero 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, and statistics.",
+      },
+    },
+    {
+      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: "Hero Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main hero headline that communicates the primary value proposition. Should be compelling and emotional.",
+        min_characters: 30,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "description",
+      label: "Hero Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Supporting text that elaborates on the main headline, providing additional context and 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: "value",
+          label: "Stat Value",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "The numerical value or percentage that represents the achievement or metric (e.g., '95%', '150+').",
+            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., 'Client Satisfaction', 'Trained Caregivers').",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+      ],
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Right side container holding the hero image with appropriate sizing and positioning.",
+      },
+    },
+    {
+      key: "hero_image",
+      label: "Hero Image",
+      field_interface: "ImageWidget",
+      hint: {
+        prompt_description:
+          "Large, high-quality image that visually represents the service or creates emotional 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",
+          },
+        },
+        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",
+          },
+        },
+      },
+    },
+  ],
+};

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

@@ -0,0 +1,49 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { IHero9Content } from "./hero-9.schema";
+
+const Hero9: React.FC<ILevoBlockBaseProps<IHero9Content>> = ({ content }) => (
+  <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`}
+                >
+                  <Heading elementKey={`stats.${index}.value`} />
+                  <Typography elementKey={`stats.${index}.label`} />
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+        <Box elementKey="right_container">
+          <Image elementKey="hero_image" alt="Hero image" />
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Hero9;

package/src/blocks/index.ts

@@ -0,0 +1,78 @@
+import type { BlockComponent } from "@levo-so/studio";
+import { lazy } from "react";
+
+export const blocks: Record<string, BlockComponent> = {
+  "about-us-1:v1": lazy(() => import("./about-us/about-us-1")),
+  "blog-listing-1:v1": lazy(() => import("./blogs/blog-listing-1")),
+  "blog-listing-2:v1": lazy(() => import("./blogs/blog-listing-2")),
+  "blog-post-1:v1": lazy(() => import("./blogs/blog-post-1")),
+  "blog-post-2:v1": lazy(() => import("./blogs/blog-post-2")),
+  "cards-2:v1": lazy(() => import("./cards/cards-2")),
+  "cards-3:v1": lazy(() => import("./cards/cards-3")),
+  "cards-4:v1": lazy(() => import("./cards/cards-4")),
+  "cards-5:v1": lazy(() => import("./cards/cards-5")),
+  "cards-6:v1": lazy(() => import("./cards/cards-6")),
+  "cards-7:v1": lazy(() => import("./cards/cards-7")),
+  "cards-9:v1": lazy(() => import("./cards/cards-9")),
+  "cards-10:v1": lazy(() => import("./cards/cards-10")),
+  "cards-11:v1": lazy(() => import("./cards/cards-11")),
+  "cards-12:v1": lazy(() => import("./cards/cards-12")),
+  "contact-us-1:v1": lazy(() => import("./contact-us/contact-us-1")),
+  "contact-us-2:v1": lazy(() => import("./contact-us/contact-us-2")),
+  "content-1:v1": lazy(() => import("./content/content-1")),
+  "content-2:v1": lazy(() => import("./content/content-2")),
+  "content-3:v1": lazy(() => import("./content/content-3")),
+  "content-4:v1": lazy(() => import("./content/content-4")),
+  "content-5:v1": lazy(() => import("./content/content-5")),
+  "content-6:v1": lazy(() => import("./content/content-6")),
+  "cta-1:v1": lazy(() => import("./cta/cta-1")),
+  "cta-2:v1": lazy(() => import("./cta/cta-2")),
+  "cta-3:v1": lazy(() => import("./cta/cta-3")),
+  "embed-1:v1": lazy(() => import("./embed/embed-1")),
+  "event-listing:v1": lazy(() => import("./event/event-listing")),
+  "event-listing-2:v1": lazy(() => import("./event/event-listing-2")),
+  "event-listing-3:v1": lazy(() => import("./event/event-listing-3")),
+  "event-details:v1": lazy(() => import("./event/event-details")),
+  "faq-1:v1": lazy(() => import("./faq/faq-1")),
+  "faq-2:v1": lazy(() => import("./faq/faq-2")),
+  "faq-3:v1": lazy(() => import("./faq/faq-3")),
+  "features-1:v1": lazy(() => import("./features/features-1/features-1")),
+  "features-2:v1": lazy(() => import("./features/features-2")),
+  "features-3:v1": lazy(() => import("./features/features-3")),
+  "features-4:v1": lazy(() => import("./features/features-4")),
+  "features-5:v1": lazy(() => import("./features/features-5")),
+  "features-6:v1": lazy(() => import("./features/features-6")),
+  "footer-1:v1": lazy(() => import("./footer/footer-1")),
+  "footer-2:v1": lazy(() => import("./footer/footer-2")),
+  "footer-3:v1": lazy(() => import("./footer/footer-3")),
+  "footer-4:v1": lazy(() => import("./footer/footer-4")),
+  "footer-5:v1": lazy(() => import("./footer/footer-5")),
+  "hero-1:v1": lazy(() => import("./hero/hero-1")),
+  "hero-2:v1": lazy(() => import("./hero/hero-2")),
+  "hero-4:v1": lazy(() => import("./hero/hero-4")),
+  "hero-5:v1": lazy(() => import("./hero/hero-5")),
+  "hero-6:v1": lazy(() => import("./hero/hero-6")),
+  "hero-7:v1": lazy(() => import("./hero/hero-7")),
+  "hero-8:v1": lazy(() => import("./hero/hero-8")),
+  "hero-9:v1": lazy(() => import("./hero/hero-9")),
+  "logos-1:v1": lazy(() => import("./logos/logos-1")),
+  "navbar-1:v1": lazy(() => import("./navbar/navbar-1")),
+  "navbar-2:v1": lazy(() => import("./navbar/navbar-2")),
+  "pricing-1:v1": lazy(() => import("./pricing/pricing-1")),
+  "products-listing-1:v1": lazy(() => import("./products/products-listing-1")),
+  "stats-1:v1": lazy(() => import("./stats/stats-1")),
+  "stats-2:v1": lazy(() => import("./stats/stats-2")),
+  "team-1:v1": lazy(() => import("./team/team-1")),
+  "team-2:v1": lazy(() => import("./team/team-2")),
+  "team-3:v1": lazy(() => import("./team/team-3")),
+  "testimonial-1:v1": lazy(() => import("./testimonial/testimonial-1")),
+  "testimonial-2:v1": lazy(() => import("./testimonial/testimonial-2")),
+  "testimonial-3:v1": lazy(() => import("./testimonial/testimonial-3")),
+  "testimonial-4:v1": lazy(() => import("./testimonial/testimonial-4")),
+  "testimonial-5:v1": lazy(() => import("./testimonial/testimonial-5")),
+  "testimonial-6:v1": lazy(() => import("./testimonial/testimonial-6")),
+  "terms-and-conditions-1:v1": lazy(
+    () => import("./termsAndPrivacy/terms-and-conditions-1"),
+  ),
+  "carousel-1:v1": lazy(() => import("./carousel/carousel-1")),
+};