diff --git a/registry/components/TestimonialCardFive.json b/registry/components/TestimonialCardFive.json deleted file mode 100644 index 2baaa4f..0000000 --- a/registry/components/TestimonialCardFive.json +++ /dev/null @@ -1,162 +0,0 @@ -{ - "name": "TestimonialCardFive", - "description": "Full-width carousel testimonial section with split card layout showing text content and square image side-by-side.", - "details": "Use for testimonials that need equal emphasis on visual content and testimonial text in a carousel format. Uses FullWidthCarousel layout where TextBox is in content-width but carousel spans full viewport width. Each card uses a 50/50 grid split on desktop (text left, square image right) and stacked on mobile (image on top with flex-col-reverse). Cards auto-advance every 5 seconds with clickable dot navigation below. Card content: Tag → Title (4xl, line-clamp-3) → Quote (lg, line-clamp-10) → Author info (avatar, name with role/company, date) on left; Square aspect-ratio media on right. Text uses p-6 md:p-10 padding with gap-10 vertical spacing. Best for high-quality visual testimonials where image and content deserve equal weight. Carousel items are w-70 with mr-6 spacing.", - "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": 250 - }, - "tag": { - "required": false, - "example": "Testimonials", - "minChars": 2, - "maxChars": 30 - } - }, - "testimonialRules": { - "id": { - "required": true, - "example": "1", - "minChars": 1, - "maxChars": 20 - }, - "name": { - "required": true, - "example": "Alisa Hester, CEO of Ecomflow", - "minChars": 2, - "maxChars": 80, - "note": "Full name including role and company (e.g., 'John Smith, CTO of Tech Corp')" - }, - "date": { - "required": true, - "example": "Date: 28 October 2024", - "minChars": 5, - "maxChars": 50, - "note": "Date string including 'Date:' prefix" - }, - "title": { - "required": true, - "example": "We've got only good things to say!", - "minChars": 5, - "maxChars": 100, - "note": "Testimonial headline shown at 4xl, truncated to 3 lines" - }, - "quote": { - "required": true, - "example": "We have been working with them for over 6 months now, and have been able to scale our business to new heights.", - "minChars": 20, - "maxChars": 500, - "note": "Full testimonial text shown at base/lg size, truncated to 10 lines" - }, - "tag": { - "required": true, - "example": "Standard Line", - "minChars": 2, - "maxChars": 30, - "note": "Category or plan tag displayed at top of card" - }, - "avatarSrc": { - "required": true, - "example": "/client-avatar.jpg", - "note": "Avatar image shown in TestimonialAuthor component (h-11 aspect-square)" - } - }, - "mediaRules": { - "imageSrc": { - "required": false, - "example": "/testimonial-image.jpg", - "note": "Either imageSrc or videoSrc should be provided for optimal display Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc." - }, - "videoSrc": { - "required": false, - "example": "/testimonial-video.mp4", - "note": "Either imageSrc or videoSrc should be provided for optimal display" - }, - "imageAlt": { - "required": false, - "example": "Team collaboration", - "note": "Alt text for testimonial image" - }, - "videoAriaLabel": { - "required": false, - "example": "Client testimonial video", - "note": "ARIA label for testimonial video" - }, - "avatarAlt": { - "required": false, - "example": "Alisa Hester", - "note": "Alt text for avatar image" - } - }, - "itemRules": { - "minItems": 3, - "maxItems": 10, - "recommendedItems": "5-6", - "note": "Works best with 5-6 testimonials. Auto-advances every 5 seconds with loop enabled." - } - }, - "propsSchema": { - "testimonials": "Array<{ id: string, name: string, date: string, title: string, quote: string, tag: string, avatarSrc: string, avatarAlt?: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", - "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", - "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 - 'inline-image' uses titleSegments for rich text with images)", - "useInvertedBackground": "boolean", - "ariaLabel?": "string (default: 'Testimonials section')", - "className?": "string", - "containerClassName?": "string", - "cardClassName?": "string", - "textBoxTitleClassName?": "string", - "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", - "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", - "textBoxDescriptionClassName?": "string", - "cardTagClassName?": "string", - "cardTitleClassName?": "string", - "cardQuoteClassName?": "string", - "cardAuthorClassName?": "string", - "cardAvatarWrapperClassName?": "string", - "cardAvatarClassName?": "string", - "cardNameClassName?": "string", - "cardDateClassName?": "string", - "cardImageClassName?": "string", - "carouselClassName?": "string", - "dotsClassName?": "string", - "textBoxClassName?": "string", - "textBoxTagClassName?": "string", - "textBoxButtonContainerClassName?": "string", - "textBoxButtonClassName?": "string", - "textBoxButtonTextClassName?": "string" - }, - "usageExample": "", - "do": [ - "Use for social proof", - "Use for customer reviews", - "Requires testimonials[]", - "Requires titleSegments?[]", - "Requires buttons?[]" - ], - "dont": [ - "Do not use less than 3 items", - "Do not use more than 10 items" - ], - "editRules": { - "textOnly": true, - "layoutLocked": true, - "styleLocked": true - } -}