@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/contact-us/contact-us-2.schema.ts

@@ -0,0 +1,524 @@
+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,
+
+  layoutContentWrapper: null,
+  layoutTitle: null,
+  layoutSubtitle: null,
+
+  contactContainer: null,
+
+  contentContainer: null,
+  headerMedia: null,
+  textWrapper: null,
+  title: "Contact Us",
+  subtitle:
+    "Ready to discuss your financial ambitions? Connect with our team and let's build your future together.",
+  contact_options: [
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      text_box: null,
+      label: "Call Us on",
+      value: "(916) 617-0632",
+    },
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      text_box: null,
+      label: "Email Us at",
+      value: "info@nxgen-techs.com",
+    },
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      text_box: null,
+      label: "Address",
+      value: "3800 Watt Ave, Suite 290, Sacramento, CA 95821, United States",
+    },
+    {
+      wrapper: null,
+      icon: DUMMY_ICON,
+      text_box: null,
+      label: "Follow Us",
+      value: " ",
+      icon_links: [
+        {
+          icon: DUMMY_ICON,
+        },
+        {
+          icon: DUMMY_ICON,
+        },
+        {
+          icon: DUMMY_ICON,
+        },
+        {
+          icon: DUMMY_ICON,
+        },
+      ],
+    },
+  ],
+};
+
+export type IContactUs2Content = typeof DEFAULT_CONTENT;
+
+export const ContactUs2: IBlock = {
+  category_id: "contact-us",
+  title: "Contact Us 2",
+  key: "contact-us-2",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "layoutContentWrapper",
+      label: "Layout Content Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "layoutTitle",
+      label: "Layout Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "layoutSubtitle",
+      label: "Layout Subtitle",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "contactContainer",
+      label: "Contact Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "contentContainer",
+      label: "Content Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "headerMedia",
+      label: "Header Media",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "textWrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+    },
+    {
+      key: "subtitle",
+      label: "Subtitle",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "contact_options",
+      label: "Contact Options",
+      kind: "group",
+      field_interface: "BoxWidget",
+      fields: [
+        {
+          key: "wrapper",
+          label: "Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Icon representing the contact method (phone, email, address, etc.). Should be simple, clear, and easily recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "text_box",
+          label: "Text Box",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "value",
+          label: "Text",
+          field_interface: "TypographyWidget",
+        },
+        {
+          key: "icon_links",
+          label: "Icon Links",
+          kind: "group",
+          field_interface: "BoxWidget",
+          fields: [
+            {
+              key: "icon",
+              label: "Icon",
+              field_interface: "IconWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "contact_form",
+      label: "Contact Form",
+      field_interface: "FormWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        container: {
+          "max-width": "none",
+          "margin-left": "none",
+          "margin-right": "none",
+          "padding-top": "7xl",
+          "padding-bottom": "7xl",
+          "padding-left": "7xl",
+          "padding-right": "7xl",
+          "background-color": "white",
+        },
+        contactContainer: {
+          display: "flex",
+          width: "100%",
+          "justify-content": "space-between",
+        },
+        title: {
+          "font-size": "3xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "3xs",
+        },
+        layoutTitle: {
+          display: "none",
+        },
+        layoutSubtitle: {
+          display: "none",
+        },
+        subtitle: {
+          color: "text-2",
+          "margin-bottom": "7xl",
+          "font-size": "base",
+        },
+        contact_options_levoGroup: {
+          display: "grid",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          gap: "3xl",
+          mobile: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+          },
+        },
+        contact_options: [
+          {
+            wrapper: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "base",
+            },
+            icon: {
+              "margin-top": "6xs",
+              width: "1.5rem",
+              height: "1.5rem",
+              color: "text-1",
+            },
+            text_box: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "3xs",
+            },
+            label: {
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "none",
+            },
+            value: {
+              color: "text-3",
+            },
+            icon_links_levoGroup: {
+              display: "flex",
+              gap: "2xs",
+              "align-items": "center",
+              "column-gap": "3xs",
+              "justify-content": "start",
+            },
+            icon_links: [
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+            ],
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "base",
+            },
+            icon: {
+              "margin-top": "6xs",
+              width: "1.5rem",
+              height: "1.5rem",
+              color: "text-1",
+            },
+            text_box: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "3xs",
+            },
+            label: {
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "none",
+            },
+            value: {
+              color: "text-3",
+            },
+            icon_links_levoGroup: {
+              display: "flex",
+              gap: "2xs",
+              "align-items": "center",
+              "column-gap": "3xs",
+              "justify-content": "start",
+            },
+            icon_links: [
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+            ],
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "base",
+            },
+            icon: {
+              "margin-top": "6xs",
+              width: "1.5rem",
+              height: "1.5rem",
+              color: "text-1",
+            },
+            text_box: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "3xs",
+            },
+            label: {
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "none",
+            },
+            value: {
+              color: "text-3",
+            },
+            icon_links_levoGroup: {
+              display: "flex",
+              gap: "2xs",
+              "align-items": "center",
+              "column-gap": "3xs",
+              "justify-content": "start",
+            },
+            icon_links: [
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+            ],
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "align-items": "start",
+              "column-gap": "base",
+            },
+            icon: {
+              "margin-top": "6xs",
+              width: "1.5rem",
+              height: "1.5rem",
+              color: "text-1",
+            },
+            text_box: {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "3xs",
+            },
+            label: {
+              "font-weight": "600",
+              color: "text-1",
+              "margin-bottom": "none",
+            },
+            value: {
+              color: "text-3",
+            },
+            icon_links_levoGroup: {
+              display: "flex",
+              gap: "2xs",
+              "align-items": "center",
+              "column-gap": "3xs",
+              "justify-content": "start",
+            },
+            icon_links: [
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+              {
+                icon: {
+                  width: "1.25rem",
+                  height: "1.25rem",
+                  color: "text-2",
+                },
+                link: {},
+              },
+            ],
+          },
+        ],
+        contentContainer: {
+          width: "50%",
+        },
+        contact_form: {
+          width: "50%",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/contact-us/contact-us-2.tsx

@@ -0,0 +1,71 @@
+import {
+  type ILevoBlockBaseProps,
+  Heading,
+  Icon,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Media,
+  Form,
+} from "@levo-so/studio";
+
+import type { IContactUs2Content } from "./contact-us-2.schema";
+
+const ContactUs2: React.FC<ILevoBlockBaseProps<IContactUs2Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="layoutContentWrapper">
+        <Heading elementKey="layoutTitle" />
+        <Typography elementKey="layoutSubtitle" />
+      </Box>
+      <Box elementKey="contactContainer">
+        <Box elementKey="contentContainer">
+          <Media alt="header-media" elementKey="headerMedia" />
+          <Box elementKey="textWrapper">
+            <Heading elementKey="title" />
+            <Typography elementKey="subtitle" />
+          </Box>
+          <Box data-levo_group elementKey="contact_options_levoGroup">
+            {(content?.contact_options ?? []).map((_, index) => (
+              <Box
+                data-levo_group_item
+                elementKey={`contact_options.${index}.wrapper`}
+                key={index}
+              >
+                <Icon elementKey={`contact_options.${index}.icon`} />
+                <Box elementKey={`contact_options.${index}.text_box`}>
+                  <Typography elementKey={`contact_options.${index}.label`} />
+                  <Typography elementKey={`contact_options.${index}.value`} />
+                  <Box
+                    data-levo_group
+                    elementKey={`contact_options.${index}.icon_links_levoGroup`}
+                  >
+                    {(content?.contact_options?.[index]?.icon_links ?? []).map(
+                      (_, linkIndex) => (
+                        <Box
+                          data-levo_group_item
+                          elementKey={`contact_options.${index}.icon_links.${linkIndex}.wrapper`}
+                          key={linkIndex}
+                        >
+                          <Icon
+                            elementKey={`contact_options.${index}.icon_links.${linkIndex}.icon`}
+                          />
+                        </Box>
+                      ),
+                    )}
+                  </Box>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+        <Form elementKey="contact_form" />
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default ContactUs2;