{ "name": "ProductCardTwo", "description": "Product card displaying brand name, star rating, and review count for social proof.", "constraints": { "textRules": { "title": { "required": true, "example": "Premium Collection", "minChars": 2, "maxChars": 35 }, "description": { "required": true, "example": "Curated selection of top-rated products", "minChars": 5, "maxChars": 250 }, "tag": { "required": false, "example": "Best Sellers", "minChars": 2, "maxChars": 30 } }, "productCardRules": { "id": { "required": true, "example": "1", "minChars": 1, "maxChars": 20 }, "brand": { "required": true, "example": "Wofurnitures", "minChars": 2, "maxChars": 30 }, "name": { "required": true, "example": "Single Accent Chair", "minChars": 2, "maxChars": 50 }, "price": { "required": true, "example": "$650.00", "minChars": 1, "maxChars": 20 }, "rating": { "required": true, "example": 4, "note": "Number from 1-5 representing star rating" }, "reviewCount": { "required": true, "example": "23.9k", "minChars": 1, "maxChars": 10 } }, "mediaRules": { "imageSrc": { "required": true, "example": "/product.jpg", "note": "Supports external URLs with unoptimized prop" }, "imageAlt": { "required": false, "example": "Product name", "note": "Empty string marks image as decorative (aria-hidden)" } } }, "propsSchema": { "products": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "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: 'Product section')", "className?": "string" }, "usageExample": " window.open('https://example.com', '_blank') }]} title=\"Premium Collection\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />", "do": [ "Use for product catalogs", "Use for e-commerce", "Requires products[]", "Requires titleSegments?[]", "Requires buttons?[]" ], "dont": [], "editRules": { "textOnly": true, "layoutLocked": true, "styleLocked": true } }