@levo-so/blocks 0.1.1 → 0.1.52

package/src/blocks/footer/footer-2.tsx

@@ -0,0 +1,77 @@
+import {
+  Box,
+  Container,
+  Icon,
+  Image,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+
+import { type IFooter2Content } from "./footer-2.schema";
+
+const Footer2: React.FC<ILevoBlockBaseProps<IFooter2Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="contentWrapper">
+        <Box elementKey="logoTextWrapper">
+          <Image elementKey="logo" height={26} width={26} alt="footer-logo" />
+          <Typography elementKey="logoDescription" />
+          <Typography elementKey="copyright" />
+        </Box>
+        <Box data-levo_group elementKey="links_levoGroup">
+          {(content?.links ?? [])?.map((link: any, index: number) => (
+            <Box
+              elementKey={`links.${index}.links`}
+              key={`footer-2-links-${index}`}
+              data-levo_group_item
+            >
+              <Typography elementKey={`links.${index}.category`} />
+              <Box
+                elementKey={`links.${index}.links_levoGroup`}
+                data-levo_group
+              >
+                {(link?.links ?? [])?.map((subLink: any, subIndex: number) => (
+                  <Box
+                    elementKey={`links.${index}.links.${subIndex}.wrapper`}
+                    key={`footer-2-links-${index}-${subIndex}`}
+                    data-levo_group_item
+                  >
+                    <Icon
+                      elementKey={`links.${index}.links.${subIndex}.icon`}
+                    />
+                    <Typography
+                      elementKey={`links.${index}.links.${subIndex}.cta`}
+                    />
+                    <Box
+                      data-levo_group
+                      elementKey={`links.${index}.links.${subIndex}.icon_links_levoGroup`}
+                    >
+                      {(subLink?.icon_links ?? []).map(
+                        (_: unknown, linkIndex: number) => (
+                          <Box
+                            data-levo_group_item
+                            elementKey={`links.${index}.links.${subIndex}.icon_links.${linkIndex}.wrapper`}
+                            key={`footer-2-icon-links-${index}-${subIndex}-${linkIndex}`}
+                          >
+                            <Icon
+                              elementKey={`links.${index}.links.${subIndex}.icon_links.${linkIndex}.icon`}
+                            />
+                          </Box>
+                        ),
+                      )}
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Footer2;

package/src/blocks/footer/footer-3.schema.ts

@@ -0,0 +1,412 @@
+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_CONTENT = {
+  layout: null,
+  container: null,
+  mainFooterWrapper: null,
+
+  // All sections unified under links array (like Footer2)
+  links: [
+    {
+      category: "Real Estate Services",
+      links: [
+        { text: "Property Development" },
+        { text: "Investment Advisory" },
+        { text: "Land Acquisition" },
+        { text: "Urban Planning" },
+        { text: "Property Management" },
+        { text: "Smart Infrastructure" },
+      ],
+    },
+    {
+      category: "Company",
+      links: [
+        { text: "About Us" },
+        { text: "Leadership" },
+        { text: "Careers" },
+        { text: "Contact" },
+      ],
+    },
+    {
+      category: "Resources",
+      links: [
+        { text: "Blog" },
+        { text: "Market Reports" },
+        { text: "Case Studies" },
+        { text: "FAQs" },
+        { text: "Help Center" },
+      ],
+    },
+    {
+      category: "Contact Us",
+      links: [
+        {
+          contactWrapper: null,
+          icon: DUMMY_ICON,
+          text: "(555) 123-4567",
+        },
+        {
+          contactWrapper: null,
+          icon: DUMMY_ICON,
+          text: "info@dreamscape.com",
+        },
+        {
+          contactWrapper: null,
+          icon: DUMMY_ICON,
+          text: "120, Part Avenue, New York, NY 213232, USA",
+        },
+      ],
+    },
+  ],
+
+  // Bottom section
+  bottomSection: null,
+  copyright: "Copyright © 2025",
+  bottomLinks: [
+    { text: "Privacy", separator: null },
+    { text: "Terms", separator: null },
+    { text: "Cookie", separator: null },
+    { text: "Security", separator: null },
+    { text: "Status", separator: null },
+  ],
+
+  // Social icons
+  socialIcons: [
+    {
+      icon: DUMMY_ICON,
+    },
+    {
+      icon: DUMMY_ICON,
+    },
+    {
+      icon: DUMMY_ICON,
+    },
+    {
+      icon: DUMMY_ICON,
+    },
+  ],
+};
+
+export type IFooter3Content = typeof DEFAULT_CONTENT;
+
+const DEFAULT_LAYOUT_LINKS_STYLE = {
+  category: {
+    "font-weight": "600",
+    color: "text-1",
+    "margin-bottom": "xs",
+  },
+  links_levoGroup: {
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "xs",
+  },
+  links: Array(6)
+    .fill(0)
+    .map(() => {
+      return {
+        text: {
+          mobile: {
+            "font-size": "sm",
+          },
+        },
+      };
+    }),
+};
+
+const DEFAULT_LAYOUT_LINKS_STYLES = Array(3)
+  .fill(0)
+  .map(() => {
+    return DEFAULT_LAYOUT_LINKS_STYLE;
+  });
+
+export const Footer3: IBlock = {
+  category_id: "footer",
+  title: "Footer 3",
+  key: "footer-3",
+  version: "v1",
+  prompt_description:
+    "Professional footer with company info, service links, and contact details",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "mainFooterWrapper",
+      label: "Main Footer Wrapper",
+      field_interface: "BoxWidget",
+    },
+
+    // Unified links structure (like Footer2)
+    {
+      key: "links",
+      label: "Links Sections",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "category",
+          label: "Section Title",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "links",
+          label: "Links",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "text",
+              label: "Link Text",
+              field_interface: "TypographyWidget",
+            },
+            {
+              key: "contactWrapper",
+              label: "Contact Item Wrapper",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "icon",
+              label: "Contact Icon",
+              field_interface: "IconWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "bottomSection",
+      label: "Bottom Section",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "copyright",
+      label: "Copyright Text",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "bottomLinks",
+      label: "Bottom Links",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "text",
+          label: "Link Text",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "separator",
+          label: "Separator",
+          field_interface: "BoxWidget",
+        },
+      ],
+    },
+    {
+      key: "socialIcons",
+      label: "Social Icons",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "icon",
+          label: "Social Icon",
+          field_interface: "IconWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      content: DEFAULT_CONTENT,
+      config: {
+        links: Array(4)
+          .fill(0)
+          .map(() => ({
+            category: {
+              selectedVariants: {
+                Typography_Variants: "Large",
+              },
+            },
+            links: Array(6)
+              .fill(0)
+              .map(() => {
+                return {
+                  text: {
+                    selectedVariants: {
+                      Typography_Variants: "Body",
+                    },
+                  },
+                };
+              }),
+          })),
+      },
+      styles: {
+        container: {
+          "padding-top": "10xl",
+          "padding-bottom": "10xl",
+          mobile: {
+            "padding-top": "5xl",
+            "padding-bottom": "5xl",
+          },
+        },
+        mainFooterWrapper: {
+          display: "flex",
+          "grid-template-columns": "repeat(4, minmax(0, 1fr))",
+          "column-gap": "2xl",
+          "row-gap": "xl",
+          "margin-bottom": "none",
+          "padding-bottom": "2xl",
+          "border-bottom-width": "1px",
+          "border-color": "border",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            filter: "none",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            filter: "none",
+            "flex-direction": "column",
+          },
+          filter: "none",
+          width: "100%",
+          "align-items": "start",
+          "justify-content": "space-between",
+        },
+        links_levoGroup: {
+          display: "flex",
+          "column-gap": "2xl",
+          "row-gap": "xl",
+          tablet: {
+            filter: "none",
+            "flex-direction": "column",
+            display: "flex",
+            "justify-content": "start",
+            "align-items": "start",
+          },
+          mobile: {
+            filter: "none",
+            "flex-direction": "column",
+            width: "100%",
+          },
+          filter: "none",
+          "justify-content": "space-between",
+          "align-items": "start",
+          width: "100%",
+        },
+        links: [
+          ...DEFAULT_LAYOUT_LINKS_STYLES,
+          {
+            category: DEFAULT_LAYOUT_LINKS_STYLE.category,
+            links_levoGroup: DEFAULT_LAYOUT_LINKS_STYLE.links_levoGroup,
+            links: Array(3)
+              .fill(0)
+              .map((_, index) => {
+                return {
+                  contactWrapper: {
+                    display: "flex",
+                    "align-items": "center",
+                    "column-gap": "xs",
+                    ...(index === 2
+                      ? { "flex-shrink": "0", width: "100%" }
+                      : {}),
+                  },
+                  icon: {
+                    "object-fit": "contain",
+                    "flex-shrink": "0",
+                    filter: "none",
+                    width: "20px",
+                    height: "20px",
+                  },
+                  text: {
+                    mobile: {
+                      "font-size": "sm",
+                    },
+                    ...(index === 2 ? { "max-width": "250px" } : {}),
+                  },
+                };
+              }),
+          },
+        ],
+        bottomSection: {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "flex-wrap": "wrap",
+          "row-gap": "base",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "center",
+            filter: "none",
+            "justify-content": "center",
+            display: "flex",
+          },
+          filter: "none",
+          "margin-top": "base",
+          "margin-bottom": "none",
+          "padding-bottom": "base",
+          tablet: {
+            filter: "none",
+            "flex-direction": "column",
+          },
+        },
+        copyright: {
+          color: "text-2",
+        },
+        bottomLinks_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "base",
+          "flex-wrap": "wrap",
+          mobile: {
+            filter: "none",
+            display: "flex",
+            "justify-content": "center",
+            "align-items": "center",
+            "row-gap": "md",
+          },
+          tablet: {
+            filter: "none",
+          },
+        },
+        "bottomLinks.$.text": {
+          color: "text-2",
+        },
+        "bottomLinks.$.separator": {
+          width: "1px",
+          height: "16px",
+          "background-color": "border",
+        },
+        socialIcons_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+          filter: "none",
+        },
+        "socialIcons.$.icon": {
+          "object-fit": "contain",
+          "border-radius": "base",
+        },
+      },
+    },
+  ],
+};

