{"success":true,"data":{"block":{"id":"faq-gradient-categories","name":"Gradient Background Categorized FAQ","title":"FAQ Gradient Categories","category":"Faq","categorySlug":"faq","description":"A visually striking FAQ section with a gradient background container housing categorized accordion groups in a two-column grid. The gradient styling adds depth and visual interest while categories keep content organized. Perfect for SaaS products or modern web applications.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293125/dy3r8envgeeflgyygu6ltbvpdxoy/cleanshot-2026-03-04-at-04-14-22.png","mobile":"https://cdn.ing/assets/i/r/293124/m5o8y60ju1sk2ry9cfswz1cbnpzr/cleanshot-2026-03-04-at-04-14-35.png"},"componentPath":"blocks/faq/faq-gradient-categories.tsx","code":"import { FaqGradientCategories } from \"@opensite/ui/blocks/faq/faq-gradient-categories\";\n\nexport default function Demo() {\n  return (\n    <FaqGradientCategories\n      heading=\"Browse by Topic\"\n      description=\"Select a category to explore relevant questions and detailed answers.\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.2}\n      background=\"gradient\"\n      spacing=\"py-6 md:py-32\"\n      categories={[\n        {\n          title: \"Product Features\",\n          items: [\n            {\n              id: \"dashboards\",\n              question: \"Can I customize my dashboard?\",\n              answer:\n                \"Yes, create multiple custom dashboards with widgets for tasks, charts, calendars, and metrics. Save different layouts for different use cases.\",\n            },\n            {\n              id: \"permissions\",\n              question: \"How do permissions work?\",\n              answer:\n                \"Set granular permissions at the workspace, project, and task levels. Control who can view, edit, comment, or manage content with role-based access.\",\n            },\n          ],\n        },\n        {\n          title: \"Integration & API\",\n          items: [\n            {\n              id: \"zapier\",\n              question: \"Do you integrate with Zapier?\",\n              answer:\n                \"Yes, our Zapier integration enables connections with 5,000+ apps. Automate workflows between your tools without writing code.\",\n            },\n            {\n              id: \"webhooks-setup\",\n              question: \"How do I set up webhooks?\",\n              answer:\n                \"Navigate to Settings > Integrations > Webhooks. Add your endpoint URL, select events to monitor, and save. Test webhooks before going live.\",\n            },\n          ],\n        },\n        {\n          title: \"Support & Resources\",\n          items: [\n            {\n              id: \"documentation\",\n              question: \"Where can I find documentation?\",\n              answer:\n                \"Our knowledge base at docs.example.com includes guides, tutorials, API references, and best practices. Search by topic or browse by category.\",\n            },\n            {\n              id: \"community\",\n              question: \"Is there a user community?\",\n              answer:\n                \"Join our community forum with 50,000+ active users. Share tips, ask questions, vote on feature requests, and connect with other power users.\",\n            },\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Array of FAQ categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"items":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"question":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"answer":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqItem"},"typeLabel":"FaqItem[]","required":true}},"typeLabel":"FaqCategory"},"typeLabel":"FaqCategory[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React.ReactNode","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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content container wrapper","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},"gridClassName":{"type":"string","description":"Additional CSS classes for the categories grid","required":false},"categoryTitleClassName":{"type":"string","description":"Additional CSS classes for category titles","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","categories","gradient","two-column","modern","saas","styled"],"performance":{},"importantUsageNotes":"Organize questions into 2-4 'categories' arranged in a 2-column desktop grid; use an even number of categories. Each category requires a 'title' and 2-4 'items'. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:01.745Z"}