87 lines
3.4 KiB
JSON
87 lines
3.4 KiB
JSON
{
|
|
"name": "ContactFaq",
|
|
"description": "Split-panel contact section with CTA card on left and FAQ accordions on right.",
|
|
"details": "Use for combining contact CTA with frequently asked questions. Layout: Left Panel (4 cols) - Icon → Title → Description → CTA Button. Right Panel (8 cols) - FAQ Accordions. CTA panel uses card styling with centered content and primary-button icon container. FAQ accordions support both smooth and instant animation types. Best for sales/support pages requiring both contact options and common questions. Grid-based layout (12-column system) for responsive behavior.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"ctaTitle": {
|
|
"required": true,
|
|
"example": "Book an intro call",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"ctaDescription": {
|
|
"required": true,
|
|
"example": "Let's get started with a brief intro call.",
|
|
"minChars": 5,
|
|
"maxChars": 100
|
|
}
|
|
},
|
|
"faqRules": {
|
|
"id": {
|
|
"required": true,
|
|
"example": "1",
|
|
"minChars": 1,
|
|
"maxChars": 20
|
|
},
|
|
"title": {
|
|
"required": true,
|
|
"example": "What's included in the subscription?",
|
|
"minChars": 5,
|
|
"maxChars": 100
|
|
},
|
|
"content": {
|
|
"required": true,
|
|
"example": "Your subscription covers end-to-end digital design services...",
|
|
"minChars": 10,
|
|
"maxChars": 500,
|
|
"note": "Supports HTML content"
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"faqs": "Array<{ id: string, title: string, content: string }>",
|
|
"ctaTitle": "string",
|
|
"ctaDescription": "string",
|
|
"ctaButton": "{text: string, onClick?: () => void, href?: string}",
|
|
"ctaIcon": "LucideIcon (required)",
|
|
"useInvertedBackground": "boolean",
|
|
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect on panels)",
|
|
"accordionAnimationType?": "'smooth' | 'instant' (default: 'smooth')",
|
|
"showCard?": "boolean (default: true - controls accordion card styling)",
|
|
"ariaLabel?": "string (default: 'Contact and FAQ section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"ctaPanelClassName?": "string",
|
|
"ctaIconClassName?": "string",
|
|
"ctaTitleClassName?": "string",
|
|
"ctaDescriptionClassName?": "string",
|
|
"ctaButtonClassName?": "string",
|
|
"ctaButtonTextClassName?": "string",
|
|
"faqsPanelClassName?": "string",
|
|
"faqsContainerClassName?": "string",
|
|
"accordionClassName?": "string",
|
|
"accordionTitleClassName?": "string",
|
|
"accordionIconContainerClassName?": "string",
|
|
"accordionIconClassName?": "string",
|
|
"accordionContentClassName?": "string",
|
|
"separatorClassName?": "string"
|
|
},
|
|
"usageExample": "<ContactFaq faqs={[{ id: '1', title: \"What's included?\", content: 'Your subscription covers...' }]} ctaTitle=\"Book an intro call\" ctaDescription=\"Let's get started with a brief intro call.\" ctaButton={{ text: 'Book a Free Call', href: '#contact' }} ctaIcon={Phone} useInvertedBackground={false} animationType=\"slide-up\" />",
|
|
"do": [
|
|
"Use for contact pages",
|
|
"Use for lead generation",
|
|
"Use for help pages",
|
|
"Use for support sections",
|
|
"Requires faqs[]"
|
|
],
|
|
"dont": [
|
|
"Do not use more than 4 items"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|