diff --git a/registry/components/TestimonialCardSixteen.json b/registry/components/TestimonialCardSixteen.json new file mode 100644 index 0000000..2890767 --- /dev/null +++ b/registry/components/TestimonialCardSixteen.json @@ -0,0 +1,109 @@ +{ + "name": "TestimonialCardSixteen", + "description": "Uniform grid testimonial cards with image, star rating overlay, and KPI stats section below.", + "details": "Use for showcasing multiple testimonials with a stats/KPI summary. Layout: TextBox Header → Uniform Grid of Testimonial Cards → KPI Stats Bar. Each card displays a full-bleed image with a glassmorphic overlay containing star rating, name, role, and company. Fixed 'uniform-all-items-equal' grid layout. Below the grid, a responsive KPI section shows 3 stats with value and label, separated by dividers (horizontal on mobile, vertical on desktop). Best for client testimonials with credibility metrics.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "What Our Clients Say", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Hear from those who've experienced our work", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Testimonials", + "minChars": 2, + "maxChars": 30 + } + }, + "testimonialRules": { + "minItems": 1, + "maxItems": 4, + "recommendedItems": "3", + "structure": { + "id": "string - Unique identifier (required)", + "name": "string - Client name (required)", + "role": "string - Client role/position (required)", + "company": "string - Client company (required)", + "rating": "number - Star rating 0-5 (required)", + "imageSrc?": "string - Path to client image", + "videoSrc?": "string - Path to client video", + "imageAlt?": "string - Alt text for image", + "videoAriaLabel?": "string - Aria label for video" + } + }, + "kpiRules": { + "kpiItems": { + "required": true, + "fixedCount": 3, + "note": "Exactly 3 KPI items required" + }, + "kpiItemStructure": { + "value": "string - The stat value (e.g., '180+', '96%', '15+') (required)", + "label": "string - Description of the stat (required)" + } + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", + "kpiItems": "[KpiItem, KpiItem, KpiItem] - Exactly 3 KPI stats (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)", + "title": "string (required)", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string (required)", + "tag?": "string", + "tagIcon?": "LucideIcon", + "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "boolean (required)", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", + "ariaLabel?": "string (default: 'Testimonials section')", + "className?": "string", + "containerClassName?": "string", + "cardClassName?": "string", + "imageClassName?": "string", + "overlayClassName?": "string", + "ratingClassName?": "string", + "nameClassName?": "string", + "roleClassName?": "string", + "companyClassName?": "string", + "gridClassName?": "string", + "carouselClassName?": "string", + "controlsClassName?": "string", + "textBoxClassName?": "string", + "textBoxTitleClassName?": "string", + "textBoxTitleImageWrapperClassName?": "string", + "textBoxTitleImageClassName?": "string", + "textBoxDescriptionClassName?": "string", + "textBoxTagClassName?": "string", + "textBoxButtonContainerClassName?": "string", + "textBoxButtonClassName?": "string", + "textBoxButtonTextClassName?": "string" + }, + "usageExample": "", + "do": [ + "Use for testimonial sections with visual emphasis on people", + "Include exactly 3 KPI items for the bottom section", + "Use high-quality portrait images", + "Supports 3D animations" + ], + "dont": [ + "Do not use without KPI items", + "Do not use without portrait images" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +}