@levo-so/blocks 0.1.101 → 0.1.103

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

@@ -1,32 +1,81 @@
 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: "xlotCSMGiB8T",
-  filename: "footer-4-logo.png",
-  kind: "image",
-  location: "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h.png",
-  srcset: {
-    "1080w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1080w.webp",
-    "1200w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1200w.webp",
-    "1920w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1920w.webp",
-    "320w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-320w.webp",
-    "640w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-640w.webp",
-    "750w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-750w.webp",
-    "828w": "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-828w.webp",
-    path: "https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-828w.webp 828w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/footer-4-logo-30Wfpd1Qp22h-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>',
+  },
+};
+
+const ICON_CALL = {
+  kind: "icon",
+  data: {
+    id: "call",
+    label: "Call",
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17.45 22.75C16.32 22.75 15.13 22.48 13.9 21.96C12.7 21.45 11.49 20.75 10.31 19.9C9.14 19.04 8.01 18.08 6.94 17.03C5.88 15.96 4.92 14.83 4.07 13.67C3.21 12.47 2.52 11.27 2.03 10.11C1.51 8.87 1.25 7.67 1.25 6.54C1.25 5.76 1.39 5.02 1.66 4.33C1.94 3.62 2.39 2.96 3 2.39C3.77 1.63 4.65 1.25 5.59 1.25C5.98 1.25 6.38 1.34 6.72 1.5C7.11 1.68 7.44 1.95 7.68 2.31L10 5.58C10.21 5.87 10.37 6.15 10.48 6.43C10.61 6.73 10.68 7.03 10.68 7.32C10.68 7.7 10.57 8.07 10.36 8.42C10.21 8.69 9.98 8.98 9.69 9.27L9.01 9.98C9.02 10.01 9.03 10.03 9.04 10.05C9.16 10.26 9.4 10.62 9.86 11.16C10.35 11.72 10.81 12.23 11.27 12.7C11.86 13.28 12.35 13.74 12.81 14.12C13.38 14.6 13.75 14.84 13.97 14.95L13.95 15L14.68 14.28C14.99 13.97 15.29 13.74 15.58 13.59C16.13 13.25 16.83 13.19 17.53 13.48C17.79 13.59 18.07 13.74 18.37 13.95L21.69 16.31C22.06 16.56 22.33 16.88 22.49 17.26C22.64 17.64 22.71 17.99 22.71 18.34C22.71 18.82 22.6 19.3 22.39 19.75C22.18 20.2 21.92 20.59 21.59 20.95C21.02 21.58 20.4 22.03 19.68 22.32C18.99 22.6 18.24 22.75 17.45 22.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_SMS = {
+  kind: "icon",
+  data: {
+    id: "sms",
+    label: "Sms",
+    svgCode:
+      '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17 21.25H7C3.35 21.25 1.25 19.15 1.25 15.5V8.5C1.25 4.85 3.35 2.75 7 2.75H17C20.65 2.75 22.75 4.85 22.75 8.5V15.5C22.75 19.15 20.65 21.25 17 21.25ZM7 4.25C4.14 4.25 2.75 5.64 2.75 8.5V15.5C2.75 18.36 4.14 19.75 7 19.75H17C19.86 19.75 21.25 18.36 21.25 15.5V8.5C21.25 5.64 19.86 4.25 17 4.25H7Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9998 12.87C11.1598 12.87 10.3098 12.61 9.65978 12.08L6.52978 9.57997C6.20978 9.31997 6.14978 8.84997 6.40978 8.52997C6.66978 8.20997 7.13978 8.14997 7.45978 8.40997L10.5898 10.91C11.3498 11.52 12.6398 11.52 13.3998 10.91L16.5298 8.40997C16.8498 8.14997 17.3298 8.19997 17.5798 8.52997C17.8398 8.84997 17.7898 9.32997 17.4598 9.57997L14.3298 12.08C13.6898 12.61 12.8398 12.87 11.9998 12.87Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const ICON_LOCATION = {
+  kind: "icon",
+  data: {
+    id: "location",
+    label: "Location",
+    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="M11.9999 14.17C9.86988 14.17 8.12988 12.44 8.12988 10.3C8.12988 8.16 9.86988 6.44 11.9999 6.44C14.1299 6.44 15.8699 8.17 15.8699 10.31C15.8699 12.45 14.1299 14.17 11.9999 14.17Z" fill="var(--color-icon-primary)"/>\n<path d="M11.9997 22.76C10.5197 22.76 9.02969 22.2 7.86969 21.09C4.91969 18.25 1.65969 13.72 2.88969 8.33C3.99969 3.44 8.26969 1.25 11.9997 1.25C11.9997 1.25 11.9997 1.25 12.0097 1.25C15.7397 1.25 20.0097 3.44 21.1197 8.34C22.3397 13.73 19.0797 18.25 16.1297 21.09C14.9697 22.2 13.4797 22.76 11.9997 22.76Z" fill="var(--color-icon-primary)"/>\n</svg>',
   },
-  mimetype: "image/png",
 };
 
 const DEFAULT_CONTENT = {
@@ -34,116 +83,142 @@ const DEFAULT_CONTENT = {
   container: null,
   contentWrapper: null,
 
-  // logo and description
+  // logo + tagline
   logoTextWrapper: null,
-  logo: MEDIA,
-  logoDescription: "Expert Guidance, Ensuring Clear Verdicts Every Time.",
+  logo: MEDIA_LOGO,
+  logoDescription:
+    "Payment rails, KYC, and settlement on one PCI DSS Level 1 stack.",
 
-  // icon links below logo description with descriptions
+  // social icons with descriptive labels
   icon_links: [
     {
       iconWrapper: null,
-      icon: DUMMY_ICON,
-      description: "Follow us on Facebook",
+      icon: ICON_LINKEDIN,
+      description: "Follow our build on LinkedIn",
       link: null,
     },
     {
       iconWrapper: null,
-      icon: DUMMY_ICON,
-      description: "Follow us on Instagram",
+      icon: ICON_TWITTER,
+      description: "Engineering updates on Twitter",
       link: null,
     },
     {
       iconWrapper: null,
-      icon: DUMMY_ICON,
-      description: "Connect on LinkedIn",
+      icon: ICON_GITHUB,
+      description: "SDKs and examples on GitHub",
       link: null,
     },
     {
       iconWrapper: null,
-      icon: DUMMY_ICON,
-      description: "Subscribe to our YouTube",
+      icon: ICON_YOUTUBE,
+      description: "Product walkthroughs on YouTube",
       link: null,
     },
   ],
 
-  // middle links area
+  // navigation columns
   links: [
     {
-      category: "Links",
+      category: "Product",
       links: [
-        { cta: "Home", icon: null, iconCtaWrapper: null },
-        { cta: "About Us", icon: null, iconCtaWrapper: null },
-        { cta: "Teams", icon: null, iconCtaWrapper: null },
-        { cta: "Blog", icon: null, iconCtaWrapper: null },
-        { cta: "Appointment", icon: null, iconCtaWrapper: null },
+        { cta: "Payments", icon: null, iconWrapper: null },
+        { cta: "Payouts", icon: null, iconWrapper: null },
+        { cta: "KYC & KYB", icon: null, iconWrapper: null },
+        { cta: "Ledger", icon: null, iconWrapper: null },
+        { cta: "Tokenization", icon: null, iconWrapper: null },
       ],
     },
     {
-      category: "Practice Areas",
+      category: "Developers",
       links: [
-        { cta: "Family Law", icon: null, iconCtaWrapper: null },
-        { cta: "Criminal Law", icon: null, iconCtaWrapper: null },
-        { cta: "Civil Law", icon: null, iconCtaWrapper: null },
-        { cta: "Compensation", icon: null, iconCtaWrapper: null },
-        { cta: "Bank Law", icon: null, iconCtaWrapper: null },
-        { cta: "Cases Succession", icon: null, iconCtaWrapper: null },
+        { cta: "Documentation", icon: null, iconWrapper: null },
+        { cta: "API Reference", icon: null, iconWrapper: null },
+        { cta: "Changelog", icon: null, iconWrapper: null },
+        { cta: "Status", icon: null, iconWrapper: null },
+        { cta: "SDKs", icon: null, iconWrapper: null },
+        { cta: "Webhooks", icon: null, iconWrapper: null },
       ],
     },
     {
-      category: "Contact Us",
+      category: "Contact",
       links: [
         {
-          iconCtaWrapper: null,
-          cta: "9425026178",
-          icon: DUMMY_ICON,
+          iconWrapper: null,
+          cta: "+1 (415) 555-0199",
+          icon: ICON_CALL,
         },
         {
-          iconCtaWrapper: null,
-          cta: "info@verdictlybpl.com",
-          icon: DUMMY_ICON,
+          iconWrapper: null,
+          cta: "hello@levo.finance",
+          icon: ICON_SMS,
         },
         {
-          iconCtaWrapper: null,
-          cta: "Facebook",
-          icon: DUMMY_ICON,
+          iconWrapper: null,
+          cta: "535 Mission St, San Francisco",
+          icon: ICON_LOCATION,
         },
       ],
     },
   ],
 
-  // 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 },
   ],
 };
 
 export type IFooter4Content = 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 LOGO_STYLE = {
+  width: "96px",
+  height: "auto",
+  tablet: { width: "72px" },
+};
+
+const NAV_LINK_ITEM_STYLES = {
+  iconWrapper: {
+    display: "flex",
+    "column-gap": "sm",
+    "align-items": "center",
+  },
+  icon: { display: "none" },
+};
+
+const CONTACT_LINK_ITEM_STYLES = {
+  iconWrapper: {
+    display: "flex",
+    "column-gap": "sm",
+    "align-items": "center",
+  },
+  icon: {
+    width: "16px",
+    height: "16px",
+    color: "text-2",
+    "flex-shrink": 0,
+  },
+};
+
 export const Footer4: IBlock = {
   category_id: "footer",
   title: "Footer 4",
   key: "footer-4",
   version: "v1",
   prompt_description:
-    "Four-column footer with logo and tagline on the left, followed by vertical social media icons with descriptions, columns for useful links, practice areas, and contact details with icons; bottom row features copyright and legal links.",
+    "Fintech footer with Levo logo, tagline, and a vertical stack of social links (each with a descriptive label) on the left; Product, Developers, and Contact columns on the right; copyright + legal row at the bottom.",
 
   content_schema: [
-    {
-      key: "layout",
-      label: "Layout",
-      field_interface: "LayoutWidget",
-    },
+    { key: "layout", label: "Layout", field_interface: "LayoutWidget" },
     {
       key: "container",
       label: "Container",
@@ -155,24 +230,18 @@ export const Footer4: 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",
     },
 
-    // icon links with descriptions
     {
       key: "icon_links",
       label: "Icon Links",
@@ -184,11 +253,7 @@ export const Footer4: IBlock = {
           label: "Icon Wrapper",
           field_interface: "BoxWidget",
         },
-        {
-          key: "icon",
-          label: "Icon",
-          field_interface: "IconWidget",
-        },
+        { key: "icon", label: "Icon", field_interface: "IconWidget" },
         {
           key: "description",
           label: "Description",
@@ -197,7 +262,6 @@ export const Footer4: IBlock = {
       ],
     },
 
-    // middle links area
     {
       key: "links",
       label: "Links",
@@ -220,22 +284,13 @@ export const Footer4: IBlock = {
               label: "Icon Wrapper",
               field_interface: "BoxWidget",
             },
-            {
-              key: "cta",
-              label: "CTA",
-              field_interface: "TypographyWidget",
-            },
-            {
-              key: "icon",
-              label: "Icon",
-              field_interface: "IconWidget",
-            },
+            { key: "cta", label: "CTA", field_interface: "TypographyWidget" },
+            { key: "icon", label: "Icon", field_interface: "IconWidget" },
           ],
         },
       ],
     },
 
-    // footer bottom area
     {
       key: "footerBottomWrapper",
       label: "Footer Bottom Wrapper",
@@ -252,16 +307,8 @@ export const Footer4: 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" },
       ],
     },
   ],
@@ -292,418 +339,542 @@ export const Footer4: IBlock = {
           "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",
-            },
+        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",
           },
