diff --git a/registry/components/FeatureCardTwentySix.json b/registry/components/FeatureCardTwentySix.json new file mode 100644 index 0000000..0c102d3 --- /dev/null +++ b/registry/components/FeatureCardTwentySix.json @@ -0,0 +1,93 @@ +{ + "name": "FeatureCardTwentySix", + "description": "Full-bleed media carousel feature cards with bottom text overlay and arrow navigation.", + "details": "Use for showcasing features or courses with strong visual media. Each card has full-bleed image/video with a frosted glass gradient overlay at the bottom containing title, description, and an icon button. Uses ArrowCarousel layout with centered alignment, looping, prev/next arrow controls, and mask-fade-x edges. Active item is full opacity and scale, inactive items are reduced.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Featured Courses", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Handpicked by our team to help you start strong", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Popular", + "minChars": 2, + "maxChars": 30 + } + }, + "featureRules": { + "minItems": 4, + "maxItems": 12, + "recommendedItems": "6", + "note": "MINIMUM 4 ITEMS REQUIRED - carousel needs at least 4 items for proper display", + "structure": { + "title": "string - Card title displayed over media (required)", + "description": "string - Card description displayed over media (required)", + "imageSrc": "string - Path to background image (optional if videoSrc provided) Image is recommended if no videoSrc.", + "videoSrc": "string - Path to background video (optional if imageSrc provided)", + "imageAlt": "string - Alt text for background image", + "videoAriaLabel": "string - Aria label for background video", + "buttonIcon": "LucideIcon - Icon inside the card action button (required)", + "buttonHref": "string - Navigation target for button (optional)", + "buttonOnClick": "() => void - Click handler for button (optional)" + } + } + }, + "propsSchema": { + "features": "Array<{ title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttonIcon: LucideIcon, buttonHref?: string, buttonOnClick?: () => void }> (MINIMUM 4 ITEMS 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' | 'inline-image' (required)", + "useInvertedBackground": "boolean (required)", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string", + "containerClassName?": "string", + "cardClassName?": "string", + "carouselClassName?": "string", + "controlsClassName?": "string", + "textBoxClassName?": "string", + "textBoxTitleClassName?": "string", + "textBoxTitleImageWrapperClassName?": "string", + "textBoxTitleImageClassName?": "string", + "textBoxDescriptionClassName?": "string", + "textBoxTagClassName?": "string", + "textBoxButtonContainerClassName?": "string", + "textBoxButtonClassName?": "string", + "textBoxButtonTextClassName?": "string", + "cardTitleClassName?": "string", + "cardDescriptionClassName?": "string", + "cardButtonClassName?": "string" + }, + "usageExample": "", + "do": [ + "Use for showcasing features or courses with strong visual media", + "Best for 4-12 items (6 recommended)", + "Use high-quality images or videos for full-bleed display", + "Each card requires a buttonIcon for the action button" + ], + "dont": [ + "Do not use with fewer than 4 items - carousel requires minimum 4 items", + "Do not use without media for each feature", + "Do not use without buttonIcon", + "Do not use for text-heavy content" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +}