{"success":true,"data":{"block":{"id":"footer-nav-social","name":"Footer Nav Social","title":"Footer Nav Social","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with logo, navigation, newsletter, and social links. Features a logo with navigation sections, a newsletter signup form with heading and description, social media icons, and legal links. Ideal for SaaS products, corporate websites, and businesses that want a complete footer with all essential elements organized in a clean, professional layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290470/l9kx50ohh2pfdigy8pkx5wd5cxuj/footer-nav-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290471/mb2xbgcsvteqlqt4nf984gzy1dam/footer-nav-social-mobile.png"},"componentPath":"blocks/footers/footer-nav-social.tsx","code":"import { FooterNavSocial } from \"@opensite/ui/blocks/footers/footer-nav-social\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <FooterNavSocial\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[1],\n        alt: \"CloudBase Platform\",\n        title: \"CloudBase\",\n      }}\n      sections={[\n        {\n          title: \"Platform\",\n          links: [\n            { name: \"Cloud Infrastructure\", href: \"/platform/infrastructure\" },\n            { name: \"Serverless Functions\", href: \"/platform/functions\" },\n            { name: \"Database Services\", href: \"/platform/database\" },\n            { name: \"Edge Computing\", href: \"/platform/edge\" },\n            { name: \"Container Registry\", href: \"/platform/registry\" },\n          ],\n        },\n        {\n          title: \"Solutions\",\n          links: [\n            { name: \"E-Commerce\", href: \"/solutions/ecommerce\" },\n            { name: \"SaaS Applications\", href: \"/solutions/saas\" },\n            { name: \"Mobile Backends\", href: \"/solutions/mobile\" },\n            { name: \"Enterprise Apps\", href: \"/solutions/enterprise\" },\n            { name: \"AI & Machine Learning\", href: \"/solutions/ai\" },\n          ],\n        },\n        {\n          title: \"Developers\",\n          links: [\n            { name: \"Getting Started\", href: \"/docs/getting-started\" },\n            { name: \"API Documentation\", href: \"/docs/api\" },\n            { name: \"SDK Libraries\", href: \"/docs/sdks\" },\n            { name: \"Integrations\", href: \"/docs/integrations\" },\n            { name: \"CLI Tools\", href: \"/docs/cli\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        { href: \"https://github.com/cloudbase\", label: \"GitHub\" },\n        { href: \"https://twitter.com/cloudbase\", label: \"Twitter\" },\n        { href: \"https://linkedin.com/company/cloudbase\", label: \"LinkedIn\" },\n        { href: \"https://youtube.com/@cloudbase\", label: \"YouTube\" },\n        { href: \"https://discord.gg/cloudbase\", label: \"Discord\" },\n      ]}\n      newsletterHeading=\"Stay Updated\"\n      newsletterDescription=\"Get the latest product updates, engineering blog posts, and cloud infrastructure insights delivered to your inbox.\"\n      newsletterPlaceholder=\"your@email.com\"\n      newsletterButtonText=\"Subscribe\"\n      socialTitle=\"Follow Us\"\n      copyright=\"CloudBase Inc.\"\n      legalLinks={[\n        { name: \"Privacy Policy\", href: \"/privacy\" },\n        { name: \"Terms of Service\", href: \"/terms\" },\n        { name: \"GDPR Compliance\", href: \"/gdpr\" },\n        { name: \"Security\", href: \"/security\" },\n      ]}\n      background=\"gray\"\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterNavSocialLogo","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNavSocialNavLink"},"typeLabel":"FooterNavSocialNavLink[]","required":true}},"typeLabel":"FooterNavSocialSection"},"typeLabel":"FooterNavSocialSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"newsletterHeading":{"type":"object","description":"Newsletter heading","typeLabel":"React.ReactNode","required":false},"newsletterDescription":{"type":"object","description":"Newsletter description","typeLabel":"React.ReactNode","required":false},"newsletterPlaceholder":{"type":"string","description":"Newsletter placeholder","required":false},"newsletterButtonText":{"type":"object","description":"Newsletter button text","typeLabel":"React.ReactNode","required":false},"socialTitle":{"type":"object","description":"Social section title","typeLabel":"React.ReactNode","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"legalLinks":{"type":"array","description":"Legal links","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNavSocialNavLink"},"typeLabel":"FooterNavSocialNavLink[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid","required":false},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"navGridClassName":{"type":"string","description":"Additional CSS classes for the navigation grid","required":false},"navSectionClassName":{"type":"string","description":"Additional CSS classes for navigation sections","required":false},"navTitleClassName":{"type":"string","description":"Additional CSS classes for navigation section titles","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for navigation link lists","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"rightColumnClassName":{"type":"string","description":"Additional CSS classes for the right column","required":false},"formConfig":{"type":"object","description":"Config for submitting forms to server","fields":{"token":{"type":"string","description":"","required":true}},"typeLabel":"{ token: string }","required":false},"newsletterClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterHeadingClassName":{"type":"string","description":"Additional CSS classes for the newsletter heading","required":false},"newsletterDescriptionClassName":{"type":"string","description":"Additional CSS classes for the newsletter description","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"socialSectionClassName":{"type":"string","description":"Additional CSS classes for the social section","required":false},"socialTitleClassName":{"type":"string","description":"Additional CSS classes for the social title","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"legalLinksClassName":{"type":"string","description":"Additional CSS classes for legal links","required":false},"legalLinkClassName":{"type":"string","description":"Additional CSS classes for legal link items","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","navigation","social","newsletter","comprehensive","professional","corporate","complete"],"performance":{},"importantUsageNotes":"This footer has a logo, 3-column navigation, social links, and an inline newsletter form. Provide exactly 3 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter is a simple inline form controlled by 'newsletterHeading', 'newsletterDescription', 'newsletterPlaceholder', and 'newsletterButtonText' props (not formEngineSetup). Only set 'logo.src' if a real brand logo is in the media library. Only include 'legalLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:27.110Z"}