{"success":true,"data":{"block":{"id":"hero-split-image-newsletter","name":"Split Image Newsletter Hero","title":"Hero Split Image Newsletter","category":"Hero","categorySlug":"hero","description":"A split-layout hero with image and newsletter signup form. Perfect for content creators and newsletter-focused businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290449/1edn83krupk1z0qhhck69fkli8n5/cleanshot-2026-02-19-at-03-45-33-2x.png","mobile":"https://cdn.ing/assets/i/r/290448/i5nbc6qfwp8f5c5xdk5dl6dc1xty/cleanshot-2026-02-19-at-03-45-52-2x.png"},"componentPath":"blocks/hero/hero-split-image-newsletter.tsx","code":"\"use client\";\n\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSplitImageNewsletter } from \"@opensite/ui/blocks/hero/hero-split-image-newsletter\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { demoFormConfig } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroSplitImageNewsletter\n      heading=\"Stay updated with our newsletter\"\n      description=\"Get the latest insights, tips, and updates delivered to your inbox every week. Join 20,000+ subscribers.\"\n      formFields={formFields}\n      formConfig={{\n        ...demoFormConfig,\n        formLayout: \"button-group\",\n        buttonGroupSize: \"default\",\n      } as any}\n      buttonAction={{\n        label: \"Subscribe\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      successMessage=\"Thank you for subscribing! Check your inbox for a confirmation email.\"\n      helperText=\"We respect your privacy. Unsubscribe at any time.\"\n      image={{\n        src: imagePlaceholders[13],\n        alt: \"Newsletter preview\",\n      }}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"formFields":{"type":"array","description":"Form field configuration","items":{"type":"object","description":"","typeLabel":"FormFieldConfig"},"typeLabel":"FormFieldConfig[]","required":false},"formConfig":{"type":"object","description":"Form configuration for submission","typeLabel":"PageSpeedFormConfig","required":false},"onSubmit":{"type":"object","description":"Custom submit handler","typeLabel":"(values: Record<string, any>) => void | Promise<void>","required":false},"onSuccess":{"type":"object","description":"Success callback","typeLabel":"(data: unknown) => void","required":false},"onError":{"type":"object","description":"Error callback","typeLabel":"(error: Error) => void","required":false},"successMessage":{"type":"object","description":"Success message to display","typeLabel":"React.ReactNode","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},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for form (overrides form props)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Feature image on the right side","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content column","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","split","image","newsletter","signup","email","content","subscription"],"performance":{},"importantUsageNotes":"Ensure to find or create a newsletter contact category to wire up to this newsletter block. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:18.751Z"}