@levo-so/blocks 0.1.1 → 0.1.2

package/src/blocks/navbar/navbar-2.schema.ts

@@ -0,0 +1,1226 @@
+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 MEDIA = {
+  placeholder: {
+    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 = {
+  "nav-container": null,
+  "nav-logo": MEDIA.placeholder,
+  // Desktop
+  "left-desktop-nav-menu": [
+    {
+      "nav-item-link": { href: "#" },
+      "nav-item-title": "Home",
+    },
+    {
+      "nav-item-link": { href: "#" },
+      "nav-item-title": "About",
+    },
+    {
+      "nav-item-dropdown-trigger": null,
+      "nav-item-dropdown-trigger-title": "Products",
+      "sub-items": [
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 1",
+          "sub-item-description": "Description for product 1",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 2",
+          "sub-item-description": "Description for product 2",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 3",
+          "sub-item-description": "Description for product 3",
+        },
+      ],
+    },
+  ],
+  "right-desktop-nav-menu": [
+    {
+      "nav-item-link": { href: "#" },
+      "nav-item-title": "Home",
+    },
+    {
+      "nav-item-dropdown-trigger": null,
+      "nav-item-dropdown-trigger-title": "Products",
+      "sub-items": [
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 1",
+          "sub-item-description": "Description for product 1",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 2",
+          "sub-item-description": "Description for product 2",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title": "Product 3",
+          "sub-item-description": "Description for product 3",
+        },
+      ],
+    },
+  ],
+  "desktop-cta-group": [
+    {
+      cta: "Get Started Now",
+    },
+  ],
+  // Mobile
+  "mobile-background-overlay": null,
+  "mobile-nav-menu-button": null,
+  "mobile-nav-menu-wrapper": null,
+  "mobile-nav-menu": [
+    {
+      "nav-item-link": { href: "#" },
+      "nav-item-title-container": null,
+      "nav-item-title": "Home",
+    },
+    {
+      "nav-item-dropdown-container": null,
+      "nav-item-dropdown-trigger": null,
+      "nav-item-dropdown-trigger-title": "Products",
+      "sub-items": [
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title-container": null,
+          "sub-item-title": "Product 1",
+          "sub-item-description": "Description for product 1",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title-container": null,
+          "sub-item-title": "Product 2",
+          "sub-item-description": "Description for product 2",
+        },
+        {
+          "sub-item-link": { href: "#" },
+          "sub-item-icon-container": null,
+          "sub-item-icon": DUMMY_ICON,
+          "sub-item-text-container": null,
+          "sub-item-title-container": null,
+          "sub-item-title": "Product 3",
+          "sub-item-description": "Description for product 3",
+        },
+      ],
+    },
+    {
+      "nav-item-link": { href: "#" },
+      "nav-item-title-container": null,
+      "nav-item-title": "Contact",
+    },
+  ],
+  "mobile-cta-group": [
+    {
+      cta: "Get Started Now",
+    },
+  ],
+};
+
+export type INavbar2Content = typeof DEFAULT_CONTENT;
+
+export const Navbar2: IBlock = {
+  category_id: "navbar",
+  title: "Navbar 2",
+  key: "navbar-2",
+  version: "v1",
+  content_schema: [
+    {
+      key: "nav-container",
+      label: "Nav Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "nav-logo",
+      label: "Nav Logo",
+      field_interface: "MediaWidget",
+    },
+    {
+      key: "right-container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "left-desktop-nav-menu",
+      label: "Left Desktop Nav Menu",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "nav-item-title",
+          label: "Nav Item Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger",
+          label: "Nav Item Dropdown Trigger",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger-title",
+          label: "Nav Item Dropdown Trigger Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "sub-items",
+          label: "Sub Items",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "sub-item-link",
+              label: "Sub Item Link",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon-container",
+              label: "Sub Item Icon Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon",
+              label: "Sub Item Icon",
+              field_interface: "IconWidget",
+            },
+            {
+              key: "sub-item-text-container",
+              label: "Sub Item Text Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-title",
+              label: "Sub Item Title",
+              field_interface: "HeadingWidget",
+            },
+            {
+              key: "sub-item-description",
+              label: "Sub Item Description",
+              field_interface: "TypographyWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "right-desktop-nav-menu",
+      label: "Right Desktop Nav Menu",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "nav-item-title",
+          label: "Nav Item Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger",
+          label: "Nav Item Dropdown Trigger",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger-title",
+          label: "Nav Item Dropdown Trigger Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "sub-items",
+          label: "Sub Items",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "sub-item-link",
+              label: "Sub Item Link",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon-container",
+              label: "Sub Item Icon Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon",
+              label: "Sub Item Icon",
+              field_interface: "IconWidget",
+            },
+            {
+              key: "sub-item-text-container",
+              label: "Sub Item Text Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-title",
+              label: "Sub Item Title",
+              field_interface: "HeadingWidget",
+            },
+            {
+              key: "sub-item-description",
+              label: "Sub Item Description",
+              field_interface: "TypographyWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "desktop-cta-group",
+      label: "Desktop CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    {
+      key: "mobile-background-overlay",
+      label: "Mobile Background Overlay",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "mobile-nav-menu-button",
+      label: "Mobile Nav Menu Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "mobile-nav-menu-wrapper",
+      label: "Mobile Nav Menu Wrapper",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "mobile-nav-menu",
+      label: "Mobile Nav Menu",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "nav-item-title-container",
+          label: "Nav Item Title Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "nav-item-title",
+          label: "Nav Item Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "nav-item-dropdown-container",
+          label: "Nav Item Dropdown Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger",
+          label: "Nav Item Dropdown Trigger",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "nav-item-dropdown-trigger-title",
+          label: "Nav Item Dropdown Trigger Title",
+          field_interface: "HeadingWidget",
+        },
+        {
+          key: "sub-items",
+          label: "Sub Items",
+          field_interface: "BoxWidget",
+          kind: "group",
+          fields: [
+            {
+              key: "sub-item-link",
+              label: "Sub Item Link",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon-container",
+              label: "Sub Item Icon Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-icon",
+              label: "Sub Item Icon",
+              field_interface: "IconWidget",
+            },
+            {
+              key: "sub-item-text-container",
+              label: "Sub Item Text Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-title-container",
+              label: "Sub Item Title Container",
+              field_interface: "BoxWidget",
+            },
+            {
+              key: "sub-item-title",
+              label: "Sub Item Title",
+              field_interface: "HeadingWidget",
+            },
+            {
+              key: "sub-item-description",
+              label: "Sub Item Description",
+              field_interface: "TypographyWidget",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: "mobile-cta-group",
+      label: "Mobile CTA Group",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+  ],
+  layouts: [
+    // Default
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          position: "fixed",
+          top: "2rem",
+          left: "50%",
+          "z-index": 30,
+          width: "100%",
+          "max-width": "1200px",
+          "border-radius": "base",
+          "box-shadow":
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "background-color": "rgba(255,255,255,0.8)",
+          "backdrop-filter": "blur(20px)",
+          transform:
+            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "padding-top": "sm",
+          "padding-bottom": "sm",
+          tablet: {
+            top: "2rem",
+            "max-width": "98%",
+          },
+          mobile: {
+            top: "20px",
+          },
+        },
+        "nav-container": {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+        },
+        "nav-logo": {
+          height: "36px",
+        },
+        // Desktop
+        "right-container": {
+          display: "flex",
+          "column-gap": "xl",
+        },
+        "left-desktop-nav-menu_levoGroup": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          tablet: {
+            display: "none",
+          },
+        },
+        "right-desktop-nav-menu_levoGroup": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          tablet: {
+            display: "none",
+          },
+        },
+        "left-desktop-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title": {
+              "font-size": "base",
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "column-gap": "2xs",
+              "align-items": "center",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              width: "fit-content",
+              "font-size": "base",
+              "line-height": 1.5,
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "padding-right": "4xs",
+              "padding-left": "4xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "flex-direction": "column",
+              "border-radius": "base",
+              width: "fit-content",
+              "background-color": "#ffffff",
+              "box-shadow":
+                "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "sm",
+                  "padding-bottom": "sm",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  width: "100%",
+                  _hover: {
+                    "background-color": "rgba(241 245 249 / 0.5)",
+                  },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  height: "42px",
+                  width: "42px",
+                  "background-color": "rgb(241 245 249 / 1)",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "5xs",
+                },
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "right-desktop-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title": {
+              "font-size": "base",
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "column-gap": "2xs",
+              "align-items": "center",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              width: "fit-content",
+              "font-size": "base",
+              "line-height": 1.5,
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "padding-right": "4xs",
+              "padding-left": "4xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "flex-direction": "column",
+              "border-radius": "base",
+              width: "fit-content",
+              "background-color": "#ffffff",
+              "box-shadow":
+                "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "sm",
+                  "padding-bottom": "sm",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  width: "100%",
+                  _hover: {
+                    "background-color": "rgba(241 245 249 / 0.5)",
+                  },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  height: "42px",
+                  width: "42px",
+                  "background-color": "rgb(241 245 249 / 1)",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "5xs",
+                },
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "desktop-cta-group_levoGroup": {
+          display: "flex",
+          "column-gap": "sm",
+          tablet: {
+            display: "none",
+          },
+        },
+        "desktop-cta-group": Array(2)
+          ?.fill(0)
+          ?.map(() => ({
+            cta: {},
+          })),
+        // Mobile
+        "mobile-background-overlay": {
+          position: "fixed",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          "z-index": 20,
+        },
+        "mobile-nav-menu-button": {
+          display: "none",
+          tablet: {
+            display: "flex",
+          },
+          _hover: {
+            opacity: "0.9",
+          },
+        },
+        "mobile-nav-menu-wrapper": {
+          display: "flex",
+          "justify-content": "center",
+          "border-radius": "base",
+          "background-color": "#ffffff",
+          color: "brandForeground",
+          "padding-top": "12px",
+          "padding-bottom": "12px",
+          "padding-left": "28px",
+          "padding-right": "28px",
+          "flex-direction": "column",
+          position: "fixed",
+          top: "70px",
+          left: "50%",
+          width: "98%",
+          "box-shadow":
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform:
+            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+        },
+        "mobile-nav-menu_levoGroup": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "mobile-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title-container": { width: "100%" },
+            "nav-item-title": {
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "column-gap": "2xs",
+              "justify-content": "flex-start",
+              width: "100%",
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+            },
+            "nav-item-dropdown-container": {
+              display: "flex",
+              "flex-direction": "column",
+              width: "100%",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "column-gap": "2xs",
+              "justify-content": "space-between",
+              "align-items": "center",
+              width: "100%",
+              "font-size": "lg",
+              "line-height": 1.625,
+              "font-weight": 600,
+              // color: "#ffffff",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              "font-size": "lg",
+              "line-height": "28px",
+              "font-weight": 600,
+              color: "var(--color-text-1)",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "4xs",
+              width: "100%",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "2xs",
+                  "padding-bottom": "2xs",
+                  "padding-left": "2xs",
+                  "padding-right": "2xs",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "sm",
+                  width: "100%",
+                  _hover: { "--bg-opacity": "0.5" },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1 / 1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  "--bg-opacity": "0.6",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "4xs",
+                },
+                "sub-item-title-container": {},
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "mobile-cta-group_levoGroup": {
+          "margin-top": "2xs",
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "mobile-cta-group": Array(2)
+          ?.fill(0)
+          ?.map(() => ({
+            cta: {
+              width: "100%",
+            },
+          })),
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+    {
+      key: "full-width",
+      title: "Full Width",
+      styles: {
+        layout: {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          right: "0",
+          "z-index": 30,
+          width: "100%",
+          "box-shadow":
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "background-color": "rgba(255,255,255,0.8)",
+          "backdrop-filter": "blur(20px)",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+        },
+        "nav-container": {
+          display: "flex",
+          "justify-content": "space-between",
+          "align-items": "center",
+        },
+        "nav-logo": {
+          height: "36px",
+        },
+        // Desktop
+        "right-container": {
+          display: "flex",
+          "column-gap": "xl",
+        },
+        "left-desktop-nav-menu_levoGroup": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          tablet: {
+            display: "none",
+          },
+        },
+        "right-desktop-nav-menu_levoGroup": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "lg",
+          tablet: {
+            display: "none",
+          },
+        },
+        "left-desktop-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title": {
+              "font-size": "base",
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "column-gap": "2xs",
+              "align-items": "center",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              width: "fit-content",
+              "font-size": "base",
+              "line-height": 1.5,
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "padding-right": "4xs",
+              "padding-left": "4xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "flex-direction": "column",
+              "border-radius": "base",
+              width: "fit-content",
+              "background-color": "#ffffff",
+              "box-shadow":
+                "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "sm",
+                  "padding-bottom": "sm",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  width: "100%",
+                  _hover: {
+                    "background-color": "rgba(241 245 249 / 0.5)",
+                  },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  height: "42px",
+                  width: "42px",
+                  "background-color": "rgb(241 245 249 / 1)",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "5xs",
+                },
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "right-desktop-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title": {
+              "font-size": "base",
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "column-gap": "2xs",
+              "align-items": "center",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              width: "fit-content",
+              "font-size": "base",
+              "line-height": 1.5,
+              "font-weight": 400,
+              "white-space": "nowrap",
+              color: "text-1",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "padding-right": "4xs",
+              "padding-left": "4xs",
+              "padding-top": "4xs",
+              "padding-bottom": "4xs",
+              "flex-direction": "column",
+              "border-radius": "base",
+              width: "fit-content",
+              "background-color": "#ffffff",
+              "box-shadow":
+                "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "sm",
+                  "padding-bottom": "sm",
+                  "padding-left": "sm",
+                  "padding-right": "sm",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  width: "100%",
+                  _hover: {
+                    "background-color": "rgba(241 245 249 / 0.5)",
+                  },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  height: "42px",
+                  width: "42px",
+                  "background-color": "rgb(241 245 249 / 1)",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "5xs",
+                },
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "desktop-cta-group_levoGroup": {
+          display: "flex",
+          "column-gap": "sm",
+          tablet: {
+            display: "none",
+          },
+        },
+        "desktop-cta-group": Array(2)
+          ?.fill(0)
+          ?.map(() => ({
+            cta: {},
+          })),
+        // Mobile
+        "mobile-background-overlay": {
+          position: "fixed",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          "z-index": 20,
+        },
+        "mobile-nav-menu-button": {
+          display: "none",
+          tablet: {
+            display: "flex",
+          },
+          _hover: {
+            opacity: "0.9",
+          },
+        },
+        "mobile-nav-menu-wrapper": {
+          display: "flex",
+          "justify-content": "center",
+          "border-radius": "base",
+          "background-color": "#ffffff",
+          color: "brandForeground",
+          "padding-top": "12px",
+          "padding-bottom": "12px",
+          "padding-left": "28px",
+          "padding-right": "28px",
+          "flex-direction": "column",
+          position: "fixed",
+          top: "70px",
+          left: "50%",
+          width: "98%",
+          "box-shadow":
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform:
+            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+        },
+        "mobile-nav-menu_levoGroup": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "mobile-nav-menu": Array(3)
+          ?.fill(0)
+          ?.map(() => ({
+            "nav-item-title-container": { width: "100%" },
+            "nav-item-title": {
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "column-gap": "2xs",
+              "justify-content": "flex-start",
+              width: "100%",
+              "font-size": "lg",
+              "font-weight": 600,
+              color: "text-1",
+            },
+            "nav-item-dropdown-container": {
+              display: "flex",
+              "flex-direction": "column",
+              width: "100%",
+            },
+            "nav-item-dropdown-trigger": {
+              display: "flex",
+              "padding-top": "2xs",
+              "padding-bottom": "2xs",
+              "column-gap": "2xs",
+              "justify-content": "space-between",
+              "align-items": "center",
+              width: "100%",
+              "font-size": "lg",
+              "line-height": 1.625,
+              "font-weight": 600,
+              // color: "#ffffff",
+              cursor: "pointer",
+            },
+            "nav-item-dropdown-trigger-title": {
+              "font-size": "lg",
+              "line-height": "28px",
+              "font-weight": 600,
+              color: "var(--color-text-1)",
+            },
+            "sub-items_levoGroup": {
+              display: "flex",
+              "flex-direction": "column",
+              "row-gap": "4xs",
+              width: "100%",
+            },
+            "sub-items": Array(3)
+              ?.fill(0)
+              ?.map(() => ({
+                "sub-item-link": {
+                  display: "flex",
+                  "padding-top": "2xs",
+                  "padding-bottom": "2xs",
+                  "padding-left": "2xs",
+                  "padding-right": "2xs",
+                  "column-gap": "sm",
+                  "align-items": "center",
+                  "border-radius": "sm",
+                  width: "100%",
+                  _hover: { "--bg-opacity": "0.5" },
+                },
+                "sub-item-icon-container": {
+                  "aspect-ratio": "1 / 1",
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                  "border-radius": "base",
+                  "--bg-opacity": "0.6",
+                },
+                "sub-item-icon": {
+                  "object-fit": "contain",
+                  width: "24px",
+                  height: "24px",
+                },
+                "sub-item-text-container": {
+                  display: "flex",
+                  "flex-direction": "column",
+                  flex: "1 1 0%",
+                  "row-gap": "4xs",
+                },
+                "sub-item-title-container": {},
+                "sub-item-title": {
+                  "font-size": "sm",
+                  "font-weight": 600,
+                  color: "text-1",
+                },
+                "sub-item-description": {
+                  "font-size": "xs",
+                  "font-weight": 400,
+                  color: "text-2",
+                },
+              })),
+          })),
+        "mobile-cta-group_levoGroup": {
+          "margin-top": "2xs",
+          width: "100%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "mobile-cta-group": Array(2)
+          ?.fill(0)
+          ?.map(() => ({
+            cta: {
+              width: "100%",
+            },
+          })),
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};