@levo-so/blocks 0.1.100 → 0.1.102

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

@@ -1,32 +1,51 @@
 import type { IBlock } from "@levo-so/studio";
 
-const DUMMY_ICON = {
+const MEDIA_LOGO = {
+  id: "levo-logo-1024",
+  kind: "image",
+  location:
+    "https://static.levocdn.com/WLZ1TXTD/levo-logo-1024-LkpWlHydPFURU.svg",
+  mimetype: "image/svg+xml",
+};
+
+const ICON_LINKEDIN = {
   kind: "icon",
   data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
+    id: "linkedin",
+    label: "Linkedin",
     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>',
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z" fill="var(--color-icon-primary)"/>\n</svg>',
   },
 };
 
-const MEDIA = {
-  id: "k5KiTxROzoNX",
-  filename: "footer-5-logo.png",
-  kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4.png",
-  srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/footer-5-logo-PzNWMN1fGVV4-640w.webp 640w",
+const ICON_TWITTER = {
+  kind: "icon",
+  data: {
+    id: "twitter",
+    label: "Twitter",
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.55016 21.75C16.6045 21.75 21.5583 14.2468 21.5583 7.74192C21.5583 7.53098 21.5536 7.31536 21.5442 7.10442C22.5079 6.40752 23.3395 5.54432 24 4.55536C23.1025 4.95466 22.1496 5.21544 21.1739 5.3288C22.2013 4.71297 22.9705 3.74553 23.3391 2.60583C22.3726 3.17862 21.3156 3.58267 20.2134 3.80067C19.4708 3.01162 18.489 2.48918 17.4197 2.31411C16.3504 2.13905 15.2532 2.32111 14.2977 2.83216C13.3423 3.3432 12.5818 4.15477 12.1338 5.14137C11.6859 6.12798 11.5754 7.23468 11.8195 8.29036C9.86249 8.19215 7.94794 7.68377 6.19998 6.79816C4.45203 5.91255 2.90969 4.6695 1.67297 3.14958C1.0444 4.2333 0.852057 5.51571 1.13503 6.73615C1.418 7.9566 2.15506 9.02351 3.19641 9.72005C2.41463 9.69523 1.64998 9.48474 0.965625 9.10598V9.16692C0.964925 10.3042 1.3581 11.4066 2.07831 12.2868C2.79852 13.167 3.80132 13.7706 4.91625 13.995C4.19206 14.1932 3.43198 14.2221 2.69484 14.0794C3.00945 15.0575 3.62157 15.913 4.44577 16.5264C5.26997 17.1398 6.26512 17.4807 7.29234 17.5013C5.54842 18.8712 3.39417 19.6142 1.17656 19.6107C0.783287 19.6101 0.390399 19.586 0 19.5385C2.25286 20.9838 4.87353 21.7514 7.55016 21.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_GITHUB = {
+  kind: "icon",
+  data: {
+    id: "github",
+    label: "Github",
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_YOUTUBE = {
+  kind: "icon",
+  data: {
+    id: "youtube",
+    label: "Youtube",
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 20.75H7C3.56 20.75 1.25 18.44 1.25 15V9C1.25 5.56 3.56 3.25 7 3.25H17C20.44 3.25 22.75 5.56 22.75 9V15C22.75 18.44 20.44 20.75 17 20.75ZM7 4.75C4.42 4.75 2.75 6.42 2.75 9V15C2.75 17.58 4.42 19.25 7 19.25H17C19.58 19.25 21.25 17.58 21.25 15V9C21.25 6.42 19.58 4.75 17 4.75H7Z" fill="var(--color-icon-primary)"/>\n<path d="M10.5897 15.53C10.2997 15.53 10.0197 15.46 9.76965 15.32C9.18965 14.99 8.84961 14.32 8.84961 13.49V10.53C8.84961 9.7 9.17965 9.03002 9.76965 8.70002C10.3497 8.37002 11.0996 8.42999 11.8096 8.85999L14.2797 10.34C14.9597 10.75 15.3496 11.36 15.3496 12.01C15.3496 12.66 14.9597 13.27 14.2797 13.68L11.8096 15.16C11.3996 15.4 10.9797 15.53 10.5897 15.53Z" fill="var(--color-icon-primary)"/>\n</svg>',
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -34,69 +53,194 @@ const DEFAULT_CONTENT = {
   container: null,
   contentWrapper: null,
 
-  // logo and description
+  // logo + tagline
   logoTextWrapper: null,
-  logo: MEDIA,
-  logoDescription: "No more guesswork. No more excuses. Just real, proven training.",
+  logo: MEDIA_LOGO,
+  logoDescription:
+    "Payment rails, KYC, and settlement on one PCI DSS Level 1 stack.",
 
-  // middle links area
+  // nav columns
   links: [
     {
-      category: "Links",
-      links: [{ text: "About" }, { text: "Trainer" }, { text: "Program" }, { text: "Location" }],
+      category: "Product",
+      links: [
+        { text: "Payments" },
+        { text: "Payouts" },
+        { text: "KYC & KYB" },
+        { text: "Ledger" },
+      ],
     },
     {
-      category: "About us",
-      links: [{ text: "Purpose" }, { text: "Careers" }, { text: "Resources" }],
+      category: "Company",
+      links: [{ text: "About" }, { text: "Careers" }, { text: "Trust Center" }],
     },
     {
-      category: "Program",
+      category: "Developers",
       links: [
-        { text: "Cardio" },
-        { text: "Weight Gain" },
-        { text: "Fat Loss" },
-        { text: "Muscle Gain" },
+        { text: "Documentation" },
+        { text: "API Reference" },
+        { text: "Changelog" },
+        { text: "Status" },
       ],
     },
   ],
 
-  // footer bottom area
-  copyright: "Copyright @ 2025",
+  copyright: "© 2026 Levo Finance, Inc. All rights reserved.",
   footerBottomRightArea: [
-    {
-      link: null,
-      cta: "Disclaimer",
-      separator: null,
-    },
-    {
-      link: null,
-      cta: "Privacy Policy",
-      separator: null,
-    },
+    { link: null, cta: "Privacy Policy", separator: null },
+    { link: null, cta: "Terms of Service", separator: null },
   ],
 
-  // Social icons
   socialIcons: [
+    { icon: ICON_LINKEDIN, link: null },
+    { icon: ICON_TWITTER, link: null },
+    { icon: ICON_GITHUB, link: null },
+    { icon: ICON_YOUTUBE, link: null },
+  ],
+};
+
+export type IFooter5Content = typeof DEFAULT_CONTENT;
+
+const CATEGORY_HEADER_STYLE = {
+  "margin-bottom": "sm",
+  "font-weight": 600,
+  "font-size": "xs",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.04em",
+  color: "text-2",
+};
+
+const SOCIAL_ICON_BUTTON_STYLE = {
+  width: "36px",
+  height: "36px",
+  "border-radius": "full",
+  "background-color": "background-2",
+  display: "inline-flex",
+  "align-items": "center",
+  "justify-content": "center",
+  color: "text",
+  padding: "xs",
+};
+
+const LOGO_STYLE = {
+  width: "96px",
+  height: "auto",
+  tablet: { width: "72px" },
+};
+
+const DEFAULT_CONFIG = {
+  links: [
     {
-      icon: DUMMY_ICON,
-      link: null,
-    },
-    {
-      icon: DUMMY_ICON,
-      link: null,
+      category: {
+        heading: { level: "4" },
+        selectedVariants: { Heading_Level: "H6" },
+      },
+      links: Array(4).fill({ text: { selectedVariants: {} } }),
     },
     {
-      icon: DUMMY_ICON,
-      link: null,
+      category: { selectedVariants: { Heading_Level: "H6" } },
+      links: Array(3).fill({ text: { selectedVariants: {} } }),
     },
     {
-      icon: DUMMY_ICON,
-      link: null,
+      category: { selectedVariants: { Heading_Level: "H6" } },
+      links: Array(4).fill({ text: { selectedVariants: {} } }),
     },
   ],
 };
 
-export type IFooter5Content = typeof DEFAULT_CONTENT;
+const DEFAULT_STYLES = {
+  layout: {},
+  container: {
+    display: "flex",
+    "flex-direction": "column",
+    "column-gap": "none",
+    "row-gap": "2xl",
+  },
+  footerBottomWrapper: {
+    "border-style": "solid",
+    "border-color": "var(--color-border)",
+    "border-top-width": "1px",
+    "padding-top": "xl",
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "space-between",
+    "padding-bottom": "xl",
+    "column-gap": "xl",
+  },
+  footerBottomRightArea_levoGroup: {
+    display: "flex",
+    "column-gap": "sm",
+    "align-items": "center",
+  },
+  footerBottomRightArea_levoGroupItem: {
+    link: {},
+    cta: { "font-size": "sm", color: "text-2" },
+    separator: {
+      width: "1px",
+      height: "1rem",
+      "background-color": "var(--color-border)",
+      "margin-left": "sm",
+      "margin-right": "sm",
+    },
+  },
+  footerBottomRightArea: [{}, {}],
+  contentWrapper: {
+    display: "flex",
+    "column-gap": "3xl",
+    tablet: {
+      "flex-direction": "column",
+      "row-gap": "lg",
+    },
+  },
+  logoTextWrapper: {
+    "max-width": "320px",
+    display: "flex",
+    "flex-direction": "column",
+    "row-gap": "sm",
+    tablet: { "max-width": "100%" },
+  },
+  links_levoGroup: {
+    "max-width": "auto",
+    display: "flex",
+    "justify-content": "space-between",
+    "column-gap": "2xl",
+    width: "100%",
+    tablet: { "justify-content": "space-between" },
+    mobile: { "flex-direction": "column", "row-gap": "2xl" },
+  },
+  links_levoGroupItem: {
+    category: CATEGORY_HEADER_STYLE,
+    links_levoGroup: {
+      display: "flex",
+      "flex-direction": "column",
+      "row-gap": "sm",
+    },
+    links_levoGroupItem: {
+      iconWrapper: {
+        display: "flex",
+        "column-gap": "sm",
+        "align-items": "center",
+      },
+      icon: { display: "none" },
+      text: {},
+    },
+  },
+  links: [
+    { links: [{}, {}, {}, {}] },
+    { links: [{}, {}, {}] },
+    { links: [{}, {}, {}, {}] },
+  ],
+  logo: LOGO_STYLE,
+  socialIcons_levoGroup: {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "sm",
+  },
+  socialIcons_levoGroupItem: {
+    icon: SOCIAL_ICON_BUTTON_STYLE,
+  },
+  socialIcons: [{}, {}, {}, {}],
+};
 
 export const Footer5: IBlock = {
   category_id: "footer",
@@ -104,14 +248,10 @@ export const Footer5: IBlock = {
   key: "footer-5",
   version: "v1",
   prompt_description:
-    "Fitness-themed footer with main title, description, and three columns for navigation links, company info, and program details, plus bottom section with copyright and social icons",
+    "Fintech footer with Levo logo and tagline on the left, three nav columns (Product, Company, Developers), and a bottom bar with copyright, legal links, and a social icon cluster.",
 
   content_schema: [
-    {
-      key: "layout",
-      label: "Layout",
-      field_interface: "LayoutWidget",
-    },
+    { key: "layout", label: "Layout", field_interface: "LayoutWidget" },
     {
       key: "container",
       label: "Container",
@@ -123,24 +263,18 @@ export const Footer5: IBlock = {
       field_interface: "BoxWidget",
     },
 
-    // logo and description area
     {
       key: "logoTextWrapper",
       label: "Logo Text Wrapper",
       field_interface: "BoxWidget",
     },
-    {
-      key: "logo",
-      label: "Logo",
-      field_interface: "ImageWidget",
-    },
+    { key: "logo", label: "Logo", field_interface: "ImageWidget" },
     {
       key: "logoDescription",
       label: "Description",
       field_interface: "TypographyWidget",
     },
 
-    // middle links area
     {
       key: "links",
       label: "Links",
@@ -163,22 +297,13 @@ export const Footer5: IBlock = {
               label: "Icon Wrapper",
               field_interface: "BoxWidget",
             },
-            {
-              key: "icon",
-              label: "Icon",
-              field_interface: "IconWidget",
-            },
-            {
-              key: "text",
-              label: "Text",
-              field_interface: "TypographyWidget",
-            },
+            { key: "icon", label: "Icon", field_interface: "IconWidget" },
+            { key: "text", label: "Text", field_interface: "TypographyWidget" },
           ],
         },
       ],
     },
 
-    // footer bottom area
     {
       key: "footerBottomWrapper",
       label: "Footer Bottom Wrapper",
@@ -195,16 +320,8 @@ export const Footer5: IBlock = {
       field_interface: "BoxWidget",
       kind: "group",
       fields: [
-        {
-          key: "cta",
-          label: "CTA",
-          field_interface: "TypographyWidget",
-        },
-        {
-          key: "separator",
-          label: "Separator",
-          field_interface: "BoxWidget",
-        },
+        { key: "cta", label: "CTA", field_interface: "TypographyWidget" },
+        { key: "separator", label: "Separator", field_interface: "BoxWidget" },
       ],
     },
     {
@@ -213,11 +330,7 @@ export const Footer5: IBlock = {
       field_interface: "BoxWidget",
       kind: "group",
       fields: [
-        {
-          key: "icon",
-          label: "Social Icon",
-          field_interface: "IconWidget",
-        },
+        { key: "icon", label: "Social Icon", field_interface: "IconWidget" },
       ],
     },
   ],
@@ -227,95 +340,14 @@ export const Footer5: IBlock = {
       title: "Default",
       key: "default",
       content: DEFAULT_CONTENT,
-      config: {
-        links: [
-          {
-            category: {
-              heading: {
-                level: "4",
-              },
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            links: [
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-          },
-          {
-            category: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            links: [
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-          },
-          {
-            category: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-            },
-            links: [
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-              {
-                text: {
-                  selectedVariants: {},
-                },
-              },
-            ],
-          },
-        ],
-      },
+      config: DEFAULT_CONFIG,
+      styles: DEFAULT_STYLES,
+    },
+    {
+      title: "Centered",
+      key: "centered",
+      content: DEFAULT_CONTENT,
+      config: DEFAULT_CONFIG,
       styles: {
         layout: {},
         container: {
@@ -323,6 +355,8 @@ export const Footer5: IBlock = {
           "flex-direction": "column",
           "column-gap": "none",
           "row-gap": "2xl",
+          "align-items": "center",
+          "text-align": "center",
         },
         footerBottomWrapper: {
           "border-style": "solid",
@@ -331,182 +365,194 @@ export const Footer5: IBlock = {
           "padding-top": "xl",
           display: "flex",
           "align-items": "center",
-          "justify-content": "space-between",
+          "justify-content": "center",
           "padding-bottom": "xl",
+          "column-gap": "xl",
         },
         footerBottomRightArea_levoGroup: {
           display: "flex",
           "column-gap": "sm",
           "align-items": "center",
         },
-        footerBottomRightArea: [
-          {
-            link: {},
-            cta: {},
-            separator: {
-              width: "1px",
-              height: "1rem",
-              "background-color": "var(--color-border)",
-              "margin-left": "sm",
-              "margin-right": "sm",
-            },
-          },
-          {
-            link: {},
-            cta: {},
-            separator: {
-              width: "1px",
-              height: "1rem",
-              "background-color": "var(--color-border)",
-              "margin-left": "sm",
-              "margin-right": "sm",
-            },
+        footerBottomRightArea_levoGroupItem: {
+          link: {},
+          cta: { "font-size": "sm", color: "text-2" },
+          separator: {
+            width: "1px",
+            height: "1rem",
+            "background-color": "var(--color-border)",
+            "margin-left": "sm",
+            "margin-right": "sm",
           },
-        ],
+        },
+        footerBottomRightArea: [{}, {}],
         contentWrapper: {
           display: "flex",
-          tablet: {
-            "flex-direction": "column",
-            "row-gap": "lg",
-          },
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
         },
         logoTextWrapper: {
-          "max-width": "20%",
+          "max-width": "480px",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "sm",
-          tablet: {
-            "max-width": "100%",
-          },
+          "align-items": "center",
+          tablet: { "max-width": "100%" },
         },
         links_levoGroup: {
           "max-width": "auto",
           display: "flex",
-          "justify-content": "space-around",
+          "justify-content": "center",
+          "column-gap": "5xl",
           width: "100%",
-          tablet: {
-            "justify-content": "space-between",
-          },
+          tablet: { "justify-content": "space-between" },
           mobile: {
             "flex-direction": "column",
             "row-gap": "2xl",
+            "align-items": "center",
           },
         },
-        links: [
-          {
-            category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-            },
-            links: [
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-            ],
-          },
-          {
-            category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-            },
-            links: [
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-            ],
+        links_levoGroupItem: {
+          category: CATEGORY_HEADER_STYLE,
+          links_levoGroup: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "sm",
+            "align-items": "flex-start",
           },
-          {
-            category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-            },
-            links_levoGroup: {
+          links_levoGroupItem: {
+            iconWrapper: {
               display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
+              "column-gap": "sm",
+              "align-items": "center",
             },
-            links: [
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-              {
-                text: {},
-              },
-            ],
-          },
-        ],
-        logo: {
-          width: "80px",
-          tablet: {
-            width: "60px",
+            icon: { display: "none" },
+            text: {},
           },
         },
+        links: [
+          { links: [{}, {}, {}, {}] },
+          { links: [{}, {}, {}] },
+          { links: [{}, {}, {}, {}] },
+        ],
+        logo: LOGO_STYLE,
         socialIcons_levoGroup: {
           display: "flex",
           "align-items": "center",
-          "column-gap": "xs",
+          "column-gap": "sm",
+          "justify-content": "center",
         },
-        socialIcons: [
-          {
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
-            },
+        socialIcons_levoGroupItem: {
+          icon: SOCIAL_ICON_BUTTON_STYLE,
+        },
+        socialIcons: [{}, {}, {}, {}],
+      },
+    },
+    {
+      title: "Stacked",
+      key: "stacked",
+      content: DEFAULT_CONTENT,
+      config: DEFAULT_CONFIG,
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "column-gap": "none",
+          "row-gap": "2xl",
+        },
+        footerBottomWrapper: {
+          "border-style": "solid",
+          "border-color": "var(--color-border)",
+          "border-top-width": "1px",
+          "padding-top": "xl",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "padding-bottom": "xl",
+          "column-gap": "xl",
+        },
+        footerBottomRightArea_levoGroup: {
+          display: "flex",
+          "column-gap": "sm",
+          "align-items": "center",
+        },
+        footerBottomRightArea_levoGroupItem: {
+          link: {},
+          cta: { "font-size": "sm", color: "text-2" },
+          separator: {
+            width: "1px",
+            height: "1rem",
+            "background-color": "var(--color-border)",
+            "margin-left": "sm",
+            "margin-right": "sm",
           },
-          {
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
-            },
+        },
+        footerBottomRightArea: [{}, {}],
+        contentWrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        logoTextWrapper: {
+          "max-width": "60%",
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "lg",
+          "align-items": "center",
+          "justify-content": "space-between",
+          tablet: {
+            "max-width": "100%",
+            "flex-direction": "column",
+            "row-gap": "sm",
+            "align-items": "start",
           },
-          {
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
-            },
+        },
+        links_levoGroup: {
+          "max-width": "auto",
+          display: "flex",
+          "justify-content": "space-between",
+          "column-gap": "2xl",
+          width: "100%",
+          "border-style": "solid",
+          "border-color": "var(--color-border)",
+          "border-top-width": "1px",
+          "padding-top": "xl",
+          mobile: { "flex-direction": "column", "row-gap": "2xl" },
+        },
+        links_levoGroupItem: {
+          category: CATEGORY_HEADER_STYLE,
+          links_levoGroup: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "sm",
           },
-          {
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
+          links_levoGroupItem: {
+            iconWrapper: {
+              display: "flex",
+              "column-gap": "sm",
+              "align-items": "center",
             },
+            icon: { display: "none" },
+            text: {},
           },
+        },
+        links: [
+          { links: [{}, {}, {}, {}] },
+          { links: [{}, {}, {}] },
+          { links: [{}, {}, {}, {}] },
         ],
+        logo: LOGO_STYLE,
+        socialIcons_levoGroup: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "sm",
+        },
+        socialIcons_levoGroupItem: {
+          icon: SOCIAL_ICON_BUTTON_STYLE,
+        },
+        socialIcons: [{}, {}, {}, {}],
       },
     },
   ],