-          {
-            link: {},
-            cta: {},
-            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",
-          },
+          "column-gap": "3xl",
+          tablet: { "flex-direction": "column", "row-gap": "lg" },
         },
         logoTextWrapper: {
-          "max-width": "20%",
+          "max-width": "320px",
           display: "flex",
           "flex-direction": "column",
           "row-gap": "sm",
-          tablet: {
-            "max-width": "100%",
-          },
+          tablet: { "max-width": "100%" },
         },
         icon_links_levoGroup: {
           display: "flex",
           "flex-direction": "column",
           "row-gap": "sm",
           "align-items": "start",
-          "justify-content": "start",
-          "margin-top": "sm",
+          "margin-top": "base",
+        },
+        icon_links_levoGroupItem: {
+          iconWrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          icon: {
+            width: "1.125rem",
+            height: "1.125rem",
+            color: "text-2",
+            "flex-shrink": 0,
+          },
+          description: { "font-size": "sm", color: "text-2" },
+        },
+        icon_links: [{}, {}, {}, {}],
+        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: NAV_LINK_ITEM_STYLES,
+          links: [{}, {}, {}, {}, {}],
         },
-        icon_links: [
+        links: [
+          { links: [{}, {}, {}, {}, {}] },
+          { links: [{}, {}, {}, {}, {}, {}] },
           {
-            iconWrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
-            },
-            description: {},
+            links_levoGroupItem: CONTACT_LINK_ITEM_STYLES,
+            links: [{}, {}, {}],
           },
+        ],
+        logo: LOGO_STYLE,
+      },
+      config: {
+        icon_links: Array(4).fill({
+          description: { selectedVariants: { Typography_Variants: "Small" } },
+        }),
+        links: [
           {
-            iconWrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
+            category: {
+              heading: { level: "4" },
+              selectedVariants: { Heading_Level: "H6" },
             },
-            description: {},
           },
           {
-            iconWrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
+            category: {
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
-            description: {},
           },
           {
-            iconWrapper: {
-              display: "flex",
-              "align-items": "center",
-              "column-gap": "sm",
-            },
-            icon: {
-              width: "1.25rem",
-              height: "1.25rem",
-              color: "text-2",
+            category: {
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
-            description: {},
           },
         ],
+        footerBottomRightArea: [
+          { cta: { selectedVariants: {} } },
+          { cta: { selectedVariants: {} } },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+    },
+    {
+      title: "Centered",
+      key: "centered",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "column-gap": "none",
+          "row-gap": "2xl",
+          "align-items": "center",
+          "text-align": "center",
+        },
+        footerBottomWrapper: {
+          "border-style": "solid",
+          "border-color": "var(--color-border)",
+          "border-top-width": "1px",
+          "padding-top": "xl",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "padding-bottom": "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",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
+          tablet: { "row-gap": "lg" },
+        },
+        logoTextWrapper: {
+          "max-width": "480px",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "align-items": "center",
+          tablet: { "max-width": "100%" },
+        },
+        icon_links_levoGroup: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+          "align-items": "flex-start",
+          "justify-content": "center",
+          "margin-top": "base",
+          width: "fit-content",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        icon_links_levoGroupItem: {
+          iconWrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "sm",
+          },
+          icon: {
+            width: "1.125rem",
+            height: "1.125rem",
+            color: "text-2",
+            "flex-shrink": 0,
+          },
+          description: { "font-size": "sm", color: "text-2" },
+        },
+        icon_links: [{}, {}, {}, {}],
         links_levoGroup: {
           "max-width": "auto",
           display: "flex",
-          "justify-content": "space-around",
+          "justify-content": "center",
+          "column-gap": "3xl",
           width: "100%",
-          tablet: {
-            "justify-content": "space-between",
-          },
+          tablet: { "justify-content": "space-between" },
           mobile: {
             "flex-direction": "column",
             "row-gap": "2xl",
+            "align-items": "center",
           },
         },
+        links_levoGroupItem: {
+          category: CATEGORY_HEADER_STYLE,
+          links_levoGroup: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "sm",
+            "align-items": "flex-start",
+          },
+          links_levoGroupItem: NAV_LINK_ITEM_STYLES,
+          links: [{}, {}, {}, {}, {}],
+        },
+        links: [
+          { links: [{}, {}, {}, {}, {}] },
+          { links: [{}, {}, {}, {}, {}, {}] },
+          {
+            links_levoGroupItem: CONTACT_LINK_ITEM_STYLES,
+            links: [{}, {}, {}],
+          },
+        ],
+        logo: LOGO_STYLE,
+      },
+      config: {
+        icon_links: Array(4).fill({
+          description: { selectedVariants: { Typography_Variants: "Small" } },
+        }),
         links: [
           {
             category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-              "background-image": 'url("")',
-              "background-position": "50% 50%",
-              "background-size": "cover",
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
+              heading: { level: "4" },
+              selectedVariants: { Heading_Level: "H6" },
             },
-            links: [
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-            ],
           },
           {
             category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-              "background-image": 'url("")',
-              "background-position": "50% 50%",
-              "background-size": "cover",
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
-            },
-            links: [
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-            ],
           },
           {
             category: {
-              "margin-bottom": "sm",
-              "font-weight": 600,
-              "background-image": 'url("")',
-              "background-position": "50% 50%",
-              "background-size": "cover",
-            },
-            links_levoGroup: {
-              display: "flex",
-              "flex-direction": "column",
-              "row-gap": "xs",
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
-            links: [
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-              {
-                iconCtaWrapper: {
-                  display: "flex",
-                  "column-gap": "sm",
-                  "align-items": "center",
-                },
-                icon: {
-                  width: "20px",
-                  height: "20px",
-                },
-              },
-            ],
           },
         ],
-        logo: {
-          width: "80px",
-          "border-radius": "base",
-          tablet: {
-            width: "60px",
+        footerBottomRightArea: [
+          { cta: { selectedVariants: {} } },
+          { cta: { selectedVariants: {} } },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+    },
+    {
+      title: "Compact",
+      key: "compact",
+      styles: {
+        layout: {},
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "column-gap": "none",
+          "row-gap": "lg",
+        },
+        footerBottomWrapper: {
+          "border-style": "solid",
+          "border-color": "var(--color-border)",
+          "border-top-width": "1px",
+          "padding-top": "base",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "padding-bottom": "base",
+        },
+        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": "2xl",
+          tablet: { "flex-direction": "column", "row-gap": "lg" },
+        },
+        logoTextWrapper: {
+          "max-width": "240px",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+          tablet: { "max-width": "100%" },
+        },
+        icon_links_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "align-items": "center",
+          "margin-top": "xs",
+        },
+        icon_links_levoGroupItem: {
+          iconWrapper: {
+            width: "28px",
+            height: "28px",
+            "border-radius": "full",
+            "background-color": "background-2",
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": "center",
+            color: "text",
+          },
+          icon: {
+            width: "14px",
+            height: "14px",
+            color: "text-2",
+            "flex-shrink": 0,
+          },
+          description: { display: "none" },
+        },
+        icon_links: [{}, {}, {}, {}],
+        links_levoGroup: {
+          "max-width": "auto",
+          display: "flex",
+          "justify-content": "space-between",
+          "column-gap": "xl",
+          width: "100%",
+          tablet: { "justify-content": "space-between" },
+          mobile: { "flex-direction": "column", "row-gap": "xl" },
+        },
+        links_levoGroupItem: {
+          category: { ...CATEGORY_HEADER_STYLE, "margin-bottom": "xs" },
+          links_levoGroup: {
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "xs",
+          },
+          links_levoGroupItem: NAV_LINK_ITEM_STYLES,
+          links: [{}, {}, {}, {}, {}],
+        },
+        links: [
+          { links: [{}, {}, {}, {}, {}] },
+          { links: [{}, {}, {}, {}, {}, {}] },
+          {
+            links_levoGroupItem: CONTACT_LINK_ITEM_STYLES,
+            links: [{}, {}, {}],
+          },
+        ],
+        logo: {
+          width: "72px",
+          height: "auto",
+          tablet: { width: "56px" },
+        },
       },
       config: {
-        icon_links: [
+        icon_links: Array(4).fill({
+          description: { selectedVariants: { Typography_Variants: "Small" } },
+        }),
+        links: [
           {
-            description: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
+            category: {
+              heading: { level: "4" },
+              selectedVariants: { Heading_Level: "H6" },
             },
           },
           {
-            description: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
+            category: {
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
           },
           {
-            description: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
+            category: {
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
           },
+        ],
+        footerBottomRightArea: [
+          { cta: { selectedVariants: {} } },
+          { cta: { selectedVariants: {} } },
+        ],
+      },
+      content: DEFAULT_CONTENT,
+    },
+    {
+      title: "Stacked",
+      key: "stacked",
+      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",
+        },
+        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",
+          "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_links_levoGroup: {
+          display: "flex",
+          "flex-direction": "row",
+          "column-gap": "sm",
+          "align-items": "center",
+          "margin-top": "0",
+        },
+        icon_links_levoGroupItem: {
+          iconWrapper: {
+            width: "36px",
+            height: "36px",
+            "border-radius": "full",
+            "background-color": "background-2",
+            display: "inline-flex",
+            "align-items": "center",
+            "justify-content": "center",
+            color: "text",
+          },
+          icon: {
+            width: "16px",
+            height: "16px",
+            color: "text-2",
+            "flex-shrink": 0,
+          },
+          description: { display: "none" },
+        },
+        icon_links: [{}, {}, {}, {}],
+        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",
+          },
+          links_levoGroupItem: NAV_LINK_ITEM_STYLES,
+          links: [{}, {}, {}, {}, {}],
+        },
+        links: [
+          { links: [{}, {}, {}, {}, {}] },
+          { links: [{}, {}, {}, {}, {}, {}] },
           {
-            description: {
-              selectedVariants: {
-                Typography_Variants: "Small",
-              },
-            },
+            links_levoGroupItem: CONTACT_LINK_ITEM_STYLES,
+            links: [{}, {}, {}],
           },
         ],
+        logo: LOGO_STYLE,
+      },
+      config: {
+        icon_links: Array(4).fill({
+          description: { selectedVariants: { Typography_Variants: "Small" } },
+        }),
         links: [
           {
             category: {
-              heading: {
-                level: "4",
-              },
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
+              heading: { level: "4" },
+              selectedVariants: { Heading_Level: "H6" },
             },
           },
           {
             category: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-              heading: {
-                level: "4",
-              },
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
           },
           {
             category: {
-              selectedVariants: {
-                Heading_Level: "H6",
-              },
-              heading: {
-                level: "4",
-              },
+              selectedVariants: { Heading_Level: "H6" },
+              heading: { level: "4" },
             },
           },
         ],
         footerBottomRightArea: [
-          {
-            cta: {
-              selectedVariants: {},
-            },
-          },
-          {
-            cta: {
-              selectedVariants: {},
-            },
-          },
+          { cta: { selectedVariants: {} } },
+          { cta: { selectedVariants: {} } },
         ],
       },
       content: DEFAULT_CONTENT,