{"success":true,"data":{"block":{"id":"contact-quote","name":"Contact Quote Request","title":"Contact Quote Request","category":"Contact","categorySlug":"contact","description":"Quote request form with project details, budget, and timeline. Ideal for service providers and contractors.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290823/nq0u0rcma7n0lfl9clhtvnpecu9c/cleanshot-2026-02-25-at-02-17-50.png","mobile":"https://cdn.ing/assets/i/r/290822/n7n0i5jk26u72yag8sexi0zgqism/cleanshot-2026-02-25-at-02-18-00.png"},"componentPath":"blocks/contact/contact-quote.tsx","code":"\"use client\";\n\nimport { ContactQuote } from \"@opensite/ui/blocks/contact/contact-quote\";\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 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: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company (optional)\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"service_type\",\n    type: \"radio\",\n    label: \"Service Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web_design\",\n        label: \"Web Design\",\n        description: \"Custom website design and development.\",\n      },\n      {\n        value: \"mobile_app\",\n        label: \"Mobile App\",\n        description: \"iOS and Android app development.\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo, identity, and brand guidelines.\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Digital Marketing\",\n        description: \"SEO, PPC, and content marketing.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy and technical consulting.\",\n      },\n      {\n        value: \"maintenance\",\n        label: \"Maintenance\",\n        description: \"Ongoing support and updates.\",\n      },\n    ],\n  },\n  {\n    name: \"budget_range\",\n    type: \"select\",\n    label: \"Budget Range\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"5k-10k\", label: \"$5,000 - $10,000\" },\n      { value: \"10k-25k\", label: \"$10,000 - $25,000\" },\n      { value: \"25k-50k\", label: \"$25,000 - $50,000\" },\n      { value: \"50k-100k\", label: \"$50,000 - $100,000\" },\n      { value: \"100k+\", label: \"$100,000+\" },\n      { value: \"not_sure\", label: \"Not sure yet\" },\n    ],\n  },\n  {\n    name: \"timeline\",\n    type: \"select\",\n    label: \"Project Timeline\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"asap\", label: \"ASAP\" },\n      { value: \"1-2\", label: \"1-2 months\" },\n      { value: \"3-4\", label: \"3-4 months\" },\n      { value: \"5-6\", label: \"5-6 months\" },\n      { value: \"6+\", label: \"6+ months\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"project_status\",\n    type: \"radio\",\n    label: \"Project Status\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"new\", label: \"New Project\" },\n      { value: \"redesign\", label: \"Redesign/Update\" },\n      { value: \"migration\", label: \"Platform Migration\" },\n      { value: \"expansion\", label: \"Expansion/Addition\" },\n    ],\n  },\n  {\n    name: \"features\",\n    type: \"checkbox-group\",\n    label: \"Required Features\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"ecommerce\",\n        label: \"E-commerce\",\n        description: \"Online store and payments.\",\n      },\n      { value: \"cms\", label: \"CMS\", description: \"Content management system.\" },\n      {\n        value: \"booking\",\n        label: \"Booking System\",\n        description: \"Appointments and reservations.\",\n      },\n      {\n        value: \"crm\",\n        label: \"CRM\",\n        description: \"Customer relationship management.\",\n      },\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Custom tracking and reporting.\",\n      },\n      {\n        value: \"integrations\",\n        label: \"Third-party Integrations\",\n        description: \"API connections.\",\n      },\n    ],\n  },\n  {\n    name: \"reference_urls\",\n    type: \"textarea\",\n    label: \"Reference Websites\",\n    placeholder: \"List any websites you like (one per line)\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Description\",\n    placeholder:\n      \"Tell us about your project goals, challenges, and requirements...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"attachments\",\n    type: \"file\",\n    label: \"Project Documents\",\n    placeholder: \"Upload RFP, requirements, wireframes, etc...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.png,.jpg,.jpeg\",\n    maxSize: 15 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactQuote\n      heading=\"Request a Custom Quote\"\n      description=\"Tell us about your project and we'll provide a detailed proposal with pricing, timeline, and deliverables. Most quotes are delivered within 2-3 business days.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your quote request! We'll review your project requirements and send you a detailed proposal within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Custom Quote\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"architect\"\n      patternOpacity={0.15}\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","quote","request","form","pricing","estimate"],"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 quote request use case — first/last name, email, phone, company (optional), service type radio, budget range select, and project description — 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:39:46.930Z"}