{"success":true,"data":{"block":{"id":"contact-photography","name":"Contact Photography Services","title":"Contact Photography","category":"Contact","categorySlug":"contact","description":"Full-width split-screen contact form with edge-to-edge design, featuring heading, description and form on one side and a large full-height image on the other. Pattern background support, configurable media placement. Perfect for photographers, studios, and creative services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306281/2ulmrnlqv2jt6iuc22gdr92l4rlp/contact-photography-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306282/dhpjt9j5fxq48abbbzx09c9z1vpr/contact-photography-mobile.jpg"},"componentPath":"blocks/contact/contact-photography.tsx","code":"\"use client\";\n\nimport { ContactPhotography } from \"@opensite/ui/blocks/contact/contact-photography\";\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: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"checkbox-group\",\n    label: \"Project Type(s)\",\n    placeholder: \"Select 1 or more project types\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"wedding\",\n        label: \"Wedding\",\n        description: \"Ceremony, reception, and bridal portraits.\",\n      },\n      {\n        value: \"portrait\",\n        label: \"Portrait\",\n        description: \"Individual, couple, or family sessions.\",\n      },\n      {\n        value: \"corporate\",\n        label: \"Corporate\",\n        description: \"Headshots, team photos, and events.\",\n      },\n      {\n        value: \"product\",\n        label: \"Product\",\n        description: \"E-commerce and catalog photography.\",\n      },\n      {\n        value: \"real_estate\",\n        label: \"Real Estate\",\n        description: \"Interior, exterior, and aerial shots.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Something else not listed above.\",\n      },\n    ],\n  },\n  {\n    name: \"event_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"reference_images\",\n    type: \"file\",\n    label: \"Reference Images\",\n    placeholder: \"Upload reference photos or mood boards...\",\n    required: false,\n    accept: \"image/*,.pdf\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Details\",\n    placeholder:\n      \"Tell us about your vision, location, special requests, etc...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactPhotography\n      image={{\n        src: imagePlaceholders[108],\n        alt: \"A person working at a desk\",\n      }}\n      heading=\"Ready to Get Started?\"\n      description=\"Tell us about your project and we'll put together a custom quote for you. We typically respond within 1-2 business days.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your inquiry! We'll review your project details and get back to you within 1-2 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Inquiry\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopLeft\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","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},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","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},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","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","@page-speed/forms"],"tags":["contact","photography","split-screen","form","image","creative","edge-to-edge"],"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 photography inquiry use case — first/last name, email, phone, project type checkbox-group, preferred date picker, reference image file upload, 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 left-panel split layout. Only use a real image from the media library. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:38.825Z"}