{"success":true,"data":{"block":{"id":"feature-accordion-image","name":"Feature Accordion Image","title":"Feature Accordion Image","category":"Features","categorySlug":"features","description":"Accordion-based feature display with images that change based on the selected accordion item. Two-column layout with accordion on left and dynamic image on right. Smooth transitions between items.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291542/9nm6nxcar91jud4acpc3itkbfjlf/cleanshot-2026-02-25-at-23-15-22-2x.png","mobile":"https://cdn.ing/assets/i/r/291541/mrtxshc4fkmvktct9vbouhk1wncg/cleanshot-2026-02-25-at-23-19-30-2x.png"},"componentPath":"blocks/features/feature-accordion-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureAccordionImage } from \"@opensite/ui/blocks/features/feature-accordion-image\";\n\nexport default function Demo() {\n  return (\n    <FeatureAccordionImage\n      title=\"Frequently Asked Questions\"\n      description=\"Learn more about our platform's features and capabilities. Find answers to the most common questions about implementation, security, and pricing.\"\n      items={[\n        {\n          title: \"How does the deployment process work?\",\n          content:\n            \"Our platform uses a simple git-based workflow. Push your code to your repository, and we automatically build, test, and deploy to our global edge network. You'll have a production URL in seconds, complete with SSL certificates and custom domain support.\",\n          imageSrc: imagePlaceholders[41],\n          imageAlt: \"Deployment workflow\",\n        },\n        {\n          title: \"What security features are included?\",\n          content:\n            \"We provide enterprise-grade security out of the box: automatic SSL/TLS encryption, DDoS protection, WAF (Web Application Firewall), SOC 2 Type II compliance, and regular penetration testing. All data is encrypted at rest and in transit.\",\n          imageSrc: imagePlaceholders[66],\n          imageAlt: \"Security features\",\n        },\n        {\n          title: \"Can I integrate with my existing tools?\",\n          content:\n            \"Yes! We offer native integrations with 50+ popular tools including Slack, GitHub, Jira, Datadog, and more. Our comprehensive API and webhooks let you build custom integrations for any workflow.\",\n          imageSrc: imagePlaceholders[87],\n          imageAlt: \"Integration options\",\n        },\n        {\n          title: \"What kind of support do you offer?\",\n          content:\n            \"All plans include 24/7 email support with < 24 hour response times. Pro and Enterprise plans get priority support with < 1 hour response times, dedicated Slack channels, and quarterly business reviews with our success team.\",\n          imageSrc: imagePlaceholders[109],\n          imageAlt: \"Support options\",\n        },\n      ]}\n      defaultValue=\"item-0\"\n      background=\"white\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of accordion items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Accordion item title","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Accordion item content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL for this item","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the accordion item","required":false},"triggerClassName":{"type":"string","description":"Additional CSS classes for the trigger","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content","required":false}},"typeLabel":"FeatureAccordionImageItem"},"typeLabel":"FeatureAccordionImageItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"defaultValue":{"type":"string","description":"Default open item value","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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","accordion","interactive","images","dynamic","two-column","faq"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3, 6, 9, or 12 `benefits` since the block uses a 3 column layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:19.574Z"}