{"success":true,"data":{"block":{"id":"footer-social-newsletter","name":"Footer Social Newsletter","title":"Footer Social Newsletter","category":"Footer","categorySlug":"footer","description":"A footer with social icons, navigation links, and newsletter signup. Features prominent social media icons in circular buttons, multi-column navigation, and an email newsletter subscription form. Ideal for community-focused products, SaaS platforms, and businesses that prioritize social engagement and email marketing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290422/tndi6i4iqhasxhycehikb96alm5m/footer-social-newsletter-desktop.png","mobile":"https://cdn.ing/assets/i/r/290423/zrjyjftl8ldgkc9049atxviv2a6z/footer-social-newsletter-mobile.png"},"componentPath":"blocks/footers/footer-social-newsletter.tsx","code":"import { FooterSocialNewsletter } from \"@opensite/ui/blocks/footers/footer-social-newsletter\";\nimport { logoPlaceholders } from \"@/lib/media\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    className: \"w-full\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <FooterSocialNewsletter\n      logo={{\n        url: \"/\",\n        src: logoPlaceholders.darkHorizontalLogo,\n        alt: \"CloudSync Logo\",\n      }}\n      sections={[\n        {\n          title: \"Product\",\n          links: [\n            { name: \"Features\", href: \"#features\" },\n            { name: \"Pricing\", href: \"#pricing\" },\n            { name: \"Enterprise\", href: \"#enterprise\" },\n            { name: \"Security\", href: \"#security\" },\n            { name: \"Integrations\", href: \"#integrations\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { name: \"Documentation\", href: \"#docs\" },\n            { name: \"API Reference\", href: \"#api\" },\n            { name: \"Guides & Tutorials\", href: \"#guides\" },\n            { name: \"Changelog\", href: \"#changelog\" },\n            { name: \"System Status\", href: \"#status\" },\n          ],\n        },\n        {\n          title: \"Community\",\n          links: [\n            { name: \"Blog\", href: \"#blog\" },\n            { name: \"Events\", href: \"#events\" },\n            { name: \"Developer Forum\", href: \"#forum\" },\n            { name: \"Customer Stories\", href: \"#stories\" },\n            { name: \"Open Source\", href: \"#opensource\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { name: \"About Us\", href: \"#about\" },\n            { name: \"Careers\", href: \"#careers\" },\n            { name: \"Press\", href: \"#press\" },\n            { name: \"Partners\", href: \"#partners\" },\n            { name: \"Contact\", href: \"#contact\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://linkedin.com/company/innovatetech\",\n          label: \"Connect with InnovateTech on LinkedIn\",\n        },\n        {\n          href: \"https://twitter.com/innovatetech\",\n          label: \"Follow InnovateTech on Twitter\",\n        },\n        {\n          href: \"https://facebook.com/innovatetech\",\n          label: \"Like InnovateTech on Facebook\",\n        },\n        {\n          href: \"https://instagram.com/innovatetech\",\n          label: \"Follow InnovateTech on Instagram\",\n        },\n        {\n          href: \"https://youtube.com/@innovatetech\",\n          label: \"Subscribe to InnovateTech on YouTube\",\n        },\n      ]}\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      copyright=\"CloudSync LLC\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"string","description":"","required":true},"url":{"type":"string","description":"Logo link URL","required":false},"alt":{"type":"string","description":"Brand title","required":false},"className":{"type":"string","description":"img tag class name","required":false}},"typeLabel":"{ src: string; /** Logo link URL */ url?: string; /** Brand title */ alt?: string; /** img tag class name */ className?: string; }","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":"FooterSocialNewsletterLink"},"typeLabel":"FooterSocialNewsletterLink[]","required":true}},"typeLabel":"FooterSocialNewsletterSection"},"typeLabel":"FooterSocialNewsletterSection[]","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},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","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},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main 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},"socialColumnClassName":{"type":"string","description":"Additional CSS classes for the social/newsletter column","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},"privacyClassName":{"type":"string","description":"Additional CSS classes for the privacy text","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},"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},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","social","newsletter","subscription","email","community","icons","navigation"],"performance":{},"importantUsageNotes":"This footer has a logo, 4-column navigation, social links, and a newsletter form. Provide exactly 4 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only set 'logo.src' if a real brand logo is in the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:30.946Z"}