{"success":true,"data":{"block":{"id":"footer-split-image-accordion","name":"Footer Split Image Accordion","title":"Footer Split Image Accordion","category":"Footer","categorySlug":"footer","description":"A split-layout footer with large image, newsletter signup powered by FormEngine, accordion navigation, and payment methods. Features a two-column split with image on left, content on right, and responsive accordion links for mobile. Uses @page-speed/forms/integration for form handling. Best for e-commerce sites, fashion brands, and lifestyle businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290857/h8mkddenw26oqvy0luqdx8ebdvzs/cleanshot-2026-02-25-at-09-32-12.png","mobile":"https://cdn.ing/assets/i/r/290856/9tay8ecufqlkkrodysn5ebszvddq/cleanshot-2026-02-25-at-09-32-43.png"},"componentPath":"blocks/footers/footer-split-image-accordion.tsx","code":"import { FooterSplitImageAccordion } from \"@opensite/ui/blocks/footers/footer-split-image-accordion\";\nimport { imagePlaceholders, brandLogoPlaceholders } 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    <FooterSplitImageAccordion\n      newsletterTitle=\"Join our community and save 20% on your first order\"\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: \"Collections\",\n          id: \"collections\",\n          items: [\n            { text: \"New Arrivals\", link: \"#\" },\n            { text: \"Best Sellers\", link: \"#\" },\n            { text: \"Limited Edition\", link: \"#\" },\n            { text: \"Sale Items\", link: \"#\" },\n            { text: \"Gift Cards\", link: \"#\" },\n          ],\n        },\n        {\n          title: \"Customer Care\",\n          id: \"customer-care\",\n          items: [\n            { text: \"Contact Us\", link: \"#\" },\n            { text: \"Shipping Info\", link: \"#\" },\n            { text: \"Returns & Exchanges\", link: \"#\" },\n            { text: \"Size Guide\", link: \"#\" },\n            { text: \"FAQ\", link: \"#\" },\n          ],\n        },\n        {\n          title: \"About Us\",\n          id: \"about\",\n          items: [\n            { text: \"Our Story\", link: \"#\" },\n            { text: \"Sustainability\", link: \"#\" },\n            { text: \"Careers\", link: \"#\" },\n            { text: \"Press\", link: \"#\" },\n            { text: \"Store Locations\", link: \"#\" },\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      paymentPlatforms={[\n        \"contactless\",\n        \"bitcoin\",\n        \"amazon\",\n        \"samsung\",\n        \"afterpay\",\n        \"cashapp\",\n      ]}\n      submenuLinks={[\n        { text: \"Terms of Service\", link: \"#\" },\n        { text: \"Privacy Policy\", link: \"#\" },\n        { text: \"Accessibility\", link: \"#\" },\n      ]}\n      footerData={{\n        image: {\n          src: imagePlaceholders[45],\n          alt: \"Luxury champagne wall with ambient lighting\",\n        },\n        logo: {\n          src: brandLogoPlaceholders.black[5],\n          url: \"/\",\n          alt: \"Footer Logo\",\n        },\n        heading: \"Elevate Your Style\",\n        description:\n          \"Discover curated collections of premium fashion and lifestyle products. Quality craftsmanship meets timeless design.\",\n      }}\n      copyright=\"Elevate Brand\"\n      background=\"white\"\n      spacing=\"none\"\n    />\n  );\n}","propsSchema":{"newsletterTitle":{"type":"object","description":"Newsletter title","typeLabel":"React.ReactNode","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},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterSplitImageAccordionLink"},"typeLabel":"FooterSplitImageAccordionLink[]","required":true}},"typeLabel":"FooterSplitImageAccordionSection"},"typeLabel":"FooterSplitImageAccordionSection[]","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},"paymentPlatforms":{"type":"array","description":"Payment platform names to display icons for","items":{"type":"string","description":"","typeLabel":"PaymentPlatformName"},"typeLabel":"PaymentPlatformName[]","required":false},"submenuLinks":{"type":"array","description":"Submenu links","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterSplitImageAccordionLink"},"typeLabel":"FooterSplitImageAccordionLink[]","required":false},"footerData":{"type":"object","description":"Footer data configuration","fields":{"image":{"type":"object","description":"Hero image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":false}},"typeLabel":"{ src: string; alt?: string; }","required":true},"logo":{"type":"object","description":"Logo configuration with light/dark variants","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},"heading":{"type":"string","description":"Footer heading","required":false},"description":{"type":"string","description":"Brand description","required":false}},"typeLabel":"FooterSplitImageAccordionData","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","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},"className":{"type":"string","description":"Additional CSS classes for the footer wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"imageColumnClassName":{"type":"string","description":"Additional CSS classes for the image column","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"contentColumnClassName":{"type":"string","description":"Additional CSS classes for the content column","required":false},"newsletterSectionClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterTitleClassName":{"type":"string","description":"Additional CSS classes for the newsletter title","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links","required":false},"brandSectionClassName":{"type":"string","description":"Additional CSS classes for the brand section","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo","required":false},"brandTitleClassName":{"type":"string","description":"Additional CSS classes for the brand title","required":false},"brandDescriptionClassName":{"type":"string","description":"Additional CSS classes for the brand description","required":false},"linksGridClassName":{"type":"string","description":"Additional CSS classes for the links grid section","required":false},"paymentMethodsClassName":{"type":"string","description":"Additional CSS classes for payment methods","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","required":false},"submenuLinksClassName":{"type":"string","description":"Additional CSS classes for submenu links","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","split","image","accordion","newsletter","payment","ecommerce","fashion"],"performance":{},"importantUsageNotes":"This footer has a split layout with a brand image/logo panel on one side and 3 accordion link sections + social links on the other, plus a newsletter form and payment icons. Provide exactly 3 'footerLinks' accordion 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 'footerData.logo.src' if a real brand logo is in the media library. DO NOT USE this block if you do not have a real image for 'footerData.image.src'. Only include 'submenuLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:51.788Z"}