{"success":true,"data":{"block":{"id":"contact-demo","name":"Contact Demo Request","title":"Contact Demo Request","category":"Contact","categorySlug":"contact","description":"A demo request form with use case selection, team size, timeline, and company information. Perfect for SaaS products and B2B services requiring product demonstrations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290624/f7jhma9pk839b8lj6ffa0ir2o27j/cleanshot-2026-02-21-at-15-35-46.png","mobile":"https://cdn.ing/assets/i/r/290623/o3etnz78zbf46y7q053abjck9d95/cleanshot-2026-02-21-at-15-36-06.png"},"componentPath":"blocks/contact/contact-demo.tsx","code":"\"use client\";\n\nimport { ContactDemo } from \"@opensite/ui/blocks/contact/contact-demo\";\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: \"work_email\",\n    type: \"email\",\n    label: \"Work Email\",\n    placeholder: \"you@company.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: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"company_size\",\n    type: \"select\",\n    label: \"Company Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"1-10\",\n        label: \"1-10 employees\",\n      },\n      {\n        value: \"11-50\",\n        label: \"11-50 employees\",\n      },\n      {\n        value: \"51-200\",\n        label: \"51-200 employees\",\n      },\n      {\n        value: \"201-1000\",\n        label: \"201-1000 employees\",\n      },\n      {\n        value: \"1000+\",\n        label: \"1000+ employees\",\n      },\n    ],\n  },\n  {\n    name: \"role\",\n    type: \"select\",\n    label: \"Your Role\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"executive\",\n        label: \"Executive/C-Level\",\n      },\n      {\n        value: \"manager\",\n        label: \"Manager/Director\",\n      },\n      {\n        value: \"individual\",\n        label: \"Individual Contributor\",\n      },\n      {\n        value: \"consultant\",\n        label: \"Consultant\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n      },\n    ],\n  },\n  {\n    name: \"use_case\",\n    type: \"checkbox-group\",\n    label: \"What are you interested in?\",\n    placeholder: \"Select features\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Data insights and reporting.\",\n      },\n      {\n        value: \"automation\",\n        label: \"Automation\",\n        description: \"Workflow automation tools.\",\n      },\n      {\n        value: \"integration\",\n        label: \"Integrations\",\n        description: \"Connect with existing tools.\",\n      },\n      {\n        value: \"collaboration\",\n        label: \"Collaboration\",\n        description: \"Team communication features.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your needs\",\n    placeholder:\n      \"What challenges are you trying to solve? What would you like to see in the demo?\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactDemo\n      heading=\"See It In Action\"\n      description=\"Schedule a personalized demo and discover how our platform can transform your workflow. Our team will walk you through key features tailored to your needs.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for requesting a demo! Our team will reach out within 24 hours to schedule a time that works for you.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Request Demo\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"gradientGlowTop\"\n      patternOpacity={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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","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},"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","demo","request","form","saas","b2b","product","trial"],"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 product demo booking use case — first/last name, work email, phone, company name, company size select, role select, and additional details — do not change the field set unless the site has clearly different requirements. 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:15.251Z"}