{"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/308397/2z7dgfwxz4n5pkyogjuma4synzdv/contact-photography-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308398/d1klx0305l7kgwykichffwrp3wh2/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\";\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: \"https://cdn.ing/assets/i/r/289100/qx79hnpbzbm229nfaeceafv6b3a8/cooking-citrus-and-pistachio-bundt-cake-on-rusty-t-2024-10-18-04-31-33-utc.webp\",\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,"mediaHints":{"path":"image","roles":["feature"],"required":false,"note":"Full-height panel image showcasing photography work."}},"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},"image.src":{"type":"object","description":""},"image.alt":{"type":"object","description":""}},"exampleProps":{"heading":"Book a Session","description":"Tell us about your project and we'll put together a custom quote. We typically respond within 1-2 business days.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photographer working in a bright studio"},"formEngineSetup":{"formConfig":{"endpoint":"/api/photography","format":"json"}}},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","photography","split-screen","form","image","creative","edge-to-edge"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. formEngineSetup is required to enable form submission. Project type options (wedding, portrait, corporate, product, real estate) should match the photographer's actual services.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["contact_form","contact_info"],"mediaSlots":{"image":{"path":"image","roles":["feature"],"required":false,"note":"Full-height panel image showcasing photography work."}},"propConstraints":{"image.src":{"note":"Absolute URL to a real portfolio or showcase image"},"image.alt":{"note":"Descriptive alt text for the image"},"formEngineSetup":{"note":"Must include a valid formConfig.endpoint"}}}}},"timestamp":"2026-06-28T22:02:22.330Z"}