{"success":true,"data":{"category":{"slug":"faq","name":"Faq","description":"Collection of faq components"},"blocks":[{"id":"faq-simple-accordion","name":"Simple Accordion FAQ","title":"FAQ Simple Accordion","category":"Faq","categorySlug":"faq","description":"A clean, minimal FAQ section with collapsible accordion items. Features a bold heading followed by expandable question-answer pairs with smooth animations. Best suited for straightforward FAQ pages where users need quick access to common questions without visual clutter.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291540/2mxtgsl8lj9g465hnkdit4dh4ngi/cleanshot-2026-02-25-at-23-13-40-2x.png","mobile":"https://cdn.ing/assets/i/r/291539/zgbu1q0kr1kzzb2xhyerr0v434aj/cleanshot-2026-02-25-at-23-13-53-2x.png"},"componentPath":"blocks/faq/faq-simple-accordion.tsx","code":"import { FaqSimpleAccordion } from \"@opensite/ui/blocks/faq/faq-simple-accordion\";\n\nexport default function Demo() {\n  return (\n    <FaqSimpleAccordion\n      heading=\"Frequently Asked Questions\"\n      description=\"Find answers to common questions about our product, billing, and support.\"\n      pattern=\"p6\"\n      patternOpacity={0.9}\n      background=\"white\"\n      items={[\n        {\n          id: \"pricing\",\n          question: \"What pricing plans do you offer?\",\n          answer:\n            \"We offer three flexible pricing plans to suit businesses of all sizes: Starter ($29/month), Professional ($99/month), and Enterprise (custom pricing). All plans include core features with varying limits on users, storage, and advanced capabilities.\",\n        },\n        {\n          id: \"trial\",\n          question: \"Is there a free trial available?\",\n          answer:\n            \"Yes! We offer a 14-day free trial with full access to all Professional plan features. No credit card required to start your trial, and you can cancel anytime.\",\n        },\n        {\n          id: \"integration\",\n          question: \"What integrations are supported?\",\n          answer:\n            \"We integrate with over 50+ popular tools including Slack, Salesforce, HubSpot, Google Workspace, Microsoft Teams, Zoom, and many more. Our API also allows for custom integrations.\",\n        },\n        {\n          id: \"data-security\",\n          question: \"How do you handle data security?\",\n          answer:\n            \"We take security seriously with SOC 2 Type II certification, end-to-end encryption, regular security audits, and compliance with GDPR, CCPA, and HIPAA standards. Your data is stored in secure, redundant data centers.\",\n        },\n        {\n          id: \"support\",\n          question: \"What kind of support do you provide?\",\n          answer:\n            \"All plans include email support with 24-hour response time. Professional and Enterprise plans get priority support, live chat, phone support, and a dedicated account manager for Enterprise customers.\",\n        },\n        {\n          id: \"cancel\",\n          question: \"Can I cancel my subscription at any time?\",\n          answer:\n            \"Absolutely. You can cancel your subscription at any time from your account settings. There are no cancellation fees, and you'll continue to have access until the end of your billing period.\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","collapsible","help","support","minimal","simple"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this single-column accordion layout. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."},{"id":"faq-static-list","name":"Static List FAQ","title":"FAQ Static List","category":"Faq","categorySlug":"faq","description":"A non-interactive FAQ layout displaying all questions and answers in a vertical list format. Each Q&A pair is separated by a border, making it easy to scan through all content at once. Ideal for shorter FAQ sections where users benefit from seeing all information without clicking.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293137/rijao3xymyo2nko99z5wpwtldhyz/cleanshot-2026-03-04-at-04-30-55.png","mobile":"https://cdn.ing/assets/i/r/293136/euhxjmhfitstiezbcasnf4a3yb4g/cleanshot-2026-03-04-at-04-31-15.png"},"componentPath":"blocks/faq/faq-static-list.tsx","code":"import { FaqStaticList } from \"@opensite/ui/blocks/faq/faq-static-list\";\n\nexport default function Demo() {\n  return (\n    <FaqStaticList\n      heading=\"Common Questions\"\n      description=\"Here are some of our most frequently asked questions. If you don't see your question here, feel free to reach out to our support team.\"\n      items={[\n        {\n          question: \"How do I get started?\",\n          answer:\n            \"Getting started is simple: sign up for a free account, complete the onboarding wizard, invite your team members, and you're ready to go. The entire process takes less than 5 minutes.\",\n        },\n        {\n          question: \"Do you offer training resources?\",\n          answer:\n            \"Yes, we provide comprehensive training including video tutorials, detailed documentation, live webinars, and a knowledge base with hundreds of articles covering all features.\",\n        },\n        {\n          question: \"What's your uptime guarantee?\",\n          answer:\n            \"We maintain a 99.9% uptime SLA with redundant infrastructure across multiple regions. In the unlikely event of downtime, we provide credits as outlined in our service agreement.\",\n        },\n        {\n          question: \"Can I import data from other tools?\",\n          answer:\n            \"Absolutely. We support data imports from CSV files and offer migration assistance from popular platforms including Asana, Trello, Monday.com, and more.\",\n        },\n        {\n          question: \"Are there any hidden fees?\",\n          answer:\n            \"No hidden fees whatsoever. Your monthly or annual subscription covers everything. Optional add-ons like premium integrations or additional storage are clearly priced upfront.\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeBottomRight\"\n      patternOpacity={0.11}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"itemsWrapperClassName":{"type":"string","description":"Additional CSS classes for the items wrapper","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for individual items","required":false},"questionClassName":{"type":"string","description":"Additional CSS classes for questions","required":false},"answerClassName":{"type":"string","description":"Additional CSS classes for answers","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","list","static","help","support","simple","readable"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this static (non-collapsible) list layout. Each item requires a 'question' and an 'answer'; no 'id' field is needed. Follow the example props closely for this block."},{"id":"faq-centered-accordion","name":"Centered Accordion FAQ","title":"FAQ Centered Accordion","category":"Faq","categorySlug":"faq","description":"A centered FAQ section with a prominent heading, descriptive subtext, and collapsible accordion items. The centered layout creates visual hierarchy and draws attention to the content. Perfect for landing pages or dedicated FAQ sections that need a polished, professional appearance.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293098/siuepu7y06jd1renp4l10qyvw9ji/cleanshot-2026-03-03-at-14-31-02.png","mobile":"https://cdn.ing/assets/i/r/293097/9zklo65hcjbodh4w0mf366nh2bv8/cleanshot-2026-03-03-at-14-31-14.png"},"componentPath":"blocks/faq/faq-centered-accordion.tsx","code":"import { FaqCenteredAccordion } from \"@opensite/ui/blocks/faq/faq-centered-accordion\";\n\nexport default function Demo() {\n  return (\n    <FaqCenteredAccordion\n      heading=\"Have Questions?\"\n      description=\"Find answers to the most commonly asked questions about our platform, features, and policies.\"\n      items={[\n        {\n          id: \"features\",\n          question: \"What features are included in the base plan?\",\n          answer:\n            \"The base plan includes unlimited projects, 10GB storage, basic reporting, email support, mobile apps, API access, and integrations with 25+ popular tools.\",\n        },\n        {\n          id: \"team-size\",\n          question: \"Is there a limit on team size?\",\n          answer:\n            \"Starter plans support up to 10 users, Professional plans up to 50 users, and Enterprise plans have no user limits with volume discounts available.\",\n        },\n        {\n          id: \"billing\",\n          question: \"How does billing work?\",\n          answer:\n            \"We offer both monthly and annual billing. Annual plans save 20% and are billed once per year. You can upgrade, downgrade, or cancel at any time.\",\n        },\n        {\n          id: \"mobile\",\n          question: \"Do you have mobile apps?\",\n          answer:\n            \"Yes, we have native iOS and Android apps with full feature parity. Download them from the App Store or Google Play and access your work anywhere.\",\n        },\n        {\n          id: \"customization\",\n          question: \"Can I customize the platform?\",\n          answer:\n            \"Absolutely. Customize dashboards, workflows, fields, templates, notifications, and branding. Enterprise plans also support white-labeling and custom domains.\",\n        },\n      ]}\n      pattern=\"grid1\"\n      patternOpacity={1}\n      background=\"muted\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"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},"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","centered","help","support","professional","landing-page"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this centered single-column accordion. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."},{"id":"faq-badge-support","name":"Badge Header FAQ with Support CTA","title":"FAQ Badge Support","category":"Faq","categorySlug":"faq","description":"A comprehensive FAQ section featuring a badge label, centered heading with description, accordion items, and a dedicated support call-to-action section at the bottom. The separator and contact button encourage users to reach out if they can't find their answer. Ideal for customer service pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291561/dij9ph18bkv83nuct58xyepj4ph9/cleanshot-2026-02-26-at-21-31-19-2x.png","mobile":"https://cdn.ing/assets/i/r/291560/zgdzj5p1drum8uvlr1pyjkpqlf6e/cleanshot-2026-02-26-at-21-31-46-2x.png"},"componentPath":"blocks/faq/faq-badge-support.tsx","code":"import { FaqBadgeSupport } from \"@opensite/ui/blocks/faq/faq-badge-support\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FaqBadgeSupport\n      badge=\"Support\"\n      heading=\"Frequently Asked Questions\"\n      description=\"Can't find what you're looking for? Our support team is here to help.\"\n      items={[\n        {\n          id: \"account\",\n          question: \"How do I reset my password?\",\n          answer:\n            \"Click 'Forgot Password' on the login page, enter your email, and we'll send you a secure reset link. The link expires after 24 hours for security.\",\n        },\n        {\n          id: \"roles\",\n          question: \"What user roles are available?\",\n          answer:\n            \"We offer Admin, Manager, Member, and Guest roles. Each role has specific permissions for viewing, editing, and managing content and team members.\",\n        },\n        {\n          id: \"notifications\",\n          question: \"Can I customize notification settings?\",\n          answer:\n            \"Yes, you have granular control over email, push, and in-app notifications. Set preferences for mentions, updates, deadlines, and more.\",\n        },\n        {\n          id: \"export\",\n          question: \"Can I export my data?\",\n          answer:\n            \"Yes, export your data anytime in CSV, Excel, or JSON formats. Enterprise plans also support automated exports and API-based data retrieval.\",\n        },\n      ]}\n      supportText=\"Still have questions?\"\n      supportAction={{\n        label: \"Contact Support\",\n        href: \"#\",\n        variant: \"default\",\n        asButton: true,\n        size: \"lg\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-up-right\" />,\n      }}\n      pattern=\"architect\"\n      patternOpacity={0.05}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"supportText":{"type":"object","description":"Support section text","typeLabel":"React.ReactNode","required":false},"supportAction":{"type":"object","description":"Support section CTA configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"supportSlot":{"type":"object","description":"Custom slot for support section (overrides supportText and supportAction)","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"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},"supportSectionClassName":{"type":"string","description":"Additional CSS classes for the support section","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","badge","support","contact","help","customer-service","cta"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this accordion layout. Each item requires a unique 'id', a 'question', and an 'answer'. The 'supportAction' is a single CTA — use a variant of 'default' for it. Always supply a real 'supportText' and 'supportAction' pointing to a valid support or contact page; do not fabricate support URLs. Follow the example props closely for this block."},{"id":"faq-numbered-list","name":"Numbered List FAQ","title":"FAQ Numbered List","category":"Faq","categorySlug":"faq","description":"A centered FAQ layout with numbered question cards. Each item displays a sequential number badge alongside the question and answer in a bordered card format. The badge header and centered layout create a structured, organized appearance. Great for step-by-step guides or prioritized FAQs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293130/2jfsoum46lyzuti5c13hq6jd49ck/cleanshot-2026-03-04-at-04-18-12.png","mobile":"https://cdn.ing/assets/i/r/293131/vcv8skc73pzk1pif5eoae6qhgddh/cleanshot-2026-03-04-at-04-18-33.png"},"componentPath":"blocks/faq/faq-numbered-list.tsx","code":"import { FaqNumberedList } from \"@opensite/ui/blocks/faq/faq-numbered-list\";\n\nexport default function Demo() {\n  return (\n    <FaqNumberedList\n      badge=\"Getting Started\"\n      heading=\"Quick Start Guide\"\n      description=\"Follow these steps to get up and running with your new account.\"\n      items={[\n        {\n          question: \"Create your account\",\n          answer:\n            \"Sign up with your email or use single sign-on with Google, Microsoft, or your company's identity provider. Verify your email to activate your account.\",\n        },\n        {\n          question: \"Set up your workspace\",\n          answer:\n            \"Name your workspace, upload a logo, and configure your preferences. You can create multiple workspaces for different teams or projects.\",\n        },\n        {\n          question: \"Invite team members\",\n          answer:\n            \"Add colleagues by email, set their roles, and they'll receive an invitation to join. You can also create public invite links for easier onboarding.\",\n        },\n        {\n          question: \"Create your first project\",\n          answer:\n            \"Choose from templates or start from scratch. Add tasks, set deadlines, assign team members, and track progress in real-time.\",\n        },\n        {\n          question: \"Explore integrations\",\n          answer:\n            \"Connect your favorite tools like Slack, Zoom, and Google Drive. Enable notifications and automate workflows to boost productivity.\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge text above heading","typeLabel":"React.ReactNode","required":false},"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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"itemsWrapperClassName":{"type":"string","description":"Additional CSS classes for the items wrapper","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for individual items","required":false},"numberClassName":{"type":"string","description":"Additional CSS classes for the number badge","required":false},"questionClassName":{"type":"string","description":"Additional CSS classes for questions","required":false},"answerClassName":{"type":"string","description":"Additional CSS classes for answers","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","numbered","list","cards","badge","centered","organized","steps"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this numbered static-list layout. Each item requires a 'question' and an 'answer'; no 'id' field is needed. Numbers are auto-generated, so supply items in the intended reading order. Follow the example props closely for this block."},{"id":"faq-numbered-grid","name":"Two-Column Numbered Grid FAQ","title":"FAQ Numbered Grid","category":"Faq","categorySlug":"faq","description":"A responsive two-column grid layout displaying numbered FAQ cards. Features a centered header section with heading and description, followed by numbered question-answer cards arranged in a grid. Maximizes space efficiency while maintaining readability. Ideal for pages with many FAQs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291530/lym97jsqs6w8lzz8lp1kn2xvlulk/cleanshot-2026-02-25-at-13-47-15-2x.png","mobile":"https://cdn.ing/assets/i/r/291529/iqlol50xbpxl39q5f7nt3frl7cow/cleanshot-2026-02-25-at-13-47-30-2x.png"},"componentPath":"blocks/faq/faq-numbered-grid.tsx","code":"import { FaqNumberedGrid } from \"@opensite/ui/blocks/faq/faq-numbered-grid\";\n\nexport default function Demo() {\n  return (\n    <FaqNumberedGrid\n      heading=\"Platform Features\"\n      description=\"Discover the key features that make our platform the best choice for modern teams.\"\n      items={[\n        {\n          question: \"Real-time collaboration\",\n          answer:\n            \"Work together seamlessly with live updates, comments, mentions, and simultaneous editing. See who's online and what they're working on.\",\n        },\n        {\n          question: \"Advanced analytics\",\n          answer:\n            \"Track performance with customizable dashboards, detailed reports, and actionable insights. Export data and create automated reports.\",\n        },\n        {\n          question: \"Workflow automation\",\n          answer:\n            \"Automate repetitive tasks with triggers, rules, and integrations. Save time and reduce errors with smart automation.\",\n        },\n        {\n          question: \"Enterprise security\",\n          answer:\n            \"Bank-level encryption, SSO, two-factor authentication, audit logs, and compliance with major security standards.\",\n        },\n        {\n          question: \"Mobile access\",\n          answer:\n            \"Native iOS and Android apps with offline mode. Access and edit your work from anywhere, even without internet.\",\n        },\n        {\n          question: \"Custom branding\",\n          answer:\n            \"White-label the platform with your logo, colors, and domain. Create a seamless experience for your team and clients.\",\n        },\n      ]}\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.15}\n      background=\"secondary\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"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 grid","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for grid items","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"numberClassName":{"type":"string","description":"Additional CSS classes for the number badge","required":false},"questionClassName":{"type":"string","description":"Additional CSS classes for item questions","required":false},"answerClassName":{"type":"string","description":"Additional CSS classes for item answers","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","numbered","grid","two-column","cards","responsive","organized"],"performance":{},"importantUsageNotes":"Ensure to supply 'items' in multiples of 2 (ideally 4 or 6) since the layout is a 2-column grid on desktop. Each item requires a 'question' and an 'answer'. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"faq-split-help","name":"Split Layout FAQ with Help Section","title":"FAQ Split Help","category":"Faq","categorySlug":"faq","description":"A two-column FAQ layout with the heading and description on the left, accordion items on the right, and a prominent help banner at the bottom. The split design creates visual interest while the help section provides a clear path to support. Perfect for product pages or documentation sites.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293121/or9nbjrfcwpyv66nkssvw5fyq808/cleanshot-2026-03-03-at-20-44-10.png","mobile":"https://cdn.ing/assets/i/r/293120/skbfc9t2llmfd6upyq8hm0z40f76/cleanshot-2026-03-03-at-20-44-25.png"},"componentPath":"blocks/faq/faq-split-help.tsx","code":"import { FaqSplitHelp } from \"@opensite/ui/blocks/faq/faq-split-help\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FaqSplitHelp\n      heading=\"Support Resources\"\n      description=\"Browse our most commonly asked questions or reach out to our support team for personalized assistance.\"\n      items={[\n        {\n          id: \"billing-cycle\",\n          question: \"When will I be charged?\",\n          answer:\n            \"Billing occurs on the same day each month or year, depending on your plan. You'll receive an invoice via email 3 days before each billing cycle.\",\n        },\n        {\n          id: \"refunds\",\n          question: \"What is your refund policy?\",\n          answer:\n            \"We offer a 30-day money-back guarantee. If you're not satisfied, contact us within 30 days of your initial purchase for a full refund.\",\n        },\n        {\n          id: \"upgrades\",\n          question: \"How do plan upgrades work?\",\n          answer:\n            \"Upgrades take effect immediately. You'll be charged a prorated amount for the remainder of your billing cycle at the new plan rate.\",\n        },\n        {\n          id: \"downgrade\",\n          question: \"Can I downgrade my plan?\",\n          answer:\n            \"Yes, downgrades take effect at the end of your current billing cycle. You'll continue to have access to your current plan features until then.\",\n        },\n      ]}\n      helpHeading=\"Need More Help?\"\n      helpDescription=\"Our support team is available 24/7 to answer your questions and help you get the most out of our platform.\"\n      helpAction={{\n        label: \"Contact Support Team\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      background=\"secondary\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"helpHeading":{"type":"object","description":"Help section heading","typeLabel":"React.ReactNode","required":false},"helpDescription":{"type":"object","description":"Help section description","typeLabel":"React.ReactNode","required":false},"helpAction":{"type":"object","description":"Help section CTA configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"helpSlot":{"type":"object","description":"Custom slot for help section (overrides helpHeading, helpDescription, helpAction)","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},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","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},"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},"helpSectionClassName":{"type":"string","description":"Additional CSS classes for the help section","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","split","two-column","help","support","cta","banner"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this split accordion layout. Each item requires a unique 'id', a 'question', and an 'answer'. Always supply 'helpHeading', 'helpDescription', and 'helpAction'; use a variant of 'default' for 'helpAction' and point it to a real support or contact page — do not fabricate URLs. Follow the example props closely for this block."},{"id":"faq-categorized-sections","name":"Categorized Sections FAQ","title":"FAQ Categorized Sections","category":"Faq","categorySlug":"faq","description":"An organized FAQ layout with multiple category sections, each containing its own accordion group. Categories are displayed vertically with clear section headings. Ideal for comprehensive FAQ pages covering different topics like General, Billing, and Support in distinct sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289173/d97gbjgrs23swf979ao0ob2t7bxq/cleanshot-2026-01-29-at-14-57-04.png","mobile":"https://cdn.ing/assets/i/r/289171/0pjedqt6kjmi8k4wjik9r3l2it1s/blocks-faq-categorized-sections-mobile.png"},"componentPath":"blocks/faq/faq-categorized-sections.tsx","code":"import { FaqCategorizedSections } from \"@opensite/ui/blocks/faq/faq-categorized-sections\";\n\nexport default function Demo() {\n  return (\n    <FaqCategorizedSections\n      heading=\"Help Center\"\n      description=\"Browse questions organized by category to find exactly what you need.\"\n      categories={[\n        {\n          title: \"Account & Billing\",\n          items: [\n            {\n              id: \"payment-methods\",\n              question: \"What payment methods do you accept?\",\n              answer:\n                \"We accept all major credit cards (Visa, Mastercard, American Express, Discover), PayPal, and wire transfers for Enterprise plans. All payments are processed securely.\",\n            },\n            {\n              id: \"invoices\",\n              question: \"How do I access my invoices?\",\n              answer:\n                \"View and download all invoices from your account settings under the Billing section. Invoices are also emailed automatically after each payment.\",\n            },\n          ],\n        },\n        {\n          title: \"Features & Functionality\",\n          items: [\n            {\n              id: \"api-access\",\n              question: \"Is API access available?\",\n              answer:\n                \"Yes, all plans include API access with rate limits based on your plan tier. Full API documentation is available in our developer portal.\",\n            },\n            {\n              id: \"templates\",\n              question: \"Can I create custom templates?\",\n              answer:\n                \"Professional and Enterprise plans allow you to create unlimited custom templates for projects, tasks, and reports. Save time with reusable workflows.\",\n            },\n          ],\n        },\n        {\n          title: \"Security & Privacy\",\n          items: [\n            {\n              id: \"data-encryption\",\n              question: \"Is my data encrypted?\",\n              answer:\n                \"Yes, all data is encrypted in transit (TLS 1.3) and at rest (AES-256). We also support customer-managed encryption keys for Enterprise customers.\",\n            },\n            {\n              id: \"compliance\",\n              question: \"What compliance certifications do you have?\",\n              answer:\n                \"We are SOC 2 Type II certified and compliant with GDPR, CCPA, HIPAA, and ISO 27001 standards. Compliance documentation is available upon request.\",\n            },\n          ],\n        },\n      ]}\n      background=\"gray\"\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},"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},"categoriesWrapperClassName":{"type":"string","description":"Additional CSS classes for the categories wrapper","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","sections","organized","comprehensive","topics"],"performance":{},"importantUsageNotes":"Organize questions into 2-4 'categories', each with a 'title' and 2-4 'items'. Each item requires a unique 'id', a 'question', and an 'answer'. Lock the number of categories to what the content genuinely supports — do not invent extra categories. Follow the example props closely for this block."},{"id":"faq-muted-cards","name":"Muted Background Cards FAQ","title":"FAQ Muted Cards","category":"Faq","categorySlug":"faq","description":"A bold FAQ section with accordion items displayed as muted background cards. Each question expands within its own card container, creating clear visual separation between items. The muted styling provides a softer, more approachable appearance. Great for modern, minimalist designs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293129/evfoaxa0kvu4qgdpgyu94pa1geks/cleanshot-2026-03-04-at-04-16-59.png","mobile":"https://cdn.ing/assets/i/r/293128/ee56o81txzdjzhbjnorf0k0vbles/cleanshot-2026-03-04-at-04-17-15.png"},"componentPath":"blocks/faq/faq-muted-cards.tsx","code":"import { FaqMutedCards } from \"@opensite/ui/blocks/faq/faq-muted-cards\";\n\nexport default function Demo() {\n  return (\n    <FaqMutedCards\n      heading=\"Questions & Answers\"\n      description=\"Find answers to common questions about our platform, features, and pricing.\"\n      items={[\n        {\n          id: \"storage\",\n          question: \"How much storage do I get?\",\n          answer:\n            \"Starter plans include 10GB, Professional plans include 100GB, and Enterprise plans offer unlimited storage. All plans support file uploads up to 2GB per file.\",\n        },\n        {\n          id: \"users\",\n          question: \"Can I add more users later?\",\n          answer:\n            \"Yes, you can add users at any time. Additional users are billed on a prorated basis for the remainder of your billing cycle.\",\n        },\n        {\n          id: \"sso\",\n          question: \"Do you support single sign-on?\",\n          answer:\n            \"SSO with SAML 2.0 is available on Professional and Enterprise plans. We support Google, Microsoft, Okta, OneLogin, and custom identity providers.\",\n        },\n        {\n          id: \"backups\",\n          question: \"Are backups included?\",\n          answer:\n            \"Yes, we automatically backup all data every 6 hours with 30-day retention. Enterprise plans get 90-day retention and on-demand backups.\",\n        },\n        {\n          id: \"api-limits\",\n          question: \"What are the API rate limits?\",\n          answer:\n            \"Starter: 1,000 requests/hour, Professional: 10,000 requests/hour, Enterprise: custom limits. Rate limits reset every hour.\",\n        },\n        {\n          id: \"webhooks\",\n          question: \"Do you support webhooks?\",\n          answer:\n            \"Yes, webhooks are available on all plans. Set up real-time notifications for events like new projects, task updates, comments, and more.\",\n        },\n      ]}\n      background=\"secondary\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","cards","muted","modern","minimal","soft"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this accordion-inside-cards layout. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."},{"id":"faq-bordered-badge","name":"Bordered Badge FAQ","title":"FAQ Bordered Badge","category":"Faq","categorySlug":"faq","description":"A centered FAQ section featuring a badge with help icon, prominent heading, description, and bordered accordion cards. The icon-enhanced badge adds visual interest while bordered cards create clear item separation. Ideal for help centers or knowledge base pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289177/uyirq3o9r5mjw9mduv4efn0sa3wp/blocks-faq-bordered-badge-desktop.png","mobile":"https://cdn.ing/assets/i/r/289176/erqjhw6rakrzesto8b728j3xcla2/blocks-faq-bordered-badge-mobile.png"},"componentPath":"blocks/faq/faq-bordered-badge.tsx","code":"import { FaqBorderedBadge } from \"@opensite/ui/blocks/faq/faq-bordered-badge\";\n\nexport default function Demo() {\n  return (\n    <FaqBorderedBadge\n      badge=\"FAQ\"\n      badgeIcon=\"lucide/help-circle\"\n      heading=\"Everything You Need to Know\"\n      description=\"Get answers to common questions about features, pricing, and platform capabilities.\"\n      items={[\n        {\n          id: \"migration\",\n          question: \"Do you help with migration from other platforms?\",\n          answer:\n            \"Yes, we provide free migration assistance on Professional and Enterprise plans. Our team will help you import data, set up workflows, and train your team.\",\n        },\n        {\n          id: \"languages\",\n          question: \"What languages are supported?\",\n          answer:\n            \"The platform is available in English, Spanish, French, German, Portuguese, Japanese, and Chinese. More languages are added regularly based on demand.\",\n        },\n        {\n          id: \"reporting\",\n          question: \"Can I create custom reports?\",\n          answer:\n            \"Professional and Enterprise plans include custom report builders with drag-and-drop fields, filters, and visualizations. Schedule automated reports via email.\",\n        },\n        {\n          id: \"collaboration\",\n          question: \"How does guest access work?\",\n          answer:\n            \"Invite external collaborators as guests with limited permissions. Guests can access specific projects but can't see team data or billing information.\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"accordionWrapperClassName":{"type":"string","description":"Additional CSS classes for the accordion wrapper","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","badge","icon","bordered","cards","help-center","knowledge-base"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this bordered accordion layout with badge header. Each item requires a unique 'id', a 'question', and an 'answer'. Supply a short 'badge' label and a valid 'badgeIcon' lucide icon name. Follow the example props closely for this 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."},{"id":"faq-sidebar-navigation","name":"Sidebar Navigation FAQ","title":"FAQ Sidebar Navigation","category":"Faq","categorySlug":"faq","description":"An interactive FAQ layout with a sticky sidebar navigation for category filtering. Clicking a category smoothly scrolls to that section while highlighting the active category in the sidebar. Ideal for extensive FAQ pages with many categories where quick navigation is essential.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289185/mb4mh8wawy3qi5s5gexhghjw3g6v/cleanshot-2026-01-29-at-15-12-39.png","mobile":"https://cdn.ing/assets/i/r/289183/8xore7yfz3m03ns5w3e7p1var114/blocks-faq-sidebar-navigation-mobile.png"},"componentPath":"blocks/faq/faq-sidebar-navigation.tsx","code":"import { FaqSidebarNavigation } from \"@opensite/ui/blocks/faq/faq-sidebar-navigation\";\n\nexport default function Demo() {\n  return (\n    <FaqSidebarNavigation\n      heading=\"Knowledge Base\"\n      description=\"Navigate through our comprehensive FAQ sections using the sidebar menu.\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.5}\n      background=\"gray\"\n      categories={[\n        {\n          id: \"getting-started\",\n          title: \"Getting Started\",\n          items: [\n            {\n              id: \"signup\",\n              question: \"How do I create an account?\",\n              answer:\n                \"Click 'Sign Up' in the top right corner, enter your details, and verify your email. You can also sign up using Google, Microsoft, or GitHub single sign-on.\",\n            },\n            {\n              id: \"first-project\",\n              question: \"How do I create my first project?\",\n              answer:\n                \"After logging in, click '+ New Project', choose a template or start from scratch, name your project, and invite team members. You'll be guided through setup.\",\n            },\n          ],\n        },\n        {\n          id: \"account-management\",\n          title: \"Account Management\",\n          items: [\n            {\n              id: \"profile\",\n              question: \"How do I update my profile?\",\n              answer:\n                \"Go to Settings > Profile. Update your name, photo, email, timezone, and notification preferences. Changes are saved automatically.\",\n            },\n            {\n              id: \"delete-account\",\n              question: \"Can I delete my account?\",\n              answer:\n                \"Yes, go to Settings > Account > Delete Account. You'll be asked to confirm, and all your data will be permanently deleted within 30 days.\",\n            },\n          ],\n        },\n        {\n          id: \"collaboration\",\n          title: \"Team Collaboration\",\n          items: [\n            {\n              id: \"mentions\",\n              question: \"How do mentions work?\",\n              answer:\n                \"Type @ followed by a team member's name in comments or descriptions. They'll receive a notification and can respond directly in context.\",\n            },\n            {\n              id: \"sharing\",\n              question: \"How do I share projects externally?\",\n              answer:\n                \"Click Share on any project, generate a public link, or invite specific guests via email. Control whether guests can view only or also comment.\",\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},"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},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"navClassName":{"type":"string","description":"Additional CSS classes for the navigation","required":false},"navButtonClassName":{"type":"string","description":"Additional CSS classes for navigation buttons","required":false},"navButtonActiveClassName":{"type":"string","description":"Additional CSS classes for active navigation button","required":false},"categoriesWrapperClassName":{"type":"string","description":"Additional CSS classes for the categories wrapper","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","sidebar","navigation","categories","sticky","interactive","scroll"],"performance":{},"importantUsageNotes":"Organize questions into 3-5 'categories' since the sidebar renders one navigation button per category. Each category requires a unique 'id', a 'title', and 2-4 'items'. Each item requires a unique 'id', a 'question', and an 'answer'. Lock the category count to what the content genuinely supports — the sidebar navigation becomes cluttered beyond 5 categories. Follow the example props closely for this block."},{"id":"faq-card-categories","name":"Card-Based Categorized FAQ","title":"FAQ Card Categories","category":"Faq","categorySlug":"faq","description":"A categorized FAQ layout with each category displayed in its own card container, arranged in a responsive grid. Features a subtle plus-pattern background for visual texture. Each card has a header and accordion content. Great for visually separating different FAQ topics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289188/ncm5rtqzvjuuouzt6g0jb5mfbkk2/cleanshot-2026-01-29-at-15-14-42.png","mobile":"https://cdn.ing/assets/i/r/289186/6nmr2mhyq2kjkuttftkmyhny95uj/blocks-faq-card-categories-mobile.png"},"componentPath":"blocks/faq/faq-card-categories.tsx","code":"import { FaqCardCategories } from \"@opensite/ui/blocks/faq/faq-card-categories\";\n\nexport default function Demo() {\n  return (\n    <FaqCardCategories\n      heading=\"Explore Topics\"\n      description=\"Select a topic to view related questions and answers.\"\n      categories={[\n        {\n          title: \"Pricing & Plans\",\n          items: [\n            {\n              id: \"free-plan\",\n              question: \"Do you offer a free plan?\",\n              answer:\n                \"We offer a 14-day free trial with full access to Professional features. After the trial, choose from our Starter, Professional, or Enterprise plans.\",\n            },\n            {\n              id: \"enterprise-pricing\",\n              question: \"How is Enterprise pricing determined?\",\n              answer:\n                \"Enterprise pricing is customized based on your team size, feature requirements, and support needs. Contact our sales team for a personalized quote.\",\n            },\n          ],\n        },\n        {\n          title: \"Technical Details\",\n          items: [\n            {\n              id: \"browser-support\",\n              question: \"Which browsers are supported?\",\n              answer:\n                \"We support the latest versions of Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported. Mobile browsers on iOS and Android are fully supported.\",\n            },\n            {\n              id: \"offline-mode\",\n              question: \"Does offline mode work?\",\n              answer:\n                \"Yes, our mobile apps support offline mode. View and edit content without internet, and changes sync automatically when you reconnect.\",\n            },\n          ],\n        },\n        {\n          title: \"Data & Privacy\",\n          items: [\n            {\n              id: \"data-location\",\n              question: \"Where is my data stored?\",\n              answer:\n                \"Data is stored in secure AWS data centers. You can choose your preferred region (US, EU, or Asia-Pacific) to comply with data residency requirements.\",\n            },\n            {\n              id: \"data-deletion\",\n              question: \"What happens to my data if I cancel?\",\n              answer:\n                \"Your data is retained for 30 days after cancellation. During this period, you can reactivate your account or export your data. After 30 days, data is permanently deleted.\",\n            },\n          ],\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTop\"\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 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 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},"cardClassName":{"type":"string","description":"Additional CSS classes for category cards","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","cards","categories","grid","pattern","organized","visual"],"performance":{},"importantUsageNotes":"Organize questions into multiples of 3 categories (ideally 3 or 6) since the layout is a 3-column desktop grid. 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."},{"id":"faq-icon-benefits","name":"Icon Benefits Grid","title":"FAQ Icon Benefits","category":"Faq","categorySlug":"faq","description":"A benefits-focused section displaying feature cards with icons in a responsive grid. Each card features a circular icon container, title, and description. While not a traditional FAQ, it answers 'why choose us' questions through benefit highlights. Ideal for feature showcases or value propositions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293127/cs4nbl3n7h2g751a1d842q551zlg/cleanshot-2026-03-04-at-04-15-42.png","mobile":"https://cdn.ing/assets/i/r/293126/ol9en6sa5jn1j0ghckiu1dq8otb9/cleanshot-2026-03-04-at-04-15-57.png"},"componentPath":"blocks/faq/faq-icon-benefits.tsx","code":"import { FaqIconBenefits } from \"@opensite/ui/blocks/faq/faq-icon-benefits\";\n\nexport default function Demo() {\n  return (\n    <FaqIconBenefits\n      heading=\"Why Choose Our Platform\"\n      description=\"Discover the benefits that set us apart from the competition.\"\n      benefits={[\n        {\n          icon: \"lucide/zap\",\n          title: \"Lightning Fast\",\n          description:\n            \"Optimized performance with sub-100ms response times globally. Work faster with instant updates and real-time sync across all devices.\",\n        },\n        {\n          icon: \"lucide/shield-check\",\n          title: \"Enterprise Security\",\n          description:\n            \"Bank-level encryption, SOC 2 Type II certification, and compliance with GDPR, HIPAA, and ISO 27001 standards. Your data is always protected.\",\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Built for Teams\",\n          description:\n            \"Intuitive collaboration tools including comments, mentions, file sharing, and real-time editing. Keep everyone aligned and productive.\",\n        },\n        {\n          icon: \"lucide/layout-dashboard\",\n          title: \"Customizable Workflows\",\n          description:\n            \"Adapt the platform to your unique processes with custom fields, templates, automations, and integrations. Make it work your way.\",\n        },\n        {\n          icon: \"lucide/headphones\",\n          title: \"24/7 Support\",\n          description:\n            \"Get help when you need it with round-the-clock email support, live chat, and comprehensive documentation. Premium support for paid plans.\",\n        },\n        {\n          icon: \"lucide/trending-up\",\n          title: \"Scalable Solution\",\n          description:\n            \"Start small and grow big. Our infrastructure scales automatically to handle teams of 5 or 5,000 without performance degradation.\",\n        },\n      ]}\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.25}\n      background=\"secondary\"\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},"benefits":{"type":"array","description":"Array of benefit items","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"","required":true},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqBenefit"},"typeLabel":"FaqBenefit[]","required":false},"benefitsSlot":{"type":"object","description":"Custom slot for rendering benefits (overrides benefits 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},"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 benefits grid","required":false},"benefitCardClassName":{"type":"string","description":"Additional CSS classes for benefit cards","required":false},"iconWrapperClassName":{"type":"string","description":"Additional CSS classes for benefit icons wrapper","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for benefit icons","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for benefit titles","required":false},"benefitDescriptionClassName":{"type":"string","description":"Additional CSS classes for benefit descriptions","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","benefits","features","icons","grid","cards","why-choose-us","value-proposition","showcase"],"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."},{"id":"faq-rounded-cards","name":"Rounded Cards FAQ","title":"FAQ Rounded Cards","category":"Faq","categorySlug":"faq","description":"A polished FAQ section with accordion items displayed as rounded cards within a muted container. The rounded styling and layered card design create a modern, friendly appearance. The container provides visual grouping while individual cards maintain clear separation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293135/l8tgm2l9g4g0dbwulnyoqp8emntc/cleanshot-2026-03-04-at-04-22-21.png","mobile":"https://cdn.ing/assets/i/r/293134/hk8dc8ljq2f3auvuab5g183u3gqy/cleanshot-2026-03-04-at-04-21-44.png"},"componentPath":"blocks/faq/faq-rounded-cards.tsx","code":"import { FaqRoundedCards } from \"@opensite/ui/blocks/faq/faq-rounded-cards\";\n\nexport default function Demo() {\n  return (\n    <FaqRoundedCards\n      heading=\"Quick Answers\"\n      description=\"Get instant answers to the most frequently asked questions about our platform.\"\n      items={[\n        {\n          id: \"training\",\n          question: \"Do you provide training for new users?\",\n          answer:\n            \"Yes, we offer live onboarding sessions, video tutorials, interactive guides, and comprehensive documentation. Enterprise customers get dedicated training sessions.\",\n        },\n        {\n          id: \"mobile-features\",\n          question: \"Are all features available on mobile?\",\n          answer:\n            \"Yes, our mobile apps have full feature parity with the web version. Create, edit, and manage everything from your smartphone or tablet.\",\n        },\n        {\n          id: \"bulk-actions\",\n          question: \"Can I perform bulk operations?\",\n          answer:\n            \"Absolutely. Select multiple items and perform batch operations like assign, move, delete, export, or update custom fields. Saves hours of manual work.\",\n        },\n        {\n          id: \"time-tracking\",\n          question: \"Is time tracking built-in?\",\n          answer:\n            \"Yes, track time on tasks with built-in timers, manual entries, and timesheet views. Generate detailed reports and export for billing or payroll.\",\n        },\n        {\n          id: \"file-versioning\",\n          question: \"Do you keep file version history?\",\n          answer:\n            \"Yes, we automatically save versions of all uploaded files. View, restore, or compare previous versions anytime. 30-day history on all plans.\",\n        },\n        {\n          id: \"calendar-sync\",\n          question: \"Can I sync with my calendar?\",\n          answer:\n            \"Yes, sync with Google Calendar, Outlook, and Apple Calendar. View tasks and deadlines alongside your meetings and appointments.\",\n        },\n      ]}\n      pattern=\"dashedGridFadeCenter\"\n      patternOpacity={0.25}\n      background=\"dark\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items 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},"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},"cardsWrapperClassName":{"type":"string","description":"Additional CSS classes for the cards wrapper","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","cards","rounded","modern","friendly","polished","container"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for this rounded card accordion layout. Each item requires a unique 'id', a 'question', and an 'answer'. Follow the example props closely for this block."},{"id":"faq-profile-sidebar","name":"Profile Sidebar FAQ","title":"FAQ Profile Sidebar","category":"Faq","categorySlug":"faq","description":"A two-column FAQ layout with a sticky sidebar featuring a support representative profile, contact information, and CTA button. The personal touch of showing a team member builds trust while providing easy access to support. Perfect for customer-focused businesses wanting to humanize their help section.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293133/1cjzp0z4z3659fq5n7yzrlwaqske/cleanshot-2026-03-04-at-04-19-47.png","mobile":"https://cdn.ing/assets/i/r/293132/nwa22dz2cgd3i8j7zrmhqrdene1c/cleanshot-2026-03-04-at-04-20-11.png"},"componentPath":"blocks/faq/faq-profile-sidebar.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FaqProfileSidebar } from \"@opensite/ui/blocks/faq/faq-profile-sidebar\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FaqProfileSidebar\n      heading=\"Expert Answers\"\n      description=\"Our team of experts has compiled answers to the most frequently asked questions to help you get the most out of our platform.\"\n      items={[\n        {\n          id: \"implementation\",\n          question: \"How long does implementation take?\",\n          answer:\n            \"Most teams are up and running within a week. Our onboarding specialists guide you through setup, data migration, and team training to ensure a smooth transition.\",\n        },\n        {\n          id: \"scalability\",\n          question: \"Can the platform scale with my business?\",\n          answer:\n            \"Absolutely. Our infrastructure is built to scale from startups to enterprises. Automatic scaling handles traffic spikes, and you can add unlimited users and storage.\",\n        },\n        {\n          id: \"custom-dev\",\n          question: \"Do you offer custom development?\",\n          answer:\n            \"Yes, Enterprise customers can request custom features, integrations, and workflows. Our professional services team works with you to build tailored solutions.\",\n        },\n        {\n          id: \"sla\",\n          question: \"What are your SLA guarantees?\",\n          answer:\n            \"We guarantee 99.9% uptime with redundant infrastructure. Enterprise plans include priority support with 1-hour response times and dedicated account management.\",\n        },\n        {\n          id: \"security\",\n          question: \"How do you ensure data security?\",\n          answer:\n            \"We follow industry best practices for security, including encryption at rest and in transit, regular security audits, and compliance with GDPR and SOC 2 standards.\",\n        },\n        {\n          id: \"integrations\",\n          question: \"What integrations are available?\",\n          answer:\n            \"Our platform integrates with popular tools like Slack, Salesforce, and Google Workspace. We also offer an open API for custom integrations.\",\n        },\n        {\n          id: \"mobile\",\n          question: \"Is there a mobile app?\",\n          answer:\n            \"Yes, our mobile app is available on iOS and Android, allowing you to access your data and collaborate with your team on the go.\",\n        },\n      ]}\n      profileImage={imagePlaceholders[18]}\n      profileName=\"Sarah Chen\"\n      profileRole=\"Customer Success Manager\"\n      profileDescription=\"With over 8 years of experience helping teams maximize their productivity, I'm here to ensure you get the most value from our platform.\"\n      contactText=\"Have a question not covered here?\"\n      contactAction={{\n        label: \"Schedule a Call\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      pattern=\"architect\"\n      patternOpacity={0.1}\n      background=\"gray\"\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},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"profileSlot":{"type":"object","description":"Custom slot for rendering the profile section","typeLabel":"React.ReactNode","required":false},"profileImage":{"type":"string","description":"Profile image URL","required":false},"profileName":{"type":"object","description":"Profile name","typeLabel":"React.ReactNode","required":false},"profileRole":{"type":"object","description":"Profile role/title","typeLabel":"React.ReactNode","required":false},"profileDescription":{"type":"object","description":"Profile description text","typeLabel":"React.ReactNode","required":false},"contactText":{"type":"object","description":"Contact section text","typeLabel":"React.ReactNode","required":false},"contactAction":{"type":"object","description":"Contact action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","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 wrapper","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"profileCardClassName":{"type":"string","description":"Additional CSS classes for the profile card","required":false},"profileImageClassName":{"type":"string","description":"Additional CSS classes for the profile image","required":false},"profileNameClassName":{"type":"string","description":"Additional CSS classes for the profile name","required":false},"profileRoleClassName":{"type":"string","description":"Additional CSS classes for the profile role","required":false},"profileDescriptionClassName":{"type":"string","description":"Additional CSS classes for the profile description","required":false},"contactSectionClassName":{"type":"string","description":"Additional CSS classes for the contact section","required":false},"faqColumnClassName":{"type":"string","description":"Additional CSS classes for the FAQ column","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},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","questions","answers","accordion","sidebar","profile","support","contact","personal","trust","human"],"performance":{},"importantUsageNotes":"Use between 4-8 'items' for the accordion column. Each item requires a unique 'id', a 'question', and an 'answer'. Only use a real author profile — supply a verified 'profileImage' URL from the media library, a real 'profileName', and a real 'profileRole' or bio; do not fabricate. Always supply 'contactText' and 'contactAction' pointing to a real contact or booking page — use a variant of 'default' for 'contactAction'. DO NOT USE this block if you don't have a real person profile (image, name, role). Follow the example props closely for this block."},{"id":"faq-split-hero","name":"FAQ Split Hero","title":"FAQ Split Hero","category":"Faq","categorySlug":"faq","description":"A full-width split-screen FAQ section with animated accordion on one side and image or video media on the other. Supports configurable layout direction for desktop (media left/right) and mobile stacking order (media top/bottom), pattern background overlays with adjustable opacity, section background theming, image optimization via OptixFlow, and extensive className overrides for every sub-element. Media supports both images and videos with a slot escape hatch for fully custom rendering. Best for landing pages, product pages, and service pages requiring prominent FAQ visibility.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289196/xk66t2zn1us5qilsefy3mvtsetc6/blocks-faq-split-hero-desktop.png","mobile":"https://cdn.ing/assets/i/r/289195/bvjdqx7m8k6ppvpo1fqldpojdt3f/blocks-faq-split-hero-mobile.png"},"componentPath":"blocks/faq/faq-split-hero.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FaqSplitHero } from \"@opensite/ui/blocks/faq/faq-split-hero\";\n\nexport default function Demo() {\n  return (\n    <FaqSplitHero\n      heading=\"Common Questions\"\n      subheading=\"Everything you need to know about our platform, features, and pricing.\"\n      items={[\n        {\n          id: \"demo\",\n          question: \"Can I schedule a demo?\",\n          answer:\n            \"Yes, we offer personalized demos for teams of 5 or more. Our product specialists will walk you through features, answer questions, and show you how to maximize value for your use case.\",\n        },\n        {\n          id: \"trial-limits\",\n          question: \"Are there any limitations on the free trial?\",\n          answer:\n            \"The 14-day trial includes full access to Professional plan features with no user limits. The only restriction is that trial data is deleted if you don't upgrade within 30 days.\",\n        },\n        {\n          id: \"switching\",\n          question: \"How easy is it to switch from competitors?\",\n          answer:\n            \"We make switching easy with automated data import tools, migration guides, and dedicated onboarding support. Most teams complete the switch in under a week with zero data loss.\",\n        },\n        {\n          id: \"updates\",\n          question: \"How often do you release updates?\",\n          answer:\n            \"We ship new features and improvements every two weeks. Security patches and bug fixes are deployed immediately. All updates are seamless with no downtime or manual upgrades required.\",\n        },\n      ]}\n      mediaItem={{\n        video: {\n          // masterPlaylistUrl:\n          //   \"https://octane.cdn.ing/api/v1/video/b268d45d-175a-5c42-bb0d-207c38f384e2/master_playlist\",\n          // src: \"https://toastability-production.s3.amazonaws.com/c654ma8l6buzf82lngt5yq2fxoao\",\n          masterPlaylistUrl:\n            \"https://octane.cdn.ing/api/v1/video/5ae48b81-2a69-5108-aeaa-4fa947f8d48d/master_playlist\",\n          fallbackSrc:\n            \"https://octane.cdn.ing/api/v1/video/5ae48b81-2a69-5108-aeaa-4fa947f8d48d/progressive.mp4\",\n          autoPlay: true,\n          loop: true,\n          muted: true,\n          playsInline: true,\n          controls: false,\n        },\n      }}\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.09}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items","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":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"mediaItem":{"type":"object","description":"Media item configuration for image and/or video rendering.","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"mediaSlot":{"type":"object","description":"Custom slot for rendering the media section (overrides mediaItem)","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.\nDefaults to \"none\" since this block manages its own internal spacing.","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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","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},"subheadingClassName":{"type":"string","description":"Additional CSS classes for the subheading","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},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["faq","split","hero","accordion","animated","landing","questions","full-width","split-screen","image","video","media","responsive","layout-direction","pattern-background","customizable","two-column"],"performance":{},"importantUsageNotes":"Use between 4-6 'items' for this split hero accordion layout; the accordion shares the viewport with a media panel so keep the list concise. Each item requires a unique 'id', a 'question', and an 'answer'. Always supply a 'mediaItem' with a real image or video — DO NOT USE this block if you don't have a valid media asset. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:12:11.597Z"}