{ "name": "TeamCardSix", "description": "Team member card with full-bleed image background and blurred gradient overlay with name and role text at bottom.", "constraints": { "textRules": { "title": { "required": true, "example": "Meet Our Team", "minChars": 2, "maxChars": 50 }, "description": { "required": true, "example": "The talented people behind our success", "minChars": 5, "maxChars": 250 }, "tag": { "required": false, "example": "Team", "minChars": 2, "maxChars": 30 } }, "teamMemberRules": { "id": { "required": true, "example": "1", "minChars": 1, "maxChars": 20 }, "name": { "required": true, "example": "Sarah Johnson", "minChars": 2, "maxChars": 50, "note": "Team member name displayed at 2xl font-medium with truncate in blurred overlay" }, "role": { "required": true, "example": "CEO & Founder", "minChars": 2, "maxChars": 50, "note": "Role/title displayed at base size with truncate in blurred overlay" }, "imageSrc": { "required": true, "example": "/team/sarah.jpg", "note": "Image path for team member photo (full-bleed with rounded-theme-capped)" }, "imageAlt": { "required": false, "example": "Portrait of Sarah Johnson", "note": "Alt text for image (defaults to member name if not provided)" } } }, "propsSchema": { "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required - determines grid layout or carousel trigger)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)", "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}>", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "'noInvert' | 'invertDefault'", "ariaLabel?": "string (default: 'Team section')", "className?": "string" }, "usageExample": "", "do": [ "Use for about pages", "Use for company information", "Use for team pages", "Use for staff directories", "Requires members[]", "Requires titleSegments?[]", "Requires buttons?[]" ], "dont": [], "editRules": { "textOnly": true, "layoutLocked": true, "styleLocked": true } }