{"success":true,"data":{"block":{"id":"contact-dark","name":"Contact Dark Theme","title":"Contact Dark","category":"Contact","categorySlug":"contact","description":"A dark-themed contact form with split layout featuring form fields on one side and contact information with social links on a dark background. Modern, high-contrast design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290610/bq7ydik61cg7ijixrctyvsviam26/cleanshot-2026-02-21-at-02-33-04.png","mobile":"https://cdn.ing/assets/i/r/290609/6cqflyybhpfng2dw4g3rji3b6xax/cleanshot-2026-02-21-at-02-33-26.png"},"componentPath":"blocks/contact/contact-dark.tsx","code":"\"use client\";\n\nimport { ContactDark } from \"@opensite/ui/blocks/contact/contact-dark\";\nimport { demoFormConfig, demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full 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: \"subject\",\n    // type: \"radio\",\n    type: \"select\",\n    label: \"Inquiry Type\",\n    required: true,\n    columnSpan: 12,\n    // layout: \"grid\",\n    options: [\n      {\n        value: \"general\",\n        label: \"General Inquiry\",\n        description: \"Question about our services.\",\n      },\n      {\n        value: \"support\",\n        label: \"Support\",\n        description: \"Assistance from our support team.\",\n      },\n      {\n        value: \"sales\",\n        label: \"Sales Question\",\n        description: \"Question about our pricing or products.\",\n      },\n      {\n        value: \"partnership\",\n        label: \"Partnership Opportunity\",\n        description: \"Opportunity to collaborate with us.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Message\",\n    placeholder: \"Tell us more about your inquiry...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactDark\n      heading=\"Get In Touch\"\n      description=\"Have a question or want to work together? Fill out the form below and we'll get back to you within 24 hours.\"\n      contactHeading=\"Contact Information\"\n      contactDescription=\"Reach out to us directly using any of the methods below, or fill out the form and we'll respond within 24 hours.\"\n      contactOptions={[\n        {\n          icon: \"lucide/phone\",\n          info: \"+1 (555) 123-4567\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/mail\",\n          info: \"hello@example.com\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          info: \"123 Main Street, San Francisco, CA 94105\",\n          href: \"#\",\n        },\n      ]}\n      socialLinks={[\n        {\n          icon: \"lucide/twitter\",\n          href: \"https://twitter.com\",\n          label: \"Follow us on Twitter\",\n        },\n        {\n          icon: \"lucide/facebook\",\n          href: \"https://facebook.com\",\n          label: \"Like us on Facebook\",\n        },\n        {\n          icon: \"lucide/linkedin\",\n          href: \"https://linkedin.com\",\n          label: \"Connect on LinkedIn\",\n        },\n        {\n          icon: \"lucide/instagram\",\n          href: \"https://instagram.com\",\n          label: \"Follow us on Instagram\",\n        },\n      ]}\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for contacting us! We'll get back to you shortly.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"contactHeading":{"type":"object","description":"Contact information heading","typeLabel":"React.ReactNode","required":false},"contactDescription":{"type":"object","description":"Contact information description","typeLabel":"React.ReactNode","required":false},"contactOptions":{"type":"array","description":"Contact options to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the contact option","required":true},"info":{"type":"string","description":"Contact information text","required":true},"href":{"type":"string","description":"Optional href for the contact option","required":false}},"typeLabel":"ContactDarkOption"},"typeLabel":"ContactDarkOption[]","required":false},"contactOptionsSlot":{"type":"object","description":"Custom slot for rendering contact options (overrides contactOptions array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social media links to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the social platform","required":true},"href":{"type":"string","description":"Link href","required":true},"label":{"type":"string","description":"Accessible label for the link","required":true}},"typeLabel":"ContactDarkSocialLink"},"typeLabel":"ContactDarkSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks 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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","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},"formPanelClassName":{"type":"string","description":"Additional CSS classes for the form panel","required":false},"infoPanelClassName":{"type":"string","description":"Additional CSS classes for the info panel","required":false},"contactOptionsClassName":{"type":"string","description":"Additional CSS classes for the contact options container","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","form","dark","theme","split-layout","social","modern"],"performance":{},"importantUsageNotes":"Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data, if the brand/location hasn't supplied the contact data points, don't generate/guess, just skip over that data point(s) and only use ones stored in the system."}},"timestamp":"2026-05-13T10:40:41.073Z"}