{ "name": "SplitAbout", "description": "Split-layout about section with bullet points on one side and image/video on the other.", "constraints": { "textRules": { "title": { "required": true, "example": "About Us", "minChars": 2, "maxChars": 50 }, "description": { "required": true, "example": "Learn more about our mission, values, and what drives us forward", "minChars": 5, "maxChars": 300 }, "tag": { "required": false, "example": "Our Story", "minChars": 2, "maxChars": 30 } }, "buttonRules": { "maxButtons": 2, "structure": { "text": "string - Button label (required)", "href": "string - Link destination (optional)", "onClick": "() => void - Click handler (optional)", "props": "Partial - Additional button props (optional)" }, "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level." }, "bulletPointRules": { "structure": { "title": "string - Bullet point heading (required)", "description": "string - Bullet point text (required)", "icon": "LucideIcon - Optional icon displayed above title" }, "note": "Bullet points are separated by horizontal dividers. Border radius controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level." }, "mediaRules": { "imageSrc": { "required": false, "example": "/about-image.jpg", "note": "Supports external URLs" }, "videoSrc": { "required": false, "example": "/about-video.mp4", "note": "Takes precedence over imageSrc if both provided" }, "imageAlt": { "required": false, "example": "About us", "note": "Empty string marks image as decorative (aria-hidden)" } } }, "propsSchema": { "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'About section video')", "ariaLabel?": "string (default: 'About section')", "imagePosition?": "'left' | 'right' (default: 'right')", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "'noInvert' | 'invertDefault'", "className?": "string" }, "usageExample": "// Wrap in ThemeProvider\n\n \n", "do": [ "Use for feature showcases", "Use for capability displays", "Use for about pages", "Use for company information", "Requires titleSegments?[]", "Requires buttons?[]", "Requires bulletPoints[]" ], "dont": [], "editRules": { "textOnly": true, "layoutLocked": true, "styleLocked": true } }