{"success":true,"data":{"block":{"id":"footer-accordion-social","name":"Footer Accordion Social","title":"Footer Accordion Social","category":"Footer","categorySlug":"footer","description":"A footer with newsletter, accordion navigation links, and social media icons with responsive accordion behavior. Features newsletter section at top, accordion links in grid, and social icons. Accordion is collapsed on mobile and expanded on desktop. Best for e-commerce sites, retail brands, and content-heavy websites.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290476/0g83pjjvugnp2ygwvaj7r0j5tldf/footer-accordion-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290477/3x1po3d4yh32stkpj9yab18mxhri/footer-accordion-social-mobile.png"},"componentPath":"blocks/footers/footer-accordion-social.tsx","code":"import { FooterAccordionSocial } from \"@opensite/ui/blocks/footers/footer-accordion-social\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport { usePlatformFromUrl } from \"@opensite/hooks/usePlatformFromUrl\";\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  const platform = usePlatformFromUrl(\"https://www.youtube.com/@iamthedelo\");\n\n  return (\n    <FooterAccordionSocial\n      logo={{\n        src: brandLogoPlaceholders.black[0],\n        alt: \"Your Brand Logo\",\n        url: \"/\",\n      }}\n      newsletterTitle=\"Stay In the Loop\"\n      newsletterDescription=\"Get the latest updates on new collections, exclusive offers, and insider news delivered straight to your inbox.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      footerLinks={[\n        {\n          title: \"Shop\",\n          id: \"shop\",\n          items: [\n            { text: \"New Arrivals\", href: \"#\" },\n            { text: \"Best Sellers\", href: \"#\" },\n            { text: \"Sale Items\", href: \"#\" },\n            { text: \"Gift Cards\", href: \"#\" },\n            { text: \"Collections\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          id: \"company\",\n          items: [\n            { text: \"About Us\", href: \"#\" },\n            { text: \"Our Story\", href: \"#\" },\n            { text: \"Careers\", href: \"#\" },\n            { text: \"Press\", href: \"#\" },\n            { text: \"Blog\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Support\",\n          id: \"support\",\n          items: [\n            { text: \"Help Center\", href: \"#\" },\n            { text: \"Shipping Info\", href: \"#\" },\n            { text: \"Returns\", href: \"#\" },\n            { text: \"Size Guide\", href: \"#\" },\n            { text: \"Track Order\", href: \"#\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://facebook.com\",\n          label: \"Follow us on Facebook\",\n        },\n        {\n          href: \"https://instagram.com\",\n          label: \"Follow us on Instagram\",\n        },\n        {\n          href: \"https://twitter.com\",\n          label: \"Follow us on Twitter\",\n        },\n        {\n          href: \"https://pinterest.com\",\n          label: \"Follow us on Pinterest\",\n        },\n        {\n          href: \"https://youtube.com\",\n          label: `Subscribe to our YouTube channel: ${platform}`,\n        },\n      ]}\n      copyright=\"Your Brand\"\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"newsletterTitle":{"type":"string","description":"Newsletter title","required":false},"newsletterDescription":{"type":"string","description":"Newsletter description","required":false},"footerLinks":{"type":"array","description":"Footer link sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"id":{"type":"string","description":"Unique identifier","required":true},"items":{"type":"array","description":"Array of links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterAccordionSocialNavLink"},"typeLabel":"FooterAccordionSocialNavLink[]","required":true}},"typeLabel":"FooterAccordionSocialSection"},"typeLabel":"FooterAccordionSocialSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links - only href is required, platform icon is auto-detected","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},"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}},"typeLabel":"{ src: string; /** Logo link URL */ url?: string; /** Brand title */ alt?: string; }","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","accordion","social","newsletter","responsive","ecommerce","retail","navigation"],"performance":{},"importantUsageNotes":"This footer features a newsletter form and collapsible accordion link sections. Provide exactly 3 'footerLinks' sections (the demo canonical count), each with 4-6 links per section. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter form 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; otherwise rely on the brand text/alt. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:31.697Z"}