{"success":true,"data":{"block":{"id":"footer-newsletter-contact","name":"Footer Newsletter Contact","title":"Footer Newsletter Contact","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with newsletter signup, navigation links, contact details, and social media icons. Features a four-column grid layout with newsletter form, link sections, and contact info with icons. Best for e-commerce sites, business websites, and service-based companies.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290472/fzxskcx1nd55yfkf667u2wux2qcp/footer-newsletter-contact-desktop.png","mobile":"https://cdn.ing/assets/i/r/290473/cqj4ii000z1lp3k0kds8ah1fhsk6/footer-newsletter-contact-mobile.png"},"componentPath":"blocks/footers/footer-newsletter-contact.tsx","code":"import { FooterNewsletterContact } from \"@opensite/ui/blocks/footers/footer-newsletter-contact\";\nimport { 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    <FooterNewsletterContact\n      newsletterTitle=\"Newsletter\"\n      newsletterDescription=\"Subscribe to receive exclusive deals, product launches, and insider tips delivered straight to your inbox every week.\"\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          items: [\n            { text: \"New Arrivals\", link: \"/shop/new\" },\n            { text: \"Best Sellers\", link: \"/shop/bestsellers\" },\n            { text: \"Sale Items\", link: \"/shop/sale\" },\n            { text: \"Gift Cards\", link: \"/shop/giftcards\" },\n            { text: \"Collections\", link: \"/shop/collections\" },\n          ],\n        },\n        {\n          title: \"About\",\n          items: [\n            { text: \"Our Story\", link: \"/about\" },\n            { text: \"Sustainability\", link: \"/sustainability\" },\n            { text: \"Store Locations\", link: \"/stores\" },\n            { text: \"Careers\", link: \"/careers\" },\n            { text: \"Press\", link: \"/press\" },\n          ],\n        },\n      ]}\n      contactDetails={[\n        {\n          icon: \"lucide/phone\",\n          label: \"(555) 123-4567\",\n          link: \"+15551234567\",\n        },\n        {\n          icon: \"lucide/mail\",\n          label: \"support@fashionstore.com\",\n          link: \"support@fashionstore.com\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          label: (\n            <div className=\"space-y-0\">\n              <div>123 Fashion Avenue</div>\n              <div>New York, NY 10001</div>\n            </div>\n          ),\n          link: \"https://maps.app.goo.gl/gJrmVDMHcvEFkr4E7\",\n        },\n        {\n          icon: \"lucide/clock\",\n          label: (\n            <div className=\"space-y-0\">\n              <div>Mon-Fri: 9AM-8PM EST</div>\n              <div>Sat-Sun: 10AM-6PM EST</div>\n              <div className=\"flex flex-row gap-1\">\n                <span className=\"font-semibold\">Happy Hour</span>\n                <span>4-6 PM Daily</span>\n              </div>\n            </div>\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      logo={{\n        light: brandLogoPlaceholders.black[2],\n        dark: brandLogoPlaceholders.white[2],\n        url: \"/\",\n      }}\n      copyright=\"Fashion Store.\"\n      background=\"muted\"\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"newsletterTitle":{"type":"string","description":"Newsletter section 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},"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":true}},"typeLabel":"FooterNewsletterContactLink"},"typeLabel":"FooterNewsletterContactLink[]","required":true}},"typeLabel":"FooterNewsletterContactSection"},"typeLabel":"FooterNewsletterContactSection[]","required":false},"contactDetails":{"type":"array","description":"Contact details","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name","required":true},"label":{"type":"object","description":"Display text","typeLabel":"React.ReactNode","required":true},"type":{"type":"string","description":"Link type: \"none\" | \"email\" | \"phone\"","typeLabel":"\"none\" | \"email\" | \"phone\"","required":false},"link":{"type":"string","description":"Link value (email address or phone number)","required":false}},"typeLabel":"FooterNewsletterContactDetail"},"typeLabel":"FooterNewsletterContactDetail[]","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},"logo":{"type":"object","description":"Logo configuration","fields":{"light":{"type":"string","description":"","required":true},"dark":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true}},"typeLabel":"{ light: string; dark: string; url: string; }","required":false},"copyright":{"type":"string","description":"Copyright text","required":false},"className":{"type":"string","description":"Additional CSS classes","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 name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","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},"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},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","contact","social","links","ecommerce","business","navigation"],"performance":{},"importantUsageNotes":"This footer combines a newsletter form, 2-column navigation, a contact details panel, and social links. Provide exactly 2 'footerLinks' sections, each with 4-6 links. Provide 3-4 'contactDetails' items using real contact data (phone, email, address, hours) — DO NOT invent any contact data; omit fields the brand has not provided. 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.light'/'logo.dark' if a real brand logo is in the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:31.410Z"}