package/src/blocks/footer/footer-3.tsx

@@ -0,0 +1,99 @@
+import {
+  Box,
+  Container,
+  Icon,
+  Section,
+  Typography,
+  type ILevoBlockBaseProps,
+} from "@levo-so/studio";
+import React from "react";
+
+import { type IFooter3Content } from "./footer-3.schema";
+
+const Footer3: React.FC<ILevoBlockBaseProps<IFooter3Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="mainFooterWrapper">
+        <Box elementKey="links_levoGroup" data-levo_group>
+          {(content?.links ?? [])?.map((section, sectionIndex) => (
+            <Box
+              elementKey={`links.${sectionIndex}`}
+              key={`footer-3-section-${sectionIndex}`}
+              data-levo_group_item
+            >
+              <Typography elementKey={`links.${sectionIndex}.category`} />
+              <Box
+                elementKey={`links.${sectionIndex}.links_levoGroup`}
+                data-levo_group
+              >
+                {(section?.links ?? [])?.map((link, linkIndex) => {
+                  // Check if this is a contact item (has icon and contactWrapper)
+                  const isContactItem =
+                    "icon" in link && "contactWrapper" in link;
+
+                  if (isContactItem) {
+                    return (
+                      <Box
+                        elementKey={`links.${sectionIndex}.links.${linkIndex}.contactWrapper`}
+                        key={`footer-3-contact-${sectionIndex}-${linkIndex}`}
+                        data-levo_group_item
+                      >
+                        <Icon
+                          elementKey={`links.${sectionIndex}.links.${linkIndex}.icon`}
+                        />
+                        <Typography
+                          elementKey={`links.${sectionIndex}.links.${linkIndex}.text`}
+                        />
+                      </Box>
+                    );
+                  } else {
+                    // Regular link item
+                    return (
+                      <Typography
+                        elementKey={`links.${sectionIndex}.links.${linkIndex}.text`}
+                        key={`footer-3-link-${sectionIndex}-${linkIndex}`}
+                        data-levo_group_item
+                      />
+                    );
+                  }
+                })}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+      <Box elementKey="bottomSection">
+        <Typography elementKey="copyright" />
+        <Box elementKey="bottomLinks_levoGroup" data-levo_group>
+          {(content?.bottomLinks ?? [])?.map((_, index) => (
+            <React.Fragment key={`footer-3-bottom-${index}`}>
+              <Typography
+                data-levo_group_item
+                elementKey={`bottomLinks.${index}.text`}
+              />
+              {index < (content?.bottomLinks?.length ?? 0) - 1 && (
+                <Box
+                  elementKey={`bottomLinks.${index}.separator`}
+                  data-levo_group_item
+                />
+              )}
+            </React.Fragment>
+          ))}
+        </Box>
+        <Box elementKey="socialIcons_levoGroup" data-levo_group>
+          {(content?.socialIcons ?? [])?.map((_, index) => (
+            <Icon
+              key={`footer-3-social-${index}`}
+              data-levo_group_item
+              elementKey={`socialIcons.${index}.icon`}
+            />
+          ))}
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Footer3;