{"success":true,"data":{"block":{"id":"contact-image","name":"Contact Image","title":"Contact Image","category":"Contact","categorySlug":"contact","description":"Split-layout contact form with an image panel featuring overlay contact items (phone, email, etc.) on the left and a form with heading on the right. Modern, professional design with motion animations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290618/1mcu6me3f3rsshm2q7zz7aa027ub/cleanshot-2026-02-21-at-15-31-03.png","mobile":"https://cdn.ing/assets/i/r/290617/ft5shvx5h71lk9cjyn3yjg96eu65/cleanshot-2026-02-21-at-15-31-19.png"},"componentPath":"blocks/contact/contact-image.tsx","code":"\"use client\";\n\nimport { ContactImage } from \"@opensite/ui/blocks/contact/contact-image\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Enter your name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"service\",\n    type: \"checkbox-group\",\n    label: \"Services Needed\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web-design\",\n        label: \"Web Design\",\n        description: \"Site design + development\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo design + brand identity\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Digital Marketing\",\n        description: \"SEO + social media\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy business consulting\",\n      },\n    ],\n  },\n\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Details\",\n    placeholder:\n      \"Tell us about your project goals, target audience, and any specific requirements...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactImage\n      image={{\n        src: imagePlaceholders[103],\n        alt: \"A person working at a desk\"\n      }}\n      eyebrow=\"Ready to Start?\"\n      heading=\"Let's Build Something Amazing\"\n      description=\"Ready to take your business to the next level? Share your project details with us and we'll craft a custom proposal tailored to your needs.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for reaching out! We'll review your project details and get back to you with a custom proposal within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Start Your Project\",\n          },\n        },\n      }}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.9}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Image configuration for the left panel","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"contactOverlays":{"type":"array","description":"Contact overlay items displayed over the image","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for DynamicIcon (e.g., \"lucide/phone\")","required":true},"label":{"type":"string","description":"Eyebrow label above the title (e.g., \"PHONE\", \"EMAIL\")","required":true},"title":{"type":"string","description":"Main title text (e.g., phone number, email address)","required":true},"description":{"type":"string","description":"Optional description text","required":false},"href":{"type":"string","description":"Optional link URL (e.g., \"tel:+15551234567\", \"mailto:support@example.com\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the item container","required":false}},"typeLabel":"ContactOverlayItem"},"typeLabel":"ContactOverlayItem[]","required":false},"contactOverlaysSlot":{"type":"object","description":"Custom slot for rendering contact overlays (overrides contactOverlays array)","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","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 grid","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow text","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},"contactOverlaysClassName":{"type":"string","description":"Additional CSS classes for the contact overlays container","required":false},"background":{"type":"string","description":"Background style for the section","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 or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","form","image","split-layout","overlay","modern"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a general project inquiry use case — name, email, phone, services needed checkbox-group, and project details textarea — do not change the field set unless the site has clearly different requirements. DO NOT USE this block if you don't have a real image from the media library — the 'image' prop is required for the split-panel layout. Only use a real image from the media library. For 'contactOverlays', only supply real contact data points (phone, email, address) from the system; do not fabricate overlay items — if no real contact data exists, omit 'contactOverlays'. Ensure to only supply a valid set of contact data points, DO NOT make up any contact data. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:40.048Z"}