From 62d57f77533b18d447dc21ed39b39be16ffa4a2b Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 17 Apr 2026 21:18:35 +0000 Subject: [PATCH] Switch to version 2: added registry/components/HeroSplitDualMedia.json --- registry/components/HeroSplitDualMedia.json | 109 ++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 registry/components/HeroSplitDualMedia.json diff --git a/registry/components/HeroSplitDualMedia.json b/registry/components/HeroSplitDualMedia.json new file mode 100644 index 0000000..aec5a8f --- /dev/null +++ b/registry/components/HeroSplitDualMedia.json @@ -0,0 +1,109 @@ +{ + "name": "HeroSplitDualMedia", + "description": "Split-layout hero section with configurable background, text content with rating on one side, and dual image/video grid on the other.", + "details": "Use for coaching, consulting, or service-focused landing pages. Features full viewport height (h-svh on mobile, h-screen on desktop) with responsive split layout. Left side contains TextBox with tag, title, description, buttons, and a rating section with star icons. Right side displays two media items in a 2-column grid layout. Rating section shows star icons with descriptive text below a divider line.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Transform your business with proven strategies", + "minChars": 2, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "I help entrepreneurs and executives unlock their full potential and build thriving businesses.", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": true, + "example": "Business Coach", + "minChars": 2, + "maxChars": 30 + }, + "ratingText": { + "required": true, + "example": "Rated by loving Clients", + "minChars": 2, + "maxChars": 50 + } + }, + "mediaRules": { + "mediaItems": { + "required": true, + "note": "Array of exactly 2 media items. Each can have imageSrc or videoSrc.", + "structure": { + "imageSrc": "string - Path to image (optional if videoSrc provided) Image is recommended if no videoSrc.", + "videoSrc": "string - Path to video (optional if imageSrc provided)", + "imageAlt": "string - Alt text for image", + "videoAriaLabel": "string - Aria label for video" + }, + "example": "[{ imageSrc: '/image1.jpg', imageAlt: 'Coaching session' }, { imageSrc: '/image2.jpg', imageAlt: 'Business growth' }]" + } + }, + "ratingRules": { + "rating": { + "required": true, + "note": "Number of stars to display (1-5)", + "example": 5 + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional)", + "onClick": "() => void - Click handler (optional)", + "props": "Partial - Additional button props (optional)" + }, + "note": "Button variant controlled by ThemeProvider's defaultButtonVariant." + } + }, + "propsSchema": { + "title": "string (required)", + "description": "string (required)", + "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", + "tag": "string (required)", + "tagIcon?": "LucideIcon", + "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "mediaItems": "[MediaItem, MediaItem] - Array of exactly 2 media items with imageSrc/videoSrc", + "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "rating": "number (required) - Number of stars to display", + "ratingText": "string (required) - Text displayed next to rating stars", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string", + "containerClassName?": "string", + "textBoxClassName?": "string", + "titleClassName?": "string", + "descriptionClassName?": "string", + "tagClassName?": "string", + "buttonContainerClassName?": "string", + "buttonClassName?": "string", + "buttonTextClassName?": "string", + "mediaWrapperClassName?": "string", + "mediaItemClassName?": "string", + "imageClassName?": "string", + "ratingClassName?": "string", + "ratingTextClassName?": "string" + }, + "usageExample": "", + "do": [ + "Use for coaching, consulting, or service-focused landing pages", + "Include exactly 2 media items", + "Include star rating for social proof", + "Full viewport height with split layout" + ], + "dont": [ + "Do not use without 2 media items", + "Do not use without rating", + "Do not use for product showcases" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +}