diff --git a/registry.zip b/registry.zip new file mode 100644 index 0000000..57e1dbd Binary files /dev/null and b/registry.zip differ diff --git a/registry/README.md b/registry/README.md new file mode 100644 index 0000000..c85f065 --- /dev/null +++ b/registry/README.md @@ -0,0 +1,84 @@ +# LLM-Friendly Registry Structure + +Эта структура реорганизует `registry.json` для более эффективной работы с LLM, уменьшая галлюцинации и улучшая выбор компонентов. + +## Структура + +``` +registry/ +├── index.json ← КАТАЛОГ (LLM всегда видит) +├── intents.json ← ПОЧЕМУ / КОГДА (WHY / WHEN) +├── components/ +│ ├── FeatureCardSeven.json +│ ├── FeatureCardEight.json +│ └── ... +└── schemas/ + ├── FeatureCardSeven.schema.json + └── ... +``` + +## Файлы + +### `index.json` - Легковесный каталог + +Содержит минимальную информацию для выбора компонента: +- `category` - категория компонента +- `intent` - назначение компонента (почему/когда использовать) +- `bestFor` - лучшие случаи использования +- `avoidWhen` - когда НЕ использовать +- `requires` - обязательные требования (например, `features[]`) +- `import` - путь импорта + +**LLM всегда видит этот файл** для выбора компонента. + +### `intents.json` - Маппинг интентов + +Связывает интенты с компонентами: +```json +{ + "sequential process": ["FeatureCardSeven", "FeatureProcessSteps"], + "horizontal timeline": ["FeatureCardEight", "TimelineHorizontalCardStack"], + "hero with media": ["HeroBillboard"] +} +``` + +Помогает LLM выбирать компоненты по смыслу, а не угадывать. + +### `components/*.json` - Детальная информация + +Загружается **ТОЛЬКО после выбора компонента**: +- `name` - имя компонента +- `description` - описание +- `constraints` - ограничения и правила +- `propsSchema` - упрощённая схема пропсов (без className) +- `usageExample` - пример использования +- `do` - что делать +- `dont` - чего не делать +- `editRules` - правила редактирования + +### `schemas/*.schema.json` - Полные схемы + +Полные схемы пропсов (включая все className) для генерации кода. + +## Использование + +### Для LLM + +1. **Выбор компонента**: Используй `index.json` + `intents.json` +2. **Детали компонента**: Загрузи `components/{ComponentName}.json` после выбора +3. **Генерация кода**: Используй `schemas/{ComponentName}.schema.json` для полной схемы пропсов + +### Преимущества + +- ✅ Уменьшение токенов в 3-5 раз +- ✅ Снижение галлюцинаций +- ✅ Предсказуемые правки +- ✅ Масштабируемость для разных моделей + +## Обновление + +Для обновления структуры после изменений в `registry.json`: + +```bash +node transform-registry.js +``` diff --git a/registry/components/AboutMetric.json b/registry/components/AboutMetric.json new file mode 100644 index 0000000..e5e7a4e --- /dev/null +++ b/registry/components/AboutMetric.json @@ -0,0 +1,49 @@ +{ + "name": "AboutMetric", + "description": "About section with centered animated title and metric cards in a responsive grid.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "At Berco Inc. we redefine innovation by empowering businesses to reach their full potential", + "minChars": 20, + "maxChars": 300 + } + }, + "metricRules": { + "minMetrics": 2, + "maxMetrics": 4, + "structure": { + "icon": "LucideIcon - Icon component from lucide-react (required)", + "label": "string - Descriptive label for the metric (required, e.g., 'Conversions', 'Partnered Brands')", + "value": "string - Metric value to display (required, e.g., '7,000+', '2018', '30+', '100M+')" + }, + "note": "Provide 2-4 metrics for optimal layout. Grid automatically adjusts columns based on metric count (2 metrics = 2 cols, 3 metrics = 3 cols, 4 metrics = 4 cols). Import icons from lucide-react." + } + }, + "propsSchema": { + "title": "string", + "metrics": "Array<{ icon: LucideIcon, label: string, value: string }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About metrics section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\nimport { TrendingUp, ShoppingCart, Users, Globe } from 'lucide-react';\n\n\n \n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/AnimatedAuroraBackground.json b/registry/components/AnimatedAuroraBackground.json new file mode 100644 index 0000000..c014a17 --- /dev/null +++ b/registry/components/AnimatedAuroraBackground.json @@ -0,0 +1,21 @@ +{ + "name": "AnimatedAuroraBackground", + "description": "Aurora borealis effect with animated repeating gradients and mix-blend-difference.", + "constraints": {}, + "propsSchema": { + "className?": "string", + "showRadialGradient?": "boolean (default: true)", + "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/AnimatedGridBackground.json b/registry/components/AnimatedGridBackground.json new file mode 100644 index 0000000..3048590 --- /dev/null +++ b/registry/components/AnimatedGridBackground.json @@ -0,0 +1,25 @@ +{ + "name": "AnimatedGridBackground", + "description": "Grid pattern with animated pulsing squares using Framer Motion and optional 3D perspective.", + "constraints": {}, + "propsSchema": { + "squareSize?": "number (default: 100)", + "numSquares?": "number (default: 50)", + "maxOpacity?": "number (default: 0.15)", + "perspectiveThreeD?": "boolean (default: true)", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/AuroraBackground.json b/registry/components/AuroraBackground.json new file mode 100644 index 0000000..6143169 --- /dev/null +++ b/registry/components/AuroraBackground.json @@ -0,0 +1,20 @@ +{ + "name": "AuroraBackground", + "description": "Aurora borealis-style background with multiple rotated gradient bars and blur effect.", + "constraints": {}, + "propsSchema": { + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/AvatarGroup.json b/registry/components/AvatarGroup.json new file mode 100644 index 0000000..5e84eea --- /dev/null +++ b/registry/components/AvatarGroup.json @@ -0,0 +1,33 @@ +{ + "name": "AvatarGroup", + "description": "Displays a group of user avatars with overlapping layout and optional text label.", + "constraints": { + "textRules": { + "text": { + "required": false, + "example": "Join 1,000+ members", + "minChars": 2, + "maxChars": 50 + } + } + }, + "propsSchema": { + "avatars": "Array<{ src: string, alt?: string }> - User avatar images", + "text?": "string", + "maxVisible?": "number (default: 5)", + "className?": "string", + "ariaLabel?": "string (default: 'User avatars')" + }, + "usageExample": "", + "do": [ + "Use for social proof", + "Use for customer reviews", + "Requires avatars[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardEleven.json b/registry/components/BlogCardEleven.json new file mode 100644 index 0000000..9975b67 --- /dev/null +++ b/registry/components/BlogCardEleven.json @@ -0,0 +1,65 @@ +{ + "name": "BlogCardEleven", + "description": "Two-column blog card list with title, author, description, tags, and media.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Latest News", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Stay updated with our latest announcements", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "News", + "minChars": 2, + "maxChars": 30 + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 10, + "recommendedItems": "2-4", + "note": "Each blog requires id, title, author, description, tags array. Media uses discriminated union: either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel)." + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, title: string, author: string, description: string, tags: string[], imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string, onBlogClick?: () => void }> - Blog card items (requires imageSrc or videoSrc)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (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", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault' (required)", + "ariaLabel?": "string (default: 'Blog section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items", + "Do not use more than 10 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardFive.json b/registry/components/BlogCardFive.json new file mode 100644 index 0000000..680f0cc --- /dev/null +++ b/registry/components/BlogCardFive.json @@ -0,0 +1,108 @@ +{ + "name": "BlogCardFive", + "description": "Blog section with TextBox header and fixed 2-column grid layout with horizontal blog cards and metadata items.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Latest Articles", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Discover our latest insights and stories", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Blog", + "minChars": 2, + "maxChars": 30 + } + }, + "blogRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "title": { + "required": true, + "example": "The Future of Web Development: Exploring New Technologies and Trends", + "minChars": 10, + "maxChars": 150, + "note": "Blog post title shown at text-3xl size, supports longer titles" + }, + "items": { + "required": true, + "minItems": 1, + "maxItems": 5, + "structure": "string[]", + "example": "['Technology', 'Jan 15, 2025', '5 min read']", + "note": "Flexible metadata items (category, date, author, read time, etc.) displayed inline with bullet separators" + }, + "imageSrc": { + "required": false, + "example": "/blog-1.jpg", + "note": "Either imageSrc or videoSrc should be provided" + }, + "videoSrc": { + "required": false, + "example": "/blog-1.mp4", + "note": "Either imageSrc or videoSrc should be provided" + }, + "imageAlt": { + "required": false, + "example": "Future of web development illustration", + "note": "Falls back to blog title if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Future of web development video", + "note": "Falls back to blog title if not provided" + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 10, + "recommendedItems": "2-6", + "note": "Always displays as 2-column grid on desktop, 1 column on mobile. Works best with even number of posts (2, 4, 6)." + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, title: string, items: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Blog section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items", + "Do not use more than 10 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardOne.json b/registry/components/BlogCardOne.json new file mode 100644 index 0000000..bababbf --- /dev/null +++ b/registry/components/BlogCardOne.json @@ -0,0 +1,64 @@ +{ + "name": "BlogCardOne", + "description": "Blog section with card grid/carousel layout featuring image, category, title, excerpt, and author info.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Latest Articles", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Insights and updates from our team", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Blog", + "minChars": 2, + "maxChars": 30 + } + }, + "blogRules": { + "blogs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"category\": \"Design\", \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"John Doe\", \"authorAvatar\": \"/avatar-1.jpg\", \"date\": \"20 Jan 2025\"}]", + "note": "Array of blog items. Each item requires id, category, title, excerpt, imageSrc, authorName, authorAvatar, and date." + } + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Blog section')", + "className?": "string" + }, + "usageExample": " console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />", + "do": [ + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardSix.json b/registry/components/BlogCardSix.json new file mode 100644 index 0000000..953e452 --- /dev/null +++ b/registry/components/BlogCardSix.json @@ -0,0 +1,99 @@ +{ + "name": "BlogCardSix", + "description": "Blog section with separate media and card layout, featuring tags and arrow navigation.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Recent articles", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Stay updated with the latest trends and insights", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Blog", + "minChars": 2, + "maxChars": 30 + } + }, + "blogRules": { + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for the blog post" + }, + "title": { + "required": true, + "example": "Discover the essential features of our app", + "minChars": 10, + "maxChars": 100 + }, + "tags": { + "required": true, + "minItems": 1, + "maxItems": 4, + "structure": "string[]", + "example": "['Features', 'Jan 29, 2025']", + "note": "Array of tag strings displayed using Tag component" + }, + "imageSrc": { + "required": false, + "example": "/blog-1.jpg", + "note": "Either imageSrc or videoSrc should be provided" + }, + "videoSrc": { + "required": false, + "example": "/blog-1.mp4", + "note": "Either imageSrc or videoSrc should be provided" + }, + "imageAlt": { + "required": false, + "example": "Blog post preview image", + "note": "Falls back to blog title if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Blog post video", + "note": "Falls back to blog title if not provided" + } + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, title: string, tags: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onBlogClick?: () => void }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "ariaLabel?": "string (default: 'Blog section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardThree.json b/registry/components/BlogCardThree.json new file mode 100644 index 0000000..5856635 --- /dev/null +++ b/registry/components/BlogCardThree.json @@ -0,0 +1,67 @@ +{ + "name": "BlogCardThree", + "description": "Blog section with vertical card layout featuring tag, title, description, and media with overlay button.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Featured Articles", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Explore our latest insights", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Blog", + "minChars": 2, + "maxChars": 30 + } + }, + "blogRules": { + "blogs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"category\": \"Software Development\", \"title\": \"Redefining Digital Performance\", \"description\": \"Optimizing speed and scalability\", \"imageSrc\": \"/blog-1.jpg\"}]", + "note": "Array of blog items. Each item requires id, category, title, description, and either imageSrc or videoSrc." + } + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, category: string, categoryIcon?: LucideIcon, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onBlogClick?: () => void }> - Blog card items", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-[600px]')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Blog section')", + "className?": "string" + }, + "usageExample": " console.log('clicked')}]} title=\"Featured Articles\" description=\"Explore our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" />", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlogCardTwo.json b/registry/components/BlogCardTwo.json new file mode 100644 index 0000000..b423359 --- /dev/null +++ b/registry/components/BlogCardTwo.json @@ -0,0 +1,64 @@ +{ + "name": "BlogCardTwo", + "description": "Blog section with card grid/carousel layout featuring image, author/date, title, excerpt, and multiple tags.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Latest Articles", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Insights and updates from our team", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Blog", + "minChars": 2, + "maxChars": 30 + } + }, + "blogRules": { + "blogs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"tags\": [\"Design\", \"Research\"], \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"Olivia Rhye\", \"date\": \"20 Jan 2025\"}]", + "note": "Array of blog items. Each item requires id, tags (array), title, excerpt, imageSrc, authorName, and date." + } + } + }, + "propsSchema": { + "blogs": "Array<{ id: string, tags: string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, date: string, onBlogClick?: () => void }> - Blog card items", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Blog section')", + "className?": "string" + }, + "usageExample": " console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />", + "do": [ + "Use for blog listings", + "Use for article grids", + "Requires blogs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/BlurBottomBackground.json b/registry/components/BlurBottomBackground.json new file mode 100644 index 0000000..0132514 --- /dev/null +++ b/registry/components/BlurBottomBackground.json @@ -0,0 +1,19 @@ +{ + "name": "BlurBottomBackground", + "description": "Backdrop blur effect positioned at the bottom of the page with linear gradient mask.", + "constraints": {}, + "propsSchema": { + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonBounceEffect.json b/registry/components/ButtonBounceEffect.json new file mode 100644 index 0000000..c46ce9b --- /dev/null +++ b/registry/components/ButtonBounceEffect.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonBounceEffect", + "description": "CTA button with bouncing character animation on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonDirectionalHover.json b/registry/components/ButtonDirectionalHover.json new file mode 100644 index 0000000..b4979be --- /dev/null +++ b/registry/components/ButtonDirectionalHover.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonDirectionalHover", + "description": "CTA button with a circle that expands from the mouse entry point on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonElasticEffect.json b/registry/components/ButtonElasticEffect.json new file mode 100644 index 0000000..2f26a22 --- /dev/null +++ b/registry/components/ButtonElasticEffect.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonElasticEffect", + "description": "CTA button with elastic scale animation on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonExpandHover.json b/registry/components/ButtonExpandHover.json new file mode 100644 index 0000000..164f612 --- /dev/null +++ b/registry/components/ButtonExpandHover.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonExpandHover", + "description": "CTA button with expanding background animation from right to left on hover, with a fixed arrow icon.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonHoverBubble.json b/registry/components/ButtonHoverBubble.json new file mode 100644 index 0000000..eae496e --- /dev/null +++ b/registry/components/ButtonHoverBubble.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonHoverBubble", + "description": "CTA button with expanding bubble animation where an arrow icon slides out and the text expands on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Contact Us", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonHoverMagnetic.json b/registry/components/ButtonHoverMagnetic.json new file mode 100644 index 0000000..4b8599e --- /dev/null +++ b/registry/components/ButtonHoverMagnetic.json @@ -0,0 +1,34 @@ +{ + "name": "ButtonHoverMagnetic", + "description": "CTA button that subtly follows the cursor with a magnetic hover effect.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Button", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "strengthFactor?": "number (default: 20)", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonIconArrow.json b/registry/components/ButtonIconArrow.json new file mode 100644 index 0000000..67a33c3 --- /dev/null +++ b/registry/components/ButtonIconArrow.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonIconArrow", + "description": "Button with a trailing arrow icon that transforms on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Button", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonShiftHover.json b/registry/components/ButtonShiftHover.json new file mode 100644 index 0000000..4109308 --- /dev/null +++ b/registry/components/ButtonShiftHover.json @@ -0,0 +1,35 @@ +{ + "name": "ButtonShiftHover", + "description": "CTA button where the label nudges upward on hover and a trailing dot fills from outline to solid.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [ + "Do not use multiple items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonTextShift.json b/registry/components/ButtonTextShift.json new file mode 100644 index 0000000..7c9b7e6 --- /dev/null +++ b/registry/components/ButtonTextShift.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonTextShift", + "description": "CTA button with synchronized character shift animation on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonTextStagger.json b/registry/components/ButtonTextStagger.json new file mode 100644 index 0000000..8c4c724 --- /dev/null +++ b/registry/components/ButtonTextStagger.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonTextStagger", + "description": "CTA button with character stagger animation on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Get Started", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ButtonTextUnderline.json b/registry/components/ButtonTextUnderline.json new file mode 100644 index 0000000..c37ba41 --- /dev/null +++ b/registry/components/ButtonTextUnderline.json @@ -0,0 +1,33 @@ +{ + "name": "ButtonTextUnderline", + "description": "Text-only button where an underline animates in on hover.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Learn more", + "minChars": 2, + "maxChars": 25 + } + } + }, + "propsSchema": { + "text": "string", + "onClick?": "() => void", + "href?": "string - External URLs open in new tab, internal values scroll to section", + "className?": "string", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "type?": "'button' | 'submit' | 'reset' (default: 'button')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/CardStack.json b/registry/components/CardStack.json new file mode 100644 index 0000000..cf886f1 --- /dev/null +++ b/registry/components/CardStack.json @@ -0,0 +1,55 @@ +{ + "name": "CardStack", + "description": "Adaptive layout component that displays children in a grid, timeline, or carousel based on item count and variant.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Features", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Discover our products", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "New", + "minChars": 2, + "maxChars": 30 + } + } + }, + "propsSchema": { + "children": "React.ReactNode", + "mode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant?": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (default: 'uniform-all-items-equal')", + "uniformGridCustomHeightClasses?": "string (default: varies by usage)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Card stack')", + "className?": "string" + }, + "usageExample": "{/* Card components */}", + "do": [ + "Use for general use", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/CircleGradientBackground.json b/registry/components/CircleGradientBackground.json new file mode 100644 index 0000000..8a24188 --- /dev/null +++ b/registry/components/CircleGradientBackground.json @@ -0,0 +1,20 @@ +{ + "name": "CircleGradientBackground", + "description": "Two large gradient circles positioned diagonally in corners.", + "constraints": {}, + "propsSchema": { + "diagonal?": "'primary' | 'secondary' (default: 'primary')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactCenter.json b/registry/components/ContactCenter.json new file mode 100644 index 0000000..2d4209b --- /dev/null +++ b/registry/components/ContactCenter.json @@ -0,0 +1,73 @@ +{ + "name": "ContactCenter", + "description": "Centered contact section with tag, animated title and description, email signup form, and terms text.", + "constraints": { + "textRules": { + "tag": { + "required": true, + "example": "Newsletter", + "minChars": 2, + "maxChars": 20 + }, + "title": { + "required": true, + "example": "Medium length heading goes here", + "minChars": 4, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", + "minChars": 20, + "maxChars": 200 + }, + "inputPlaceholder": { + "required": false, + "default": "Enter your email", + "example": "Your email address", + "minChars": 5, + "maxChars": 30 + }, + "buttonText": { + "required": false, + "default": "Sign Up", + "example": "Subscribe", + "minChars": 2, + "maxChars": 15 + }, + "termsText": { + "required": false, + "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", + "example": "We respect your privacy. Unsubscribe at any time.", + "minChars": 10, + "maxChars": 150 + } + } + }, + "propsSchema": { + "tag": "string", + "title": "string", + "description": "string", + "tagIcon?": "LucideIcon", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "inputPlaceholder?": "string (default: 'Enter your email')", + "buttonText?": "string (default: 'Sign Up')", + "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", + "onSubmit?": "(email: string) => void", + "ariaLabel?": "string (default: 'Contact section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n console.log(email)} />\n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for contact pages", + "Use for lead generation" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactFaq.json b/registry/components/ContactFaq.json new file mode 100644 index 0000000..dd0c9fa --- /dev/null +++ b/registry/components/ContactFaq.json @@ -0,0 +1,70 @@ +{ + "name": "ContactFaq", + "description": "Split-panel contact section with CTA card on left and FAQ accordions on right.", + "constraints": { + "textRules": { + "ctaTitle": { + "required": true, + "example": "Book an intro call", + "minChars": 2, + "maxChars": 50 + }, + "ctaDescription": { + "required": true, + "example": "Let's get started with a brief intro call.", + "minChars": 5, + "maxChars": 100 + } + }, + "faqRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "title": { + "required": true, + "example": "What's included in the subscription?", + "minChars": 5, + "maxChars": 100 + }, + "content": { + "required": true, + "example": "Your subscription covers end-to-end digital design services...", + "minChars": 10, + "maxChars": 500, + "note": "Supports HTML content" + } + } + }, + "propsSchema": { + "faqs": "Array<{ id: string, title: string, content: string }>", + "ctaTitle": "string", + "ctaDescription": "string", + "ctaButton": "{text: string, onClick?: () => void, href?: string}", + "ctaIcon": "LucideIcon (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect on panels)", + "accordionAnimationType?": "'smooth' | 'instant' (default: 'smooth')", + "showCard?": "boolean (default: true - controls accordion card styling)", + "ariaLabel?": "string (default: 'Contact and FAQ section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for contact pages", + "Use for lead generation", + "Use for help pages", + "Use for support sections", + "Requires faqs[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactForm.json b/registry/components/ContactForm.json new file mode 100644 index 0000000..7a8e098 --- /dev/null +++ b/registry/components/ContactForm.json @@ -0,0 +1,73 @@ +{ + "name": "ContactForm", + "description": "Complete contact form component with tag, animated title and description, email signup form, and terms text.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Join our newsletter", + "minChars": 4, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "Get the latest updates and exclusive content delivered to your inbox", + "minChars": 10, + "maxChars": 200 + }, + "tag": { + "required": true, + "example": "Newsletter", + "minChars": 2, + "maxChars": 30 + }, + "inputPlaceholder": { + "required": false, + "default": "Enter your email", + "example": "Your email address", + "minChars": 5, + "maxChars": 50 + }, + "buttonText": { + "required": false, + "default": "Sign Up", + "example": "Subscribe", + "minChars": 2, + "maxChars": 15 + }, + "termsText": { + "required": false, + "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", + "example": "We respect your privacy. Unsubscribe anytime.", + "minChars": 10, + "maxChars": 200 + } + } + }, + "propsSchema": { + "title": "string (required)", + "description": "string (required)", + "tag": "string (required)", + "tagIcon?": "LucideIcon", + "inputPlaceholder?": "string (default: 'Enter your email')", + "buttonText?": "string (default: 'Sign Up')", + "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", + "onSubmit?": "(email: string) => void", + "centered?": "boolean (default: false)", + "className?": "string" + }, + "usageExample": " console.log(email)} />", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for contact pages", + "Use for lead generation" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactSplit.json b/registry/components/ContactSplit.json new file mode 100644 index 0000000..e68e6b3 --- /dev/null +++ b/registry/components/ContactSplit.json @@ -0,0 +1,78 @@ +{ + "name": "ContactSplit", + "description": "Split layout contact section with tag, animated title and description on one side, media content on the other, and email signup form.", + "constraints": { + "textRules": { + "tag": { + "required": true, + "example": "Newsletter", + "minChars": 2, + "maxChars": 20 + }, + "title": { + "required": true, + "example": "Medium length heading goes here", + "minChars": 4, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", + "minChars": 20, + "maxChars": 200 + }, + "inputPlaceholder": { + "required": false, + "default": "Enter your email", + "example": "Your email address", + "minChars": 5, + "maxChars": 30 + }, + "buttonText": { + "required": false, + "default": "Sign Up", + "example": "Subscribe", + "minChars": 2, + "maxChars": 15 + }, + "termsText": { + "required": false, + "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", + "example": "We respect your privacy. Unsubscribe at any time.", + "minChars": 10, + "maxChars": 150 + } + } + }, + "propsSchema": { + "tag": "string", + "title": "string", + "description": "string", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Contact section video')", + "mediaPosition?": "'left' | 'right' (default: 'right')", + "tagIcon?": "LucideIcon", + "inputPlaceholder?": "string (default: 'Enter your email')", + "buttonText?": "string (default: 'Sign Up')", + "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", + "onSubmit?": "(email: string) => void", + "ariaLabel?": "string (default: 'Contact section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n console.log(email)} />\n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for contact pages", + "Use for lead generation" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactSplitForm.json b/registry/components/ContactSplitForm.json new file mode 100644 index 0000000..9d8b827 --- /dev/null +++ b/registry/components/ContactSplitForm.json @@ -0,0 +1,57 @@ +{ + "name": "ContactSplitForm", + "description": "Split layout contact form with animated title and description, dynamic input fields, optional textarea, submit button, and media content.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Medium length heading goes here", + "minChars": 4, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", + "minChars": 20, + "maxChars": 200 + }, + "buttonText": { + "required": false, + "default": "Submit", + "example": "Send Message", + "minChars": 2, + "maxChars": 15 + } + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)", + "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Contact section video')", + "mediaPosition?": "'left' | 'right' (default: 'right')", + "buttonText?": "string (default: 'Submit')", + "onSubmit?": "(data: Record) => void", + "ariaLabel?": "string (default: 'Contact section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n console.log(data)} />\n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for contact pages", + "Use for lead generation", + "Requires inputs[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ContactText.json b/registry/components/ContactText.json new file mode 100644 index 0000000..b03b1aa --- /dev/null +++ b/registry/components/ContactText.json @@ -0,0 +1,48 @@ +{ + "name": "ContactText", + "description": "Centered contact section with animated text and action buttons in a card container.", + "constraints": { + "textRules": { + "text": { + "required": true, + "example": "Ready to start your next project? Let's create something amazing together.", + "minChars": 10, + "maxChars": 200 + }, + "animationType": { + "required": false, + "default": "entrance-slide", + "options": [ + "entrance-slide", + "reveal-blur", + "background-highlight" + ], + "note": "GSAP scroll-triggered animation type for text" + } + }, + "buttonRules": { + "maxButtons": 2, + "note": "Supports up to 2 buttons with px-8 spacing. Buttons use theme.defaultButtonVariant." + } + }, + "propsSchema": { + "text": "string", + "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Contact section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for contact pages", + "Use for lead generation", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/DotGridBackground.json b/registry/components/DotGridBackground.json new file mode 100644 index 0000000..102e61d --- /dev/null +++ b/registry/components/DotGridBackground.json @@ -0,0 +1,23 @@ +{ + "name": "DotGridBackground", + "description": "Dot pattern background with radial gradient dots and optional 3D perspective effect.", + "constraints": {}, + "propsSchema": { + "size?": "'small' | 'medium' | 'large' (default: 'medium')", + "perspectiveThreeD?": "boolean (default: false)", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/DownwardRaysBackground.json b/registry/components/DownwardRaysBackground.json new file mode 100644 index 0000000..b157144 --- /dev/null +++ b/registry/components/DownwardRaysBackground.json @@ -0,0 +1,26 @@ +{ + "name": "DownwardRaysBackground", + "description": "Atmospheric light rays emanating from top center directly downward with blur and radial gradient effects, with optional grid overlay.", + "constraints": {}, + "propsSchema": { + "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.", + "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for statistics displays", + "Use for achievement showcases" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/EmailSignupForm.json b/registry/components/EmailSignupForm.json new file mode 100644 index 0000000..d7ec253 --- /dev/null +++ b/registry/components/EmailSignupForm.json @@ -0,0 +1,39 @@ +{ + "name": "EmailSignupForm", + "description": "Compact email signup form with inline input and submit button in card container.", + "constraints": { + "textRules": { + "inputPlaceholder": { + "required": false, + "default": "Enter your email", + "example": "Your email address", + "minChars": 5, + "maxChars": 50 + }, + "buttonText": { + "required": false, + "default": "Sign Up", + "example": "Subscribe", + "minChars": 2, + "maxChars": 15 + } + } + }, + "propsSchema": { + "inputPlaceholder?": "string (default: 'Enter your email')", + "buttonText?": "string (default: 'Sign Up')", + "onSubmit?": "(email: string) => void", + "className?": "string" + }, + "usageExample": " console.log(email)} />", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FaqBase.json b/registry/components/FaqBase.json new file mode 100644 index 0000000..8c13f4a --- /dev/null +++ b/registry/components/FaqBase.json @@ -0,0 +1,72 @@ +{ + "name": "FaqBase", + "description": "FAQ section with accordion items and optional header.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Frequently Asked Questions", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Find answers to common questions about our products and services", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Help", + "minChars": 2, + "maxChars": 30 + } + }, + "faqRules": { + "faqs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]", + "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)." + }, + "animationType": { + "required": false, + "default": "smooth", + "options": [ + "smooth", + "instant" + ], + "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately." + } + } + }, + "propsSchema": { + "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", + "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'", + "animationType?": "'smooth' | 'instant' (default: 'smooth')", + "showCard?": "boolean (default: true)", + "ariaLabel?": "string (default: 'FAQ section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for help pages", + "Use for support sections", + "Requires faqs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FaqDouble.json b/registry/components/FaqDouble.json new file mode 100644 index 0000000..4e1283c --- /dev/null +++ b/registry/components/FaqDouble.json @@ -0,0 +1,71 @@ +{ + "name": "FaqDouble", + "description": "FAQ section with two-column accordion layout and optional header.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Frequently Asked Questions", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Find answers to common questions about our products and services", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Help", + "minChars": 2, + "maxChars": 30 + } + }, + "faqRules": { + "faqs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]", + "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support). Items are automatically split into two columns." + }, + "animationType": { + "required": false, + "default": "smooth", + "options": [ + "smooth", + "instant" + ], + "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately." + } + } + }, + "propsSchema": { + "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", + "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'", + "animationType?": "'smooth' | 'instant' (default: 'smooth')", + "ariaLabel?": "string (default: 'FAQ section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for help pages", + "Use for support sections", + "Requires faqs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FaqSplitMedia.json b/registry/components/FaqSplitMedia.json new file mode 100644 index 0000000..1230577 --- /dev/null +++ b/registry/components/FaqSplitMedia.json @@ -0,0 +1,98 @@ +{ + "name": "FaqSplitMedia", + "description": "FAQ section with split layout featuring media (image/video) on one side and accordion list on the other.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Frequently Asked Questions", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Find answers to common questions about our products and services", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Help", + "minChars": 2, + "maxChars": 30 + } + }, + "faqRules": { + "faqs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]", + "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)." + }, + "animationType": { + "required": false, + "default": "smooth", + "options": [ + "smooth", + "instant" + ], + "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately." + }, + "mediaPosition": { + "required": false, + "default": "left", + "options": [ + "left", + "right" + ], + "note": "Position of media relative to FAQ list." + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "note": "Path to image file. Either imageSrc or videoSrc should be provided." + }, + "videoSrc": { + "required": false, + "note": "Path to video file. Either imageSrc or videoSrc should be provided." + } + } + }, + "propsSchema": { + "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'FAQ section video')", + "mediaPosition?": "'left' | 'right' (default: 'left')", + "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'", + "animationType?": "'smooth' | 'instant' (default: 'smooth')", + "showCard?": "boolean (default: true)", + "ariaLabel?": "string (default: 'FAQ section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for help pages", + "Use for support sections", + "Requires faqs[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FaqSplitText.json b/registry/components/FaqSplitText.json new file mode 100644 index 0000000..59d9256 --- /dev/null +++ b/registry/components/FaqSplitText.json @@ -0,0 +1,71 @@ +{ + "name": "FaqSplitText", + "description": "FAQ section with split layout featuring animated text on one side and accordion list on the other.", + "constraints": { + "textRules": { + "sideTitle": { + "required": true, + "example": "Frequently Asked Questions", + "minChars": 2, + "maxChars": 100 + }, + "sideDescription": { + "required": false, + "example": "Everything you need to know", + "minChars": 5, + "maxChars": 250 + } + }, + "faqRules": { + "faqs": { + "required": true, + "minItems": 1, + "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]", + "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)." + }, + "animationType": { + "required": false, + "default": "smooth", + "options": [ + "smooth", + "instant" + ], + "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately." + }, + "textPosition": { + "required": false, + "default": "left", + "options": [ + "left", + "right" + ], + "note": "Position of title/description text relative to FAQ list." + } + } + }, + "propsSchema": { + "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", + "sideTitle": "string", + "sideDescription?": "string", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "textPosition?": "'left' | 'right' (default: 'left')", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "animationType?": "'smooth' | 'instant' (default: 'smooth')", + "showCard?": "boolean (default: true)", + "ariaLabel?": "string (default: 'FAQ section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for help pages", + "Use for support sections", + "Requires faqs[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardEight.json b/registry/components/FeatureCardEight.json new file mode 100644 index 0000000..cf16ec4 --- /dev/null +++ b/registry/components/FeatureCardEight.json @@ -0,0 +1,111 @@ +{ + "name": "FeatureCardEight", + "description": "Horizontal timeline feature section with auto-advancing progress bars, numbered step badges, and shared media display.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Process", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Discover how we bring ideas to life", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "How It Works", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 3, + "note": "Step number displayed in circular badge" + }, + "title": { + "required": true, + "example": "Research & Planning", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Understanding user needs, market trends, and project requirements", + "minChars": 10, + "maxChars": 300 + } + }, + "mediaRules": { + "imageSrc": { + "required": true, + "example": "/feature1.jpg", + "note": "Either imageSrc or videoSrc required per card (discriminated union)" + }, + "videoSrc": { + "required": true, + "example": "/feature1.mp4", + "note": "Either imageSrc or videoSrc required per card (discriminated union)" + }, + "imageAlt": { + "required": false, + "example": "Research and planning illustration", + "note": "Falls back to feature title if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Research and planning video", + "note": "Falls back to feature title if not provided" + } + }, + "itemRules": { + "minItems": 2, + "maxItems": 4, + "recommendedItems": "2-4", + "note": "Works best with 2-4 features. Grid layout adapts based on item count." + } + }, + "propsSchema": { + "features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: 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", + "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: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for process flows", + "Use for roadmaps", + "Use for step-by-step explanation", + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use non-sequential content", + "Do not use single item", + "Do not use more than 4 items", + "Do not use less than 2 items", + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardMedia.json b/registry/components/FeatureCardMedia.json new file mode 100644 index 0000000..555a49d --- /dev/null +++ b/registry/components/FeatureCardMedia.json @@ -0,0 +1,70 @@ +{ + "name": "FeatureCardMedia", + "description": "Feature section with media cards displaying tag overlay, title, description, and optional buttons.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "From concept to launch, we've got you covered", + "minChars": 10, + "maxChars": 100 + }, + "description": { + "required": true, + "example": "Discover how we bring ideas to life through a proven methodology", + "minChars": 20, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Our Process", + "minChars": 2, + "maxChars": 30 + } + }, + "featuresRules": { + "minItems": 2, + "recommendedItems": 3, + "maxItems": 6, + "structure": { + "id": "string - Unique identifier (required)", + "title": "string - Card title (required)", + "description": "string - Card description (required)", + "tag": "string - Tag displayed on media top-right (required)", + "imageSrc": "string - Image source URL (optional)", + "videoSrc": "string - Video source URL (optional)", + "buttons": "ButtonConfig[] - Optional action buttons for the card" + }, + "note": "Each card requires id, title, description, and tag. Media (imageSrc or videoSrc) recommended. Buttons are optional per card." + } + }, + "propsSchema": { + "features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", + "title": "string", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "ButtonConfig[]", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "ariaLabel?": "string (default: 'Features section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardNine.json b/registry/components/FeatureCardNine.json new file mode 100644 index 0000000..56cb5d5 --- /dev/null +++ b/registry/components/FeatureCardNine.json @@ -0,0 +1,130 @@ +{ + "name": "FeatureCardNine", + "description": "Scroll-based timeline feature section with two animated phone frames and centered content.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Powerful Features", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Everything you need to build amazing products", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 3, + "note": "Feature identifier" + }, + "title": { + "required": true, + "example": "Seamless Integration", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Connect your tools and workflows effortlessly. Our platform integrates with your existing systems.", + "minChars": 10, + "maxChars": 300 + } + }, + "phoneMediaRules": { + "phoneOne": { + "imageSrc": { + "required": true, + "example": "/phone1.jpg", + "note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)" + }, + "videoSrc": { + "required": true, + "example": "/phone1.mp4", + "note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)" + }, + "imageAlt": { + "required": false, + "example": "First phone mockup", + "note": "Falls back to '[title] - Phone 1' if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "First phone video", + "note": "Falls back to '[title] - Phone 1 video' if not provided" + } + }, + "phoneTwo": { + "imageSrc": { + "required": true, + "example": "/phone2.jpg", + "note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)" + }, + "videoSrc": { + "required": true, + "example": "/phone2.mp4", + "note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)" + }, + "imageAlt": { + "required": false, + "example": "Second phone mockup", + "note": "Falls back to '[title] - Phone 2' if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Second phone video", + "note": "Falls back to '[title] - Phone 2 video' if not provided" + } + } + }, + "itemRules": { + "minItems": 2, + "maxItems": 4, + "recommendedItems": "2-4", + "note": "Each feature takes 100vh height. Recommend 2-4 features to avoid excessive scroll." + } + }, + "propsSchema": { + "features": "Array<{ id: number, title: string, description: string, phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>", + "showStepNumbers": "boolean (required - controls whether step number badges display)", + "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: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use less than 2 items", + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardNineteen.json b/registry/components/FeatureCardNineteen.json new file mode 100644 index 0000000..378ccc1 --- /dev/null +++ b/registry/components/FeatureCardNineteen.json @@ -0,0 +1,111 @@ +{ + "name": "FeatureCardNineteen", + "description": "Timeline feature section with full-width cards showing step numbers and rotated media.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Process", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Discover how we bring ideas to life", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "How it works", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": 1, + "note": "Numeric ID used to generate step number (01, 02, etc.)" + }, + "tag": { + "required": true, + "example": "Expertise", + "minChars": 2, + "maxChars": 30 + }, + "title": { + "required": true, + "example": "Strategy", + "minChars": 2, + "maxChars": 30 + }, + "subtitle": { + "required": true, + "example": "Data-driven decisions for growth.", + "minChars": 5, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "We analyze market trends and user behavior to create strategies that drive real results.", + "minChars": 10, + "maxChars": 250 + }, + "imageSrc": { + "required": false, + "example": "/images/strategy.webp", + "note": "Image source URL (either imageSrc or videoSrc)" + }, + "videoSrc": { + "required": false, + "example": "/videos/strategy.mp4", + "note": "Video source URL (either imageSrc or videoSrc)" + }, + "buttons": { + "required": false, + "example": [ + { + "text": "Learn more", + "href": "/strategy" + } + ], + "note": "Optional buttons per feature card (max 2)" + } + } + }, + "propsSchema": { + "features": "Array<{ id: number, tag: string, title: string, subtitle: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }> (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for process flows", + "Use for roadmaps", + "Use for step-by-step explanation", + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use multiple items", + "Do not use non-sequential content", + "Do not use single item" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardOne.json b/registry/components/FeatureCardOne.json new file mode 100644 index 0000000..eeb40dc --- /dev/null +++ b/registry/components/FeatureCardOne.json @@ -0,0 +1,73 @@ +{ + "name": "FeatureCardOne", + "description": "Adaptive feature section with image/video-based cards in customizable bento grid layouts or carousel.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Features", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Discover the tools and capabilities that make our platform powerful", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "title": { + "required": true, + "example": "Advanced Analytics", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Get detailed insights into your business performance", + "minChars": 10, + "maxChars": 250 + } + } + }, + "propsSchema": { + "features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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)", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string", + "useInvertedBackground": "'noInvert' | 'invertDefault'" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for statistics displays", + "Use for achievement showcases", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardSeven.json b/registry/components/FeatureCardSeven.json new file mode 100644 index 0000000..c3c7fd4 --- /dev/null +++ b/registry/components/FeatureCardSeven.json @@ -0,0 +1,103 @@ +{ + "name": "FeatureCardSeven", + "description": "Vertical stack feature section with alternating left/right layouts and numbered step cards with square images.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Features", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Sequential features with numbered badges", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 3, + "note": "Step number displayed in circular badge" + }, + "title": { + "required": true, + "example": "Modern Architecture", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Built with the latest technologies and best practices", + "minChars": 10, + "maxChars": 300 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/feature1.jpg", + "note": "Either imageSrc or videoSrc required per card" + }, + "videoSrc": { + "required": false, + "example": "/feature1.mp4", + "note": "Either imageSrc or videoSrc required per card" + }, + "imageAlt": { + "required": false, + "example": "Modern architecture illustration", + "note": "Falls back to feature title if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Modern architecture video", + "note": "Falls back to feature title if not provided" + } + } + }, + "propsSchema": { + "features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for process flows", + "Use for roadmaps", + "Use for step-by-step explanation", + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use non-sequential content", + "Do not use single item" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardSix.json b/registry/components/FeatureCardSix.json new file mode 100644 index 0000000..db05762 --- /dev/null +++ b/registry/components/FeatureCardSix.json @@ -0,0 +1,102 @@ +{ + "name": "FeatureCardSix", + "description": "Timeline-based feature section with scroll-triggered stacking animations and numbered step cards.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Process", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Discover how we bring ideas to life", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Process", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 3, + "note": "Step number displayed in circular badge" + }, + "title": { + "required": true, + "example": "Research & Planning", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Understanding user needs, market trends, and project requirements", + "minChars": 10, + "maxChars": 300 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/step1.jpg", + "note": "Either imageSrc or videoSrc required per card" + }, + "videoSrc": { + "required": false, + "example": "/step1.mp4", + "note": "Either imageSrc or videoSrc required per card" + }, + "imageAlt": { + "required": false, + "example": "Research phase illustration", + "note": "Falls back to feature title if not provided" + }, + "videoAriaLabel": { + "required": false, + "example": "Research phase video", + "note": "Falls back to feature title if not provided" + } + } + }, + "propsSchema": { + "features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: 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", + "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: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for process flows", + "Use for roadmaps", + "Use for step-by-step explanation", + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use non-sequential content", + "Do not use single item" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardSixteen.json b/registry/components/FeatureCardSixteen.json new file mode 100644 index 0000000..eee2328 --- /dev/null +++ b/registry/components/FeatureCardSixteen.json @@ -0,0 +1,80 @@ +{ + "name": "FeatureCardSixteen", + "description": "Comparison section with negative and positive cards showing contrasting features.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "What makes us stand out", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "See how we compare to traditional approaches", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Why us", + "minChars": 2, + "maxChars": 30 + } + }, + "negativeCardRules": { + "items": { + "required": true, + "example": [ + "Time-consuming processes", + "Limited scalability", + "Higher costs" + ], + "minItems": 2, + "maxItems": 10, + "note": "List of negative aspects displayed with X icons" + } + }, + "positiveCardRules": { + "items": { + "required": true, + "example": [ + "Streamlined workflow", + "Scalable solutions", + "Better value" + ], + "minItems": 2, + "maxItems": 10, + "note": "List of positive aspects displayed with Check icons" + } + } + }, + "propsSchema": { + "negativeCard": "{ items: string[] } (required)", + "positiveCard": "{ items: string[] } (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Feature comparison section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardThree.json b/registry/components/FeatureCardThree.json new file mode 100644 index 0000000..e27905a --- /dev/null +++ b/registry/components/FeatureCardThree.json @@ -0,0 +1,90 @@ +{ + "name": "FeatureCardThree", + "description": "Adaptive feature section with hover-reveal cards displaying numbered features with images.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Features", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Discover what makes us different", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "featureCardRules": { + "id": { + "required": true, + "example": "01", + "minChars": 1, + "maxChars": 3, + "note": "Displayed in the flip badge" + }, + "title": { + "required": true, + "example": "Advanced Analytics", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Get detailed insights into your business performance", + "minChars": 10, + "maxChars": 250 + } + }, + "mediaRules": { + "imageSrc": { + "required": true, + "example": "/feature.jpg", + "note": "Supports external URLs with unoptimized prop" + }, + "imageAlt": { + "required": false, + "example": "Feature background", + "note": "Empty string marks image as decorative (aria-hidden)" + } + } + }, + "propsSchema": { + "features": "Array<{ id: string, title: string, description: string, imageSrc: string, imageAlt?: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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)", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string", + "useInvertedBackground": "'noInvert' | 'invertDefault'" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardTwelve.json b/registry/components/FeatureCardTwelve.json new file mode 100644 index 0000000..1823b74 --- /dev/null +++ b/registry/components/FeatureCardTwelve.json @@ -0,0 +1,98 @@ +{ + "name": "FeatureCardTwelve", + "description": "List-based feature section with large label on left and content with bullet points on right.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Choose Your Plan", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Find the perfect fit for your needs", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Plans", + "minChars": 2, + "maxChars": 30 + } + }, + "featureRules": { + "id": { + "required": true, + "example": "premium", + "note": "Unique identifier for the feature" + }, + "label": { + "required": true, + "example": "Premium", + "minChars": 2, + "maxChars": 30, + "note": "Large display label shown on left side (5xl mobile, 6xl desktop)" + }, + "title": { + "required": true, + "example": "Premium features for your most demanding needs", + "minChars": 10, + "maxChars": 120, + "note": "Feature heading shown at xl (mobile) / 3xl (desktop)" + }, + "items": { + "required": true, + "minItems": 1, + "maxItems": 8, + "structure": "string[]", + "note": "Inline bullet list with accent-colored dots. Each item should be 5-50 characters." + }, + "buttons": { + "required": false, + "maxButtons": 2, + "structure": "Array<{text: string, onClick?: () => void, href?: string}>", + "note": "Optional buttons at bottom of content area. First button is primary, second is secondary." + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 8, + "recommendedItems": "2-5", + "note": "Works best with 2-5 features for clear comparison" + } + }, + "propsSchema": { + "features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string" + }, + "usageExample": " console.log('clicked') }] }]} animationType=\"opacity\" variant=\"border\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires features[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 8 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureCardTwentyOne.json b/registry/components/FeatureCardTwentyOne.json new file mode 100644 index 0000000..6571269 --- /dev/null +++ b/registry/components/FeatureCardTwentyOne.json @@ -0,0 +1,86 @@ +{ + "name": "FeatureCardTwentyOne", + "description": "Split layout with media on one side and TextBox with accordion items on the other.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Custom designs", + "minChars": 2, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "Explore our range of customizable solutions designed to meet your unique needs.", + "minChars": 10, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "accordionRules": { + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for each accordion item" + }, + "title": { + "required": true, + "example": "Inspiration + innovation", + "minChars": 2, + "maxChars": 60, + "note": "Accordion header text" + }, + "content": { + "required": true, + "example": "From custom colourways to bespoke elements built from the ground up.", + "minChars": 10, + "maxChars": 500, + "note": "Accordion expanded content (supports HTML)" + } + }, + "itemRules": { + "minItems": 2, + "maxItems": 6, + "recommendedItems": 3 + } + }, + "propsSchema": { + "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}>", + "accordionItems": "Array<{ id: string, title: string, content: string }>", + "imageSrc?": "string (either imageSrc or videoSrc required)", + "imageAlt?": "string", + "videoSrc?": "string (either imageSrc or videoSrc required)", + "videoAriaLabel?": "string", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "mediaPosition?": "'left' | 'right' (default: 'left')", + "ariaLabel?": "string (default: 'Feature section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires titleSegments?[]", + "Requires buttons?[]", + "Requires accordionItems[]" + ], + "dont": [ + "Do not use less than 2 items", + "Do not use more than 6 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FeatureProcessSteps.json b/registry/components/FeatureProcessSteps.json new file mode 100644 index 0000000..333eb4a --- /dev/null +++ b/registry/components/FeatureProcessSteps.json @@ -0,0 +1,67 @@ +{ + "name": "FeatureProcessSteps", + "description": "Split-layout feature section with text on left and numbered process steps with timeline on right.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Getting you results without the complexity", + "minChars": 10, + "maxChars": 100 + }, + "description": { + "required": true, + "example": "Our three-step process takes you from identifying opportunities to launching systems, with clear communication and support at every stage.", + "minChars": 20, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "How we work", + "minChars": 2, + "maxChars": 30 + } + }, + "stepsRules": { + "minSteps": 2, + "recommendedSteps": 3, + "maxSteps": 6, + "structure": { + "number": "string - Step number to display (required, e.g., '01', '02', '1', '2')", + "title": "string - Step title (required, e.g., 'Discovery & Assessment')", + "description": "string - Step description (required)", + "tag": "string - Optional tag/badge for the step (e.g., 'Week 1', 'Ongoing')" + }, + "note": "Minimum 2 steps required, but 3+ steps recommended for optimal visual balance. Each step shows a numbered card with a connecting timeline line." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "steps": "Array<{ number: string, title: string, description: string, tag?: string }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "ButtonConfig[]", + "ariaLabel?": "string (default: 'Process steps section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n\n \n", + "do": [ + "Use for process flows", + "Use for roadmaps", + "Use for step-by-step explanation", + "Use for feature showcases", + "Use for capability displays", + "Requires steps[]" + ], + "dont": [ + "Do not use non-sequential content", + "Do not use single item" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FloatingGradientBackground.json b/registry/components/FloatingGradientBackground.json new file mode 100644 index 0000000..d8c75a8 --- /dev/null +++ b/registry/components/FloatingGradientBackground.json @@ -0,0 +1,19 @@ +{ + "name": "FloatingGradientBackground", + "description": "Five animated gradient circles with CSS animations and vertical gradient mask.", + "constraints": {}, + "propsSchema": { + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FluidBackground.json b/registry/components/FluidBackground.json new file mode 100644 index 0000000..171c1d3 --- /dev/null +++ b/registry/components/FluidBackground.json @@ -0,0 +1,19 @@ +{ + "name": "FluidBackground", + "description": "Generative fluid patterns using CPPN shader with theme color integration.", + "constraints": {}, + "propsSchema": { + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterBase.json b/registry/components/FooterBase.json new file mode 100644 index 0000000..fa301ea --- /dev/null +++ b/registry/components/FooterBase.json @@ -0,0 +1,71 @@ +{ + "name": "FooterBase", + "description": "Classic footer with logo, multi-column navigation, copyright text, and privacy policy link.", + "constraints": { + "textRules": { + "logoText": { + "required": false, + "default": "Webild", + "example": "Company Name", + "minChars": 2, + "maxChars": 30 + }, + "copyrightText": { + "required": false, + "default": "© 2025 | Webild", + "example": "© 2025 Company Name", + "minChars": 5, + "maxChars": 50 + }, + "columnTitle": { + "required": true, + "example": "Product", + "minChars": 2, + "maxChars": 20 + }, + "itemLabel": { + "required": true, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "structureRules": { + "columns": { + "required": true, + "minColumns": 1, + "maxColumns": 3, + "note": "Each column must have title and items array" + }, + "items": { + "required": true, + "minItems": 1, + "structure": { + "label": "string - Link text (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)" + } + } + } + }, + "propsSchema": { + "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", + "logoText?": "string (default: 'Webild')", + "copyrightText?": "string (default: '© 2025 | Webild')", + "onPrivacyClick?": "() => void", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": " console.log('Privacy clicked')} />", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires columns[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterBaseCard.json b/registry/components/FooterBaseCard.json new file mode 100644 index 0000000..256b272 --- /dev/null +++ b/registry/components/FooterBaseCard.json @@ -0,0 +1,54 @@ +{ + "name": "FooterBaseCard", + "description": "Card-wrapped footer with logo, navigation columns, copyright, and privacy policy link.", + "constraints": { + "textRules": { + "copyrightText": { + "required": false, + "example": "© 2025 | Webild", + "minChars": 5, + "maxChars": 100, + "note": "Copyright text displayed at bottom left" + }, + "logoText": { + "required": false, + "example": "Webild", + "minChars": 2, + "maxChars": 30, + "note": "Text used for h2 heading" + } + }, + "columnsRules": { + "required": true, + "structure": { + "title": "string - Column heading (required)", + "items": "Array<{ label: string, href: string }> - Navigation links (required)" + }, + "minColumns": 1, + "maxColumns": 5, + "note": "Array of footer column objects. Each column must have title and items array." + }, + "logoRules": { + "note": "Uses logoText as h2 heading." + } + }, + "propsSchema": { + "logoText?": "string (default: 'Webild')", + "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", + "copyrightText?": "string (default: '© 2025 | Webild')", + "onPrivacyClick?": "() => void", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": " console.log('Privacy clicked')} />", + "do": [ + "Use for general use", + "Requires columns[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterBaseReveal.json b/registry/components/FooterBaseReveal.json new file mode 100644 index 0000000..164e249 --- /dev/null +++ b/registry/components/FooterBaseReveal.json @@ -0,0 +1,62 @@ +{ + "name": "FooterBaseReveal", + "description": "Animated footer reveal wrapper that creates a fixed footer with scroll-triggered reveal effect.", + "constraints": { + "textRules": { + "copyrightText": { + "required": false, + "default": "© 2025 | Webild", + "example": "© 2025 Company Name", + "minChars": 5, + "maxChars": 50 + }, + "columnTitle": { + "required": true, + "example": "Product", + "minChars": 2, + "maxChars": 20 + }, + "itemLabel": { + "required": true, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "structureRules": { + "columns": { + "required": true, + "minColumns": 1, + "maxColumns": 3, + "note": "Each column must have title and items array" + }, + "items": { + "required": true, + "minItems": 1, + "structure": { + "label": "string - Link text (required)", + "href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections", + "onClick": "() => void - Additional click handler (optional)" + } + } + } + }, + "propsSchema": { + "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", + "copyrightText?": "string", + "onPrivacyClick?": "() => void", + "ariaLabel?": "string", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for general use", + "Requires columns[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterCard.json b/registry/components/FooterCard.json new file mode 100644 index 0000000..5678b6a --- /dev/null +++ b/registry/components/FooterCard.json @@ -0,0 +1,53 @@ +{ + "name": "FooterCard", + "description": "Minimalist footer with card wrapper containing logo, divider, copyright, and optional social links.", + "constraints": { + "textRules": { + "copyrightText": { + "required": false, + "example": "© 2025 | Webild", + "minChars": 5, + "maxChars": 100, + "note": "Copyright text displayed at bottom left" + }, + "logoText": { + "required": false, + "example": "Webild", + "minChars": 2, + "maxChars": 30, + "note": "Text used for SVG logo" + } + }, + "socialLinksRules": { + "required": false, + "structure": { + "icon": "LucideIcon - Icon component (required)", + "href": "string - Social profile URL (required)", + "ariaLabel": "string - Accessibility label (required)" + }, + "note": "Optional array of social links. Only renders if provided and has length > 0." + }, + "logoRules": { + "note": "Uses logoText for SVG text logo via FooterLogo component." + } + }, + "propsSchema": { + "logoText?": "string (default: 'Webild')", + "copyrightText?": "string (default: '© 2025 | Webild')", + "socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string", + "logoLineHeight?": "number (default: 1.1)" + }, + "usageExample": "", + "do": [ + "Use for general use", + "Requires socialLinks?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterLogoEmphasis.json b/registry/components/FooterLogoEmphasis.json new file mode 100644 index 0000000..42415b6 --- /dev/null +++ b/registry/components/FooterLogoEmphasis.json @@ -0,0 +1,61 @@ +{ + "name": "FooterLogoEmphasis", + "description": "Footer with prominent centered logo emphasis and grid-based navigation layout with chevron icons.", + "constraints": { + "textRules": { + "logoText": { + "required": false, + "default": "Webild", + "example": "Company Name", + "minChars": 2, + "maxChars": 30 + }, + "itemLabel": { + "required": true, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "structureRules": { + "columns": { + "required": true, + "minColumns": 1, + "maxColumns": 5, + "note": "Grid automatically adjusts from 1-5 columns based on array length" + }, + "items": { + "required": true, + "minItems": 1, + "structure": { + "label": "string - Link text (required)", + "href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections", + "onClick": "() => void - Additional click handler (optional)" + } + }, + "logo": { + "note": "Uses logoText for SVG text logo" + } + } + }, + "propsSchema": { + "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)", + "logoText?": "string (default: 'Webild')", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires columns[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterLogoReveal.json b/registry/components/FooterLogoReveal.json new file mode 100644 index 0000000..8722402 --- /dev/null +++ b/registry/components/FooterLogoReveal.json @@ -0,0 +1,37 @@ +{ + "name": "FooterLogoReveal", + "description": "Minimalist footer with logo that reveals on scroll using fixed positioning and clip-path.", + "constraints": { + "textRules": { + "logoText": { + "required": false, + "example": "Webild", + "minChars": 2, + "maxChars": 30, + "note": "Text used for SVG logo" + } + }, + "logoRules": { + "note": "Uses logoText for SVG text logo via FooterLogo component." + }, + "revealEffectRules": { + "note": "Component uses fixed positioning and clip-path for scroll reveal effect. Requires page content above footer to trigger scroll. ResizeObserver dynamically updates footer height for responsive reveal." + } + }, + "propsSchema": { + "logoText?": "string (default: 'Webild')", + "logoLineHeight?": "number (default: 1.1)", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterMedia.json b/registry/components/FooterMedia.json new file mode 100644 index 0000000..42b2f3d --- /dev/null +++ b/registry/components/FooterMedia.json @@ -0,0 +1,86 @@ +{ + "name": "FooterMedia", + "description": "Footer with full-width media (image/video) above classic navigation layout.", + "constraints": { + "textRules": { + "logoText": { + "required": false, + "default": "Webild", + "example": "Company Name", + "minChars": 2, + "maxChars": 30 + }, + "copyrightText": { + "required": false, + "default": "© 2025 | Webild", + "example": "© 2025 Company Name", + "minChars": 5, + "maxChars": 50 + }, + "columnTitle": { + "required": true, + "example": "Product", + "minChars": 2, + "maxChars": 20 + }, + "itemLabel": { + "required": true, + "example": "Features", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "note": "Either imageSrc or videoSrc is required (discriminated union)", + "imageSrc": { + "required": "conditional - required if no videoSrc", + "example": "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920" + }, + "videoSrc": { + "required": "conditional - required if no imageSrc", + "example": "/videos/footer-background.mp4" + } + }, + "structureRules": { + "columns": { + "required": true, + "minColumns": 1, + "maxColumns": 3, + "note": "Each column must have title and items array" + }, + "items": { + "required": true, + "minItems": 1, + "structure": { + "label": "string - Link text (required)", + "href": "string - Link destination (optional)", + "onClick": "() => void - Additional click handler (optional)" + } + } + } + }, + "propsSchema": { + "imageSrc": "string (required if no videoSrc)", + "imageAlt?": "string (default: '')", + "videoSrc": "string (required if no imageSrc)", + "videoAriaLabel?": "string (default: 'Footer video')", + "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", + "logoText?": "string (default: 'Webild')", + "copyrightText?": "string (default: '© 2025 | Webild')", + "onPrivacyClick?": "() => void", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires columns[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/FooterSimple.json b/registry/components/FooterSimple.json new file mode 100644 index 0000000..2756a19 --- /dev/null +++ b/registry/components/FooterSimple.json @@ -0,0 +1,68 @@ +{ + "name": "FooterSimple", + "description": "Minimal footer with navigation columns, divider, and bottom text row.", + "constraints": { + "textRules": { + "bottomLeftText": { + "required": true, + "example": "© 2025 Company. All rights reserved.", + "minChars": 5, + "maxChars": 60 + }, + "bottomRightText": { + "required": true, + "example": "Made with Webild", + "minChars": 2, + "maxChars": 50 + }, + "columnTitle": { + "required": true, + "example": "Navigate", + "minChars": 2, + "maxChars": 20 + }, + "itemLabel": { + "required": true, + "example": "Home", + "minChars": 2, + "maxChars": 30 + } + }, + "structureRules": { + "columns": { + "required": true, + "minColumns": 2, + "maxColumns": 5, + "note": "Each column must have title and items array. Columns spread evenly across width." + }, + "items": { + "required": true, + "minItems": 1, + "structure": { + "label": "string - Link text (required)", + "href": "string - Link destination (optional)", + "onClick": "() => void - Click handler (optional)" + } + } + } + }, + "propsSchema": { + "columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>", + "bottomLeftText": "string", + "bottomRightText": "string", + "ariaLabel?": "string (default: 'Site footer')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires columns[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/Globe.json b/registry/components/Globe.json new file mode 100644 index 0000000..8a2f50b --- /dev/null +++ b/registry/components/Globe.json @@ -0,0 +1,27 @@ +{ + "name": "Globe", + "description": "Interactive 3D rotating globe component using COBE library with theme-aware colors and customizable markers.", + "constraints": { + "globeRules": { + "config": { + "required": false, + "note": "Optional COBEOptions object to customize globe appearance. Default config uses theme colors: baseColor and glowColor use --card, markerColor uses --primary-cta. Can override: phi (rotation), theta (tilt), dark (darkness 0-1), diffuse (lighting), mapSamples, mapBrightness, markers (array of {location: [lat, lng], size: number}), and more. See COBE documentation for full options." + } + } + }, + "propsSchema": { + "className?": "string", + "config?": "COBEOptions - Custom globe configuration (see COBE docs)" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/GradientBarsBackground.json b/registry/components/GradientBarsBackground.json new file mode 100644 index 0000000..5431ecc --- /dev/null +++ b/registry/components/GradientBarsBackground.json @@ -0,0 +1,25 @@ +{ + "name": "GradientBarsBackground", + "description": "Vertical gradient bars with dynamic height distribution creating a wave-like pattern.", + "constraints": {}, + "propsSchema": { + "className?": "string", + "numBars?": "number (default: 15)", + "gradientFrom?": "string (default: 'var(--color-primary-cta)')", + "gradientTo?": "string (default: 'transparent')", + "opacity?": "number (default: 0.5)" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for statistics displays", + "Use for achievement showcases" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/GridBackround.json b/registry/components/GridBackround.json new file mode 100644 index 0000000..2278cfe --- /dev/null +++ b/registry/components/GridBackround.json @@ -0,0 +1,23 @@ +{ + "name": "GridBackround", + "description": "Grid pattern background with line-based grid and optional 3D perspective effect.", + "constraints": {}, + "propsSchema": { + "size?": "'small' | 'medium' | 'large' (default: 'medium')", + "perspectiveThreeD?": "boolean (default: false)", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroBillboard.json b/registry/components/HeroBillboard.json new file mode 100644 index 0000000..f86420d --- /dev/null +++ b/registry/components/HeroBillboard.json @@ -0,0 +1,85 @@ +{ + "name": "HeroBillboard", + "description": "Full-width hero section with centered text content, optional tag, buttons, and single image/video below in a card frame.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Welcome to Our Platform", + "minChars": 2, + "maxChars": 40 + }, + "description": { + "required": true, + "example": "Create beautiful, responsive web experiences", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "New Release", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-image.jpg", + "note": "Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-video.mp4", + "note": "Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Hero background", + "note": "Empty string marks image as decorative (aria-hidden)" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', href: 'https://example.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons?[]" + ], + "dont": [ + "Do not use multiple items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroBillboardCarousel.json b/registry/components/HeroBillboardCarousel.json new file mode 100644 index 0000000..82ff847 --- /dev/null +++ b/registry/components/HeroBillboardCarousel.json @@ -0,0 +1,75 @@ +{ + "name": "HeroBillboardCarousel", + "description": "Full-width hero section with centered text and 5+ auto-scrolling images in carousel layout.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Portfolio", + "minChars": 2, + "maxChars": 40 + }, + "description": { + "required": true, + "example": "Browse through our collection of projects", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Portfolio", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "mediaItems": { + "required": true, + "example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Product 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Product 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Product 3' }, { imageSrc: '/img4.jpg', imageAlt: 'Product 4' }, { imageSrc: '/img5.jpg', imageAlt: 'Product 5' }]", + "note": "Array of 5+ MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Requires minimum 5 images." + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'View Portfolio', href: 'https://example.com' }", + "{ text: 'Contact Us', href: 'contact' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for portfolios", + "Use for image galleries", + "Requires buttons?[]", + "Requires mediaItems[]" + ], + "dont": [ + "Do not use less than 5 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroBillboardGallery.json b/registry/components/HeroBillboardGallery.json new file mode 100644 index 0000000..08efd22 --- /dev/null +++ b/registry/components/HeroBillboardGallery.json @@ -0,0 +1,75 @@ +{ + "name": "HeroBillboardGallery", + "description": "Full-width hero section with centered text and 3-5 overlapping rotated images in gallery layout.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Explore Our Collection", + "minChars": 2, + "maxChars": 40 + }, + "description": { + "required": true, + "example": "Discover amazing products and experiences", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Featured", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "mediaItems": { + "required": true, + "example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' }]", + "note": "Array of 3-5 MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Supports 3-5 images maximum." + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'View Gallery', href: 'https://example.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for portfolios", + "Use for image galleries", + "Requires buttons?[]", + "Requires mediaItems[]" + ], + "dont": [ + "Do not use less than 5 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroBillboardRotatedCarousel.json b/registry/components/HeroBillboardRotatedCarousel.json new file mode 100644 index 0000000..640675a --- /dev/null +++ b/registry/components/HeroBillboardRotatedCarousel.json @@ -0,0 +1,80 @@ +{ + "name": "HeroBillboardRotatedCarousel", + "description": "Hero section with centered text content and angled/rotated carousel below. Features auto-playing carousel with scaled and rotated side cards.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Transform Your Workflow", + "minChars": 2, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "Experience the power of seamless collaboration and productivity tools designed for modern teams", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "New Release", + "minChars": 2, + "maxChars": 30 + } + }, + "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. All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "carouselItemRules": { + "required": true, + "minItems": 6, + "structure": { + "id": "string - Unique identifier (required)", + "imageSrc": "string - Image URL (optional)", + "videoSrc": "string - Video URL (optional, takes precedence over imageSrc)", + "imageAlt": "string - Alt text for image (optional)", + "videoAriaLabel": "string - ARIA label for video (optional)" + }, + "note": "Minimum 6 items required to prevent duplicate keys. Carousel displays 5 positions simultaneously (-2, -1, 0, 1, 2). Each item should have either imageSrc or videoSrc. Uses MediaContent component for rendering." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "carouselItems": "Array<{ id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)", + "autoPlay?": "boolean (default: true)", + "autoPlayInterval?": "number (default: 4000)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for portfolios", + "Use for image galleries", + "Use for product catalogs", + "Use for e-commerce", + "Requires buttons?[]", + "Requires carouselItems[]" + ], + "dont": [ + "Do not use less than 5 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroBillboardScroll.json b/registry/components/HeroBillboardScroll.json new file mode 100644 index 0000000..b12039d --- /dev/null +++ b/registry/components/HeroBillboardScroll.json @@ -0,0 +1,100 @@ +{ + "name": "HeroBillboardScroll", + "description": "Full-screen hero section with centered text and media card that animates with 3D perspective transforms on scroll (desktop only).", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Scroll Animations", + "minChars": 2, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "Experience smooth, performant animations as you scroll through your content", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Unleash the Power", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/dashboard.jpg", + "note": "Image to display in the animated card. Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/demo.mp4", + "note": "Video to display in the animated card. Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Dashboard preview", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "animationBehavior": { + "desktop": { + "rotateX": "Animates from 20deg to 0deg based on scroll progress", + "scale": "Animates from 1.05 to 1 based on scroll progress", + "height": "h-[75svh] (75% of viewport height)", + "note": "Uses Framer Motion's useScroll and useTransform for smooth scroll-linked animations" + }, + "mobile": { + "rotateX": "Static 20deg rotation (no animation)", + "scale": "No scale animation", + "height": "h-[50svh] (50% of viewport height)", + "note": "Separate static div implementation to prevent performance issues and hydration errors" + }, + "perspective": "1000px applied to container for 3D effect" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n console.log('Get Started clicked') }, { text: 'Learn More', href: 'about' }]} \n />\n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for product catalogs", + "Use for e-commerce", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroCarouselLogo.json b/registry/components/HeroCarouselLogo.json new file mode 100644 index 0000000..9fb957b --- /dev/null +++ b/registry/components/HeroCarouselLogo.json @@ -0,0 +1,78 @@ +{ + "name": "HeroCarouselLogo", + "description": "Full-screen hero section with auto-playing carousel background, large text logo at bottom that scales to fill container width, description and button row above, with progress bars and linear gradient blur overlay.", + "constraints": { + "textRules": { + "logoText": { + "required": true, + "example": "WEBILD", + "minChars": 2, + "maxChars": 20 + }, + "description": { + "required": true, + "example": "Create stunning, responsive websites with our comprehensive component library", + "minChars": 5, + "maxChars": 200 + } + }, + "mediaRules": { + "slides": { + "required": true, + "example": "[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }]", + "note": "Array of CarouselSlide objects. Each slide can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Video takes precedence over image if both provided in a slide." + }, + "autoplayDelay": { + "required": false, + "default": 3000, + "note": "Milliseconds between automatic slide transitions" + }, + "showDimOverlay": { + "required": false, + "default": false, + "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', href: 'https://github.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "logoText": "string", + "description": "string", + "buttons": "Array<{text: string, onClick?: () => void, href?: string}>", + "slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items", + "autoplayDelay?": "number (default: 3000)", + "showDimOverlay?": "boolean (default: false)", + "logoLineHeight?": "number (default: 1.1)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons[]", + "Requires slides[]" + ], + "dont": [ + "Do not use less than 5 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroLogo.json b/registry/components/HeroLogo.json new file mode 100644 index 0000000..c11b16a --- /dev/null +++ b/registry/components/HeroLogo.json @@ -0,0 +1,82 @@ +{ + "name": "HeroLogo", + "description": "Full-screen hero section with background media, large text logo at bottom that scales to fill container width, description and button row above, featuring a linear gradient blur overlay.", + "constraints": { + "textRules": { + "logoText": { + "required": true, + "example": "Webild", + "minChars": 2, + "maxChars": 20 + }, + "description": { + "required": true, + "example": "Building the future of web design with innovative solutions", + "minChars": 5, + "maxChars": 200 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-background.jpg", + "note": "Background image that fills the viewport. Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-background.mp4", + "note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Hero background", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "showDimOverlay": { + "required": false, + "default": false, + "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', href: 'https://github.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "logoText": "string", + "description": "string", + "buttons": "Array<{text: string, onClick?: () => void, href?: string}>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "showDimOverlay?": "boolean (default: false)", + "logoLineHeight?": "number (default: 1.1)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroLogoBillboard.json b/registry/components/HeroLogoBillboard.json new file mode 100644 index 0000000..9f56bc2 --- /dev/null +++ b/registry/components/HeroLogoBillboard.json @@ -0,0 +1,72 @@ +{ + "name": "HeroLogoBillboard", + "description": "Hero section with large text logo at top that scales to fill container width, description text, and single framed media (card or browser style) below.", + "constraints": { + "textRules": { + "logoText": { + "required": true, + "example": "klime studio", + "minChars": 2, + "maxChars": 30 + }, + "description": { + "required": true, + "example": "we help driven founders build the brands of tomorrow through websites, product design & branding.", + "minChars": 5, + "maxChars": 300 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-image.jpg", + "note": "Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-video.mp4", + "note": "Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Product showcase", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "frameStyle": { + "required": false, + "options": [ + "card", + "browser" + ], + "default": "card", + "note": "'card' displays media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls." + } + } + }, + "propsSchema": { + "logoText": "string", + "description": "string", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "frameStyle?": "'card' | 'browser' (default: 'card')", + "logoLineHeight?": "number (default: 1.1)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [ + "Do not use multiple items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroLogoBillboardSplit.json b/registry/components/HeroLogoBillboardSplit.json new file mode 100644 index 0000000..3282070 --- /dev/null +++ b/registry/components/HeroLogoBillboardSplit.json @@ -0,0 +1,91 @@ +{ + "name": "HeroLogoBillboardSplit", + "description": "Hero section with split layout (description left, buttons right), large text logo that scales to fill container width, and single framed media at bottom. Supports flex-col or flex-col-reverse layout order.", + "constraints": { + "textRules": { + "logoText": { + "required": true, + "example": "ACME", + "minChars": 2, + "maxChars": 30 + }, + "description": { + "required": true, + "example": "Create stunning, responsive websites with our comprehensive component library", + "minChars": 5, + "maxChars": 300 + } + }, + "layoutRules": { + "layoutOrder": { + "required": true, + "options": [ + "default", + "reverse" + ], + "note": "'default' displays split section (description/buttons) then logo (flex-col). 'reverse' displays logo then split section (flex-col-reverse)." + } + }, + "buttonRules": { + "buttons": { + "required": true, + "minItems": 1, + "maxItems": 2, + "note": "Only first 2 buttons are displayed using slice(0, 2). Uses theme.defaultButtonVariant for styling." + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-image.jpg", + "note": "Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-video.mp4", + "note": "Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Product showcase", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "frameStyle": { + "required": false, + "options": [ + "card", + "browser" + ], + "default": "card", + "note": "'card' displays media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls." + } + } + }, + "propsSchema": { + "logoText": "string", + "description": "string", + "buttons": "Array<{text: string, onClick?: () => void, href?: string}>", + "layoutOrder": "'default' | 'reverse'", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "frameStyle?": "'card' | 'browser' (default: 'card')", + "logoLineHeight?": "number (default: 1.1)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroOverlay.json b/registry/components/HeroOverlay.json new file mode 100644 index 0000000..576feab --- /dev/null +++ b/registry/components/HeroOverlay.json @@ -0,0 +1,105 @@ +{ + "name": "HeroOverlay", + "description": "Full-screen hero section with background image/video overlay, circular blur effect, and configurable text positioning (center or bottom-left).", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Build Modern Web Experiences", + "minChars": 2, + "maxChars": 40 + }, + "description": { + "required": true, + "example": "Create stunning, responsive websites with our comprehensive component library", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "New Release", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-background.jpg", + "note": "Background image that fills the viewport. Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-background.mp4", + "note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Hero background", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "textPosition": { + "required": false, + "options": [ + "center", + "bottom-left" + ], + "default": "bottom-left", + "note": "'center' positions text in the center of viewport, 'bottom-left' positions text at bottom-left corner" + }, + "showBlur": { + "required": false, + "default": true, + "note": "Controls circular blur effect with radial gradient. Blur follows text position (centered or bottom-left corner)" + }, + "showDimOverlay": { + "required": false, + "default": false, + "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', href: 'https://example.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "textPosition?": "'center' | 'bottom-left' (default: 'bottom-left')", + "showDimOverlay?": "boolean (default: false)", + "showBlur?": "boolean (default: true)", + "ariaLabel?": "string (default: 'Hero section')", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroSplit.json b/registry/components/HeroSplit.json new file mode 100644 index 0000000..b470bf7 --- /dev/null +++ b/registry/components/HeroSplit.json @@ -0,0 +1,96 @@ +{ + "name": "HeroSplit", + "description": "Split-layout hero section with text content on one side and single image/video on the other, with responsive centering.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Build Better Products", + "minChars": 2, + "maxChars": 36 + }, + "description": { + "required": true, + "example": "Create exceptional user experiences with our design system", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "New Release", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-image.jpg", + "note": "Supports external URLs with unoptimized prop" + }, + "videoSrc": { + "required": false, + "example": "/hero-video.mp4", + "note": "Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "Product showcase", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "imagePosition": { + "required": false, + "options": [ + "left", + "right" + ], + "default": "right" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections", + "onClick": "() => void - Additional click handler (optional)", + "props": "Partial - Additional button props like className, textClassName (optional)" + }, + "examples": [ + "{ text: 'Get Started', href: 'https://example.com' }", + "{ text: 'Learn More', href: 'about' }" + ], + "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "avatars?": "Avatar[] - Array of avatar objects with src and alt properties", + "avatarText?": "string - Text displayed next to the avatar group", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "ariaLabel?": "string (default: 'Hero section')", + "imagePosition?": "'left' | 'right' (default: 'right')", + "fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop", + "className?": "string" + }, + "usageExample": "\n \n", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Requires buttons?[]", + "Requires avatars?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/HeroSplitKpi.json b/registry/components/HeroSplitKpi.json new file mode 100644 index 0000000..f4d9885 --- /dev/null +++ b/registry/components/HeroSplitKpi.json @@ -0,0 +1,105 @@ +{ + "name": "HeroSplitKpi", + "description": "Split-layout hero with media image/video and three KPI metric boxes positioned around it.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "The Future of Supply Chain", + "minChars": 2, + "maxChars": 36 + }, + "description": { + "required": true, + "example": "Ship globally within 3 days post-production with smart fulfillment", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Trusted by 150+ Brands", + "minChars": 2, + "maxChars": 30 + } + }, + "kpiRules": { + "kpis": { + "required": true, + "note": "Array of exactly 3 KPI items. Each item has 'value' (the metric) and 'label' (description)", + "structure": { + "value": "string - The metric value (e.g., '99.8%', '10x', '4-10 Days')", + "label": "string - Description of the metric (e.g., 'Order Accuracy')" + }, + "example": "[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]" + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/hero-image.jpg", + "note": "Image displayed in scaled card wrapper" + }, + "videoSrc": { + "required": false, + "example": "/hero-video.mp4", + "note": "Video takes precedence over image if both provided" + }, + "imageAlt": { + "required": false, + "example": "Product showcase", + "note": "Empty string marks image as decorative (aria-hidden)" + }, + "imagePosition": { + "required": false, + "options": [ + "left", + "right" + ], + "default": "right" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional)", + "onClick": "() => void - Additional click handler (optional)" + } + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label", + "enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "avatars?": "Avatar[] - Array of avatar objects with src and alt properties", + "avatarText?": "string - Text displayed next to the avatar group", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Hero video')", + "ariaLabel?": "string (default: 'Hero section')", + "imagePosition?": "'left' | 'right' (default: 'right')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for statistics displays", + "Use for achievement showcases", + "Requires kpis[]", + "Requires buttons?[]", + "Requires avatars?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/InlineImageSplitTextAbout.json b/registry/components/InlineImageSplitTextAbout.json new file mode 100644 index 0000000..40cf29f --- /dev/null +++ b/registry/components/InlineImageSplitTextAbout.json @@ -0,0 +1,61 @@ +{ + "name": "InlineImageSplitTextAbout", + "description": "About section with dynamic heading composed of alternating text and inline image segments.", + "constraints": { + "textRules": { + "heading[].content": { + "required": "text segments require content", + "example": "Building the future with", + "minChars": 1, + "maxChars": 100, + "note": "Each text segment in the heading array" + } + }, + "imageRules": { + "heading[].src": { + "required": "image segments require src", + "example": "/brand/logo.png or https://example.com/image.png", + "note": "Supports local paths and external URLs. External URLs are rendered with unoptimized flag." + }, + "heading[].alt": { + "required": false, + "example": "Company logo", + "note": "Optional alt text for images. Omit or use empty string for decorative images (aria-hidden=true when empty)." + } + }, + "headingRules": { + "minSegments": 1, + "note": "heading array can contain any number of text and image segments in any order. Images automatically alternate rotation direction (1st: -rotate-12, 2nd: rotate-12, etc.)." + }, + "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. Border radius controlled by ThemeProvider's borderRadius." + } + }, + "propsSchema": { + "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>", + "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n \n", + "do": [ + "Use for about pages", + "Use for company information", + "Requires heading[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/Input.json b/registry/components/Input.json new file mode 100644 index 0000000..85fc7cf --- /dev/null +++ b/registry/components/Input.json @@ -0,0 +1,35 @@ +{ + "name": "Input", + "description": "Styled text input field with secondary-button styling and rounded-theme borders.", + "constraints": { + "textRules": { + "placeholder": { + "required": false, + "example": "Enter your name", + "minChars": 2, + "maxChars": 50 + } + } + }, + "propsSchema": { + "value": "string (required)", + "onChange": "(value: string) => void (required)", + "type?": "string (default: 'text')", + "placeholder?": "string", + "required?": "boolean (default: false)", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "className?": "string" + }, + "usageExample": " setName(value)} type=\"text\" placeholder=\"Name\" required />", + "do": [ + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MediaAbout.json b/registry/components/MediaAbout.json new file mode 100644 index 0000000..3dba4ea --- /dev/null +++ b/registry/components/MediaAbout.json @@ -0,0 +1,84 @@ +{ + "name": "MediaAbout", + "description": "Full-width media about section with centered TextBox content overlaid on image or video.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Elevate Your Experience", + "minChars": 2, + "maxChars": 100 + }, + "description": { + "required": true, + "example": "Discover a new way to connect, create, and inspire with our innovative solutions.", + "minChars": 10, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "About Us", + "minChars": 2, + "maxChars": 30 + } + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/about-hero.jpg", + "note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals." + }, + "videoSrc": { + "required": false, + "example": "/about-video.mp4", + "note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content." + }, + "imageAlt": { + "required": false, + "example": "Our team in action", + "note": "Alt text for image. Defaults to empty string (decorative)." + }, + "videoAriaLabel": { + "required": false, + "example": "About us video", + "note": "ARIA label for video accessibility." + } + }, + "buttonRules": { + "maxButtons": 2, + "minButtons": 0, + "note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string", + "videoAriaLabel?": "string", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Use for product catalogs", + "Use for e-commerce", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MediaSplitTabsAbout.json b/registry/components/MediaSplitTabsAbout.json new file mode 100644 index 0000000..c416874 --- /dev/null +++ b/registry/components/MediaSplitTabsAbout.json @@ -0,0 +1,90 @@ +{ + "name": "MediaSplitTabsAbout", + "description": "Split-layout about section with interactive tabs, animated descriptions, and 60/40 grid with media.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Why Choose Us", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": false, + "example": "We deliver excellence across every aspect of our work", + "minChars": 10, + "maxChars": 200 + } + }, + "tabRules": { + "minTabs": 2, + "maxTabs": 5, + "structure": { + "id": "string - Unique identifier (required)", + "label": "string - Tab button text (required)", + "description": "string - Description shown when tab is active (required)" + }, + "note": "First tab is selected by default. Tab indicator dot animates smoothly between tabs." + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/team-photo.jpg", + "note": "Either imageSrc or videoSrc should be provided." + }, + "videoSrc": { + "required": false, + "example": "/intro-video.mp4", + "note": "Either imageSrc or videoSrc should be provided." + }, + "imageAlt": { + "required": false, + "example": "Team collaboration", + "note": "Alt text for image." + }, + "videoAriaLabel": { + "required": false, + "example": "Introduction video", + "note": "ARIA label for video accessibility." + }, + "imagePosition": { + "required": false, + "default": "right", + "options": [ + "left", + "right" + ], + "note": "Position of media card relative to content card." + } + } + }, + "propsSchema": { + "title": "string", + "description?": "string", + "tabs": "Array<{ id: string, label: string, description: string }> - Tab options for content switching", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string", + "videoAriaLabel?": "string", + "imagePosition?": "'left' | 'right' (default: 'right')", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Requires tabs[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardEleven.json b/registry/components/MetricCardEleven.json new file mode 100644 index 0000000..57cacef --- /dev/null +++ b/registry/components/MetricCardEleven.json @@ -0,0 +1,95 @@ +{ + "name": "MetricCardEleven", + "description": "Metrics section with paired text and media cards. Each metric displays a value card alongside an image/video card in a 2-column layout.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Impact", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "See the results we've delivered for our clients", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Results", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "value": { + "required": true, + "example": "10M+", + "minChars": 1, + "maxChars": 15, + "note": "Large metric value displayed prominently at top of text card" + }, + "title": { + "required": true, + "example": "Organic Views", + "minChars": 2, + "maxChars": 50, + "note": "Metric title displayed at bottom of text card, truncates" + }, + "description": { + "required": true, + "example": "Growth through smart content strategy", + "minChars": 5, + "maxChars": 100, + "note": "Metric description below accent divider, truncates to single line" + }, + "media": { + "required": true, + "note": "Either imageSrc or videoSrc must be provided for each metric" + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 6, + "recommendedItems": "2-4" + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, value: string, title: string, description: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", + "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'", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items", + "Do not use more than 6 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardFourteen.json b/registry/components/MetricCardFourteen.json new file mode 100644 index 0000000..c74626c --- /dev/null +++ b/registry/components/MetricCardFourteen.json @@ -0,0 +1,69 @@ +{ + "name": "MetricCardFourteen", + "description": "Metrics section with animated title, tag badge, and metric cards with large values and descriptions.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "We're committed to sustainability and reducing our environmental impact.", + "minChars": 10, + "maxChars": 200 + }, + "tag": { + "required": true, + "example": "Impact", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for each metric" + }, + "value": { + "required": true, + "example": "16x", + "minChars": 1, + "maxChars": 10, + "note": "Large metric value displayed prominently" + }, + "description": { + "required": true, + "example": "By using 80% less steel, we've lowered our carbon footprint by 16x.", + "minChars": 10, + "maxChars": 200, + "note": "Description text below the divider" + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 4, + "recommendedItems": 2 + } + }, + "propsSchema": { + "title": "string", + "tag": "string", + "metrics": "Array<{ id: string, value: string, description: string }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]" + ], + "dont": [ + "Do not use more than 4 items", + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardOne.json b/registry/components/MetricCardOne.json new file mode 100644 index 0000000..08d1471 --- /dev/null +++ b/registry/components/MetricCardOne.json @@ -0,0 +1,91 @@ +{ + "name": "MetricCardOne", + "description": "Metric card with large gradient value text, title, description, and icon badge.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Impact", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Key metrics that showcase our growth and success", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Statistics", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "value": { + "required": true, + "example": "100", + "minChars": 1, + "maxChars": 5, + "note": "Large metric value displayed with gradient effect." + }, + "title": { + "required": true, + "example": "million", + "minChars": 2, + "maxChars": 30, + "note": "Metric label displayed below value with negative margin overlap" + }, + "description": { + "required": true, + "example": "Active users worldwide", + "minChars": 5, + "maxChars": 150, + "note": "Supporting description text displayed below title" + }, + "icon": { + "required": true, + "example": "TrendingUp", + "note": "Lucide icon displayed in bottom-left corner with primary-button styling" + } + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardSeven.json b/registry/components/MetricCardSeven.json new file mode 100644 index 0000000..fadbaf5 --- /dev/null +++ b/registry/components/MetricCardSeven.json @@ -0,0 +1,90 @@ +{ + "name": "MetricCardSeven", + "description": "Metric card with large accent value, title, and feature list with checkmarks.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Our Impact", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Key metrics that showcase our growth", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Stats", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "value": { + "required": true, + "example": "15+", + "minChars": 1, + "maxChars": 10, + "note": "Large metric value displayed at top of card in accent color" + }, + "title": { + "required": true, + "example": "Years in business consulting", + "minChars": 5, + "maxChars": 60, + "note": "Metric description displayed below value" + }, + "items": { + "required": true, + "example": "['8+ industries served', '5+ countries reached']", + "minItems": 1, + "maxItems": 5, + "note": "Array of supporting bullet points displayed with checkmarks" + } + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, value: string, title: string, items: string[] }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardTen.json b/registry/components/MetricCardTen.json new file mode 100644 index 0000000..f5475e5 --- /dev/null +++ b/registry/components/MetricCardTen.json @@ -0,0 +1,106 @@ +{ + "name": "MetricCardTen", + "description": "Job listing style metric cards with title, subtitle, category indicator, value, and optional footer buttons.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Open Positions", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Join our team and help shape the future of AI", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Careers", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "title": { + "required": true, + "example": "Senior Software Engineer, Platform", + "minChars": 5, + "maxChars": 80, + "note": "Main title displayed at top of card, truncates if too long" + }, + "subtitle": { + "required": true, + "example": "San Francisco, CA · Full-time · Remote eligible", + "minChars": 5, + "maxChars": 100, + "note": "Secondary info like location, type, or details" + }, + "category": { + "required": true, + "example": "Engineering", + "minChars": 2, + "maxChars": 30, + "note": "Category label with dot indicator, truncates on overflow" + }, + "value": { + "required": true, + "example": "$185K – $265K", + "minChars": 1, + "maxChars": 25, + "note": "Value displayed on bottom right (salary, price, etc.)" + }, + "buttons": { + "required": false, + "maxItems": 2, + "note": "Optional buttons in footer section with accent background" + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 12, + "recommendedItems": "3-6" + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", + "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' | 'centered' | 'left' | 'right' | 'spread'", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for pricing pages", + "Use for subscription tiers", + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 12 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardThree.json b/registry/components/MetricCardThree.json new file mode 100644 index 0000000..2e7dfa5 --- /dev/null +++ b/registry/components/MetricCardThree.json @@ -0,0 +1,85 @@ +{ + "name": "MetricCardThree", + "description": "Metric card with icon badge, title header, and large value display.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Performance Metrics", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Track your key performance indicators", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "KPIs", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "icon": { + "required": true, + "example": "TrendingUp", + "note": "Lucide icon displayed in primary-button styled circular badge" + }, + "title": { + "required": true, + "example": "Conversions", + "minChars": 2, + "maxChars": 30, + "note": "Metric category/label displayed next to icon" + }, + "value": { + "required": true, + "example": "7,000+", + "minChars": 1, + "maxChars": 15, + "note": "Large metric value displayed below icon and title" + } + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricCardTwo.json b/registry/components/MetricCardTwo.json new file mode 100644 index 0000000..edeb636 --- /dev/null +++ b/registry/components/MetricCardTwo.json @@ -0,0 +1,79 @@ +{ + "name": "MetricCardTwo", + "description": "Simple metric card with large value and description text.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Key Metrics", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Performance indicators at a glance", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Stats", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "value": { + "required": true, + "example": "98%", + "minChars": 1, + "maxChars": 15, + "note": "Large metric value displayed prominently" + }, + "description": { + "required": true, + "example": "Customer Satisfaction Rate", + "minChars": 5, + "maxChars": 100, + "note": "Metric label/description displayed below value" + } + } + }, + "propsSchema": { + "metrics": "Array<{ id: string, value: string, description: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "uniformGridCustomHeightClasses?": "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", + "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: 'Metrics section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/MetricSplitMediaAbout.json b/registry/components/MetricSplitMediaAbout.json new file mode 100644 index 0000000..46ef7bc --- /dev/null +++ b/registry/components/MetricSplitMediaAbout.json @@ -0,0 +1,63 @@ +{ + "name": "MetricSplitMediaAbout", + "description": "Split-layout about section with text, metrics cards, and media in a 2-column grid.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "We help automate what matters most", + "minChars": 10, + "maxChars": 100 + }, + "description": { + "required": true, + "example": "Hamilton, a growing e-commerce business, was overwhelmed by repetitive tasks. We built custom automation that integrated with their tools.", + "minChars": 20, + "maxChars": 500 + }, + "tag": { + "required": false, + "example": "Case study", + "minChars": 2, + "maxChars": 30 + } + }, + "metricRules": { + "minMetrics": 1, + "maxMetrics": 2, + "structure": { + "value": "string - Large metric value (required, e.g., '50+', '40%', '10x')", + "title": "string - Metric label/title (required, e.g., 'Hours saved every month')" + }, + "note": "Provide 1-2 metrics for optimal layout. Grid displays 1 metric as single column, 2 metrics as 2 columns on desktop." + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "metrics": "Array<{ value: string, title: string }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string", + "videoAriaLabel?": "string (default: 'About section video')", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n\n \n", + "do": [ + "Use for about pages", + "Use for company information", + "Use for statistics displays", + "Use for achievement showcases", + "Requires metrics[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarLayoutFloatingInline.json b/registry/components/NavbarLayoutFloatingInline.json new file mode 100644 index 0000000..03f0992 --- /dev/null +++ b/registry/components/NavbarLayoutFloatingInline.json @@ -0,0 +1,69 @@ +{ + "name": "NavbarLayoutFloatingInline", + "description": "Floating inline navbar with centered links, left-aligned logo, and right-aligned call-to-action button.", + "constraints": { + "minLinks": 3, + "maxLinks": 6, + "preferredCount": 4, + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "buttonRules": { + "text": { + "required": true, + "minChars": 2, + "maxChars": 24, + "example": "Get Started" + }, + "href": { + "required": false, + "format": "url | section-id", + "example": "https://webild.io" + }, + "onClick": { + "required": false, + "note": "Optional click handler" + } + }, + "linkRules": { + "name": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "About" + }, + "id": { + "required": true, + "format": "section-id | url", + "examples": [ + "about", + "services", + "https://github.com", + "www.example.com" + ], + "behavior": "Internal IDs scroll to section, URLs open in new tab" + } + } + }, + "propsSchema": { + "navItems": "Array<{name: string, id: string}>", + "brandName?": "string (default: 'Webild')", + "button": "{text: string, onClick?: () => void, href?: string}", + "className?": "string (default: '')" + }, + "usageExample": "", + "do": [ + "Use for general use", + "Requires navItems[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarLayoutFloatingOverlay.json b/registry/components/NavbarLayoutFloatingOverlay.json new file mode 100644 index 0000000..16b67d5 --- /dev/null +++ b/registry/components/NavbarLayoutFloatingOverlay.json @@ -0,0 +1,69 @@ +{ + "name": "NavbarLayoutFloatingOverlay", + "description": "Floating rounded navbar with right‑side CTA and a circular menu button. Clicking the button opens a rounded overlay panel with the site menu.", + "constraints": { + "minLinks": 2, + "maxLinks": 8, + "preferredCount": 5, + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "buttonRules": { + "text": { + "required": true, + "minChars": 2, + "maxChars": 24, + "example": "Get Started" + }, + "href": { + "required": false, + "format": "url | section-id", + "example": "https://webild.io" + }, + "onClick": { + "required": false, + "note": "Optional click handler" + } + }, + "linkRules": { + "name": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "About" + }, + "id": { + "required": true, + "format": "section-id | url", + "examples": [ + "about", + "services", + "https://github.com", + "www.example.com" + ], + "behavior": "Internal IDs scroll to section, URLs open in new tab" + } + } + }, + "propsSchema": { + "navItems": "Array<{name: string, id: string}>", + "className?": "string", + "brandName?": "string (default: 'Webild')", + "button": "{text: string, onClick?: () => void, href?: string}" + }, + "usageExample": "", + "do": [ + "Use for general use", + "Requires navItems[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarStyleApple.json b/registry/components/NavbarStyleApple.json new file mode 100644 index 0000000..99fbdf7 --- /dev/null +++ b/registry/components/NavbarStyleApple.json @@ -0,0 +1,51 @@ +{ + "name": "NavbarStyleApple", + "description": "Minimal Apple-style navigation bar with brand/logo on the left and inline navigation links aligned right.", + "constraints": { + "minLinks": 3, + "maxLinks": 7, + "preferredCount": 5, + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "linkRules": { + "name": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "About" + }, + "id": { + "required": true, + "format": "section-id | url", + "examples": [ + "about", + "services", + "https://github.com", + "www.example.com" + ], + "behavior": "Internal IDs scroll to section, URLs open in new tab" + } + } + }, + "propsSchema": { + "navItems": "Array<{name: string, id: string}>", + "brandName?": "string (default: 'Webild')" + }, + "usageExample": "", + "do": [ + "Use for product catalogs", + "Use for e-commerce", + "Requires navItems[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarStyleCentered.json b/registry/components/NavbarStyleCentered.json new file mode 100644 index 0000000..9785b4b --- /dev/null +++ b/registry/components/NavbarStyleCentered.json @@ -0,0 +1,72 @@ +{ + "name": "NavbarStyleCentered", + "description": "Centered dropdown navigation with animated expand/collapse and staggered link reveals.", + "constraints": { + "minLinks": 3, + "maxLinks": 6, + "preferredCount": 5, + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "buttonRules": { + "text": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "Get Started" + }, + "href": { + "required": false, + "format": "url | section-id", + "example": "contact" + }, + "onClick": { + "required": false, + "note": "Optional click handler" + } + }, + "linkRules": { + "name": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "About" + }, + "id": { + "required": true, + "format": "section-id | url", + "examples": [ + "about", + "services", + "https://github.com", + "www.example.com" + ], + "behavior": "Internal IDs scroll to section, URLs open in new tab" + } + } + }, + "propsSchema": { + "navItems": "Array<{name: string, id: string}>", + "button": "{text: string, onClick?: () => void, href?: string}", + "brandName?": "string (default: 'Webild')", + "className?": "string (default: '')" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires navItems[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarStyleFullscreen.json b/registry/components/NavbarStyleFullscreen.json new file mode 100644 index 0000000..b5ec216 --- /dev/null +++ b/registry/components/NavbarStyleFullscreen.json @@ -0,0 +1,67 @@ +{ + "name": "NavbarStyleFullscreen", + "description": "Fullscreen overlay navigation with animated menu reveal and staggered link animations.", + "constraints": { + "minLinks": 3, + "maxLinks": 5, + "preferredCount": 5, + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "linkRules": { + "name": { + "required": true, + "minChars": 2, + "maxChars": 15, + "example": "About" + }, + "id": { + "required": true, + "format": "section-id | url", + "examples": [ + "about", + "services", + "https://github.com", + "www.example.com" + ], + "behavior": "Internal IDs scroll to section, URLs open in new tab" + } + }, + "bottomTextRules": { + "bottomLeftText": { + "required": false, + "minChars": 2, + "maxChars": 30, + "example": "Global Community" + }, + "bottomRightText": { + "required": false, + "minChars": 2, + "maxChars": 30, + "example": "hello@example.com" + } + } + }, + "propsSchema": { + "navItems": "Array<{name: string, id: string}>", + "brandName?": "string (default: 'Webild')", + "bottomLeftText?": "string (default: 'Global Community')", + "bottomRightText?": "string (default: 'hello@example.com')" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Requires navItems[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/NavbarStyleMinimal.json b/registry/components/NavbarStyleMinimal.json new file mode 100644 index 0000000..a7f1cdb --- /dev/null +++ b/registry/components/NavbarStyleMinimal.json @@ -0,0 +1,45 @@ +{ + "name": "NavbarStyleMinimal", + "description": "A minimal navbar with left-aligned logo and optional right-aligned call-to-action button.", + "constraints": { + "brandRules": { + "required": false, + "minChars": 2, + "maxChars": 20, + "example": "Webild", + "fallbackBehavior": "Shows brandName text" + }, + "buttonRules": { + "text": { + "required": true, + "minChars": 2, + "maxChars": 24, + "example": "Get Started" + }, + "href": { + "required": false, + "format": "url | section-id", + "example": "https://webild.io" + }, + "onClick": { + "required": false, + "note": "Optional click handler" + } + } + }, + "propsSchema": { + "brandName?": "string (default: 'Webild')", + "button": "{text: string, onClick?: () => void, href?: string}", + "className?": "string (default: '')" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PlainBackground.json b/registry/components/PlainBackground.json new file mode 100644 index 0000000..436c889 --- /dev/null +++ b/registry/components/PlainBackground.json @@ -0,0 +1,18 @@ +{ + "name": "PlainBackground", + "description": "Simple solid background using theme background color.", + "constraints": {}, + "propsSchema": { + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardEight.json b/registry/components/PricingCardEight.json new file mode 100644 index 0000000..b75e418 --- /dev/null +++ b/registry/components/PricingCardEight.json @@ -0,0 +1,84 @@ +{ + "name": "PricingCardEight", + "description": "Pricing card with nested card layout featuring badge, price, buttons in secondary-button container, and feature list below.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Choose Your Plan", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Select the perfect plan for your needs", + "minChars": 10, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "planRules": { + "minPlans": 1, + "maxPlans": 6, + "structure": { + "id": "string - Unique identifier (required)", + "badge": "string - Badge text, e.g., 'Most Popular' (required)", + "badgeIcon": "LucideIcon - Optional icon for badge", + "price": "string - Price display, e.g., '$29/mo' (required)", + "subtitle": "string - Subtitle below price, e.g., 'Perfect for small teams' (required)", + "buttons": "Array<{text: string, onClick?: () => void, href?: string}> - Action buttons, max 2 (required)", + "features": "string[] - List of features included (required)" + }, + "note": "Each plan displays in a nested card layout with secondary-button styling for the top section." + }, + "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": "Buttons render full-width inside secondary-button container. Button variant controlled by ThemeProvider." + } + }, + "propsSchema": { + "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", + "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'", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Pricing section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardFive.json b/registry/components/PricingCardFive.json new file mode 100644 index 0000000..58bd7cc --- /dev/null +++ b/registry/components/PricingCardFive.json @@ -0,0 +1,106 @@ +{ + "name": "PricingCardFive", + "description": "Vertical stack pricing cards with split layout showing plan details and feature checklist.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Simple, Transparent Pricing", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Choose the plan that fits your needs", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "planRules": { + "id": { + "required": true, + "example": "monthly-retainer", + "minChars": 1, + "maxChars": 30 + }, + "tag": { + "required": true, + "example": "Monthly Retainer Plan", + "minChars": 2, + "maxChars": 40 + }, + "price": { + "required": true, + "example": "$5,000", + "minChars": 1, + "maxChars": 20 + }, + "period": { + "required": true, + "example": "/m", + "minChars": 1, + "maxChars": 10 + }, + "description": { + "required": true, + "example": "Scale design, no-code builds & copy quicker than recruiting in-house.", + "minChars": 10, + "maxChars": 200 + }, + "button": { + "required": true, + "note": "ButtonConfig with text and href or onClick" + }, + "featuresTitle": { + "required": true, + "example": "What's Included:", + "minChars": 2, + "maxChars": 50 + }, + "features": { + "required": true, + "example": [ + "Unlimited design requests", + "48-hour turnaround" + ], + "note": "Array of feature strings displayed as checklist" + } + } + }, + "propsSchema": { + "plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Pricing section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardNine.json b/registry/components/PricingCardNine.json new file mode 100644 index 0000000..43056cd --- /dev/null +++ b/registry/components/PricingCardNine.json @@ -0,0 +1,99 @@ +{ + "name": "PricingCardNine", + "description": "Pricing cards with image, price tag, title, feature checklist, and CTA button.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Coaching Plans", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Choose the plan that fits your goals", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "planRules": { + "id": { + "required": true, + "example": "basic", + "minChars": 1, + "maxChars": 30 + }, + "title": { + "required": true, + "example": "Basic", + "minChars": 2, + "maxChars": 40 + }, + "price": { + "required": true, + "example": "$59", + "minChars": 1, + "maxChars": 20 + }, + "period": { + "required": true, + "example": "/month", + "minChars": 1, + "maxChars": 10 + }, + "imageSrc": { + "required": true, + "example": "/images/coaching-basic.jpg", + "note": "Image for the plan card" + }, + "button": { + "required": true, + "note": "ButtonConfig with text and href or onClick" + }, + "features": { + "required": true, + "example": [ + "Free initial consultation", + "Weekly checking" + ], + "note": "Array of feature strings displayed as checklist" + } + } + }, + "propsSchema": { + "plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc: string, imageAlt?: string }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Pricing section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardOne.json b/registry/components/PricingCardOne.json new file mode 100644 index 0000000..6209ebf --- /dev/null +++ b/registry/components/PricingCardOne.json @@ -0,0 +1,100 @@ +{ + "name": "PricingCardOne", + "description": "Pricing card with badge, price, subtitle, and feature list with checkmarks.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Choose Your Plan", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Select the perfect plan for your needs", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "pricingPlanRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "badge": { + "required": true, + "example": "Most Popular", + "minChars": 2, + "maxChars": 30, + "note": "Required for visual consistency across all cards" + }, + "price": { + "required": true, + "example": "$29/mo", + "minChars": 1, + "maxChars": 20 + }, + "subtitle": { + "required": true, + "example": "Perfect for small teams", + "minChars": 5, + "maxChars": 100, + "note": "Required for visual consistency across all cards" + }, + "features": { + "required": true, + "example": [ + "Up to 10 team members", + "100GB storage", + "Priority support" + ], + "note": "Array of feature strings, required for visual consistency" + }, + "badgeIcon": { + "required": false, + "example": "Sparkles", + "note": "Optional Lucide icon to display next to badge" + } + } + }, + "propsSchema": { + "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Pricing section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardThree.json b/registry/components/PricingCardThree.json new file mode 100644 index 0000000..8288ffd --- /dev/null +++ b/registry/components/PricingCardThree.json @@ -0,0 +1,111 @@ +{ + "name": "PricingCardThree", + "description": "Pricing card with optional floating badge, price, plan name, two CTA buttons, and feature list.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Choose Your Plan", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Select the perfect plan for your needs", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "pricingPlanRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "badge": { + "required": false, + "example": "Most popular plan", + "minChars": 2, + "maxChars": 40, + "note": "Optional badge that floats above the card. Can be on ANY plan. Always exists but uses visible/invisible for consistent spacing." + }, + "badgeIcon": { + "required": false, + "example": "Sparkles", + "note": "Optional Lucide icon to display next to badge" + }, + "price": { + "required": true, + "example": "$29/mo", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Business plan", + "minChars": 2, + "maxChars": 50, + "note": "Plan name displayed below price" + }, + "buttons": { + "required": true, + "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": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "features": { + "required": true, + "example": [ + "Up to 10 team members", + "100GB storage", + "Priority support" + ], + "note": "Array of feature strings, required for visual consistency" + } + } + }, + "propsSchema": { + "plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Pricing section')", + "className?": "string" + }, + "usageExample": " console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 10 users', '20GB storage', 'Email support'] }, { id: '2', badge: 'Most popular plan', badgeIcon: Sparkles, price: '$20/mo', name: 'Business plan', buttons: [{ text: 'Get started', onClick: () => console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 20 users', '40GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/PricingCardTwo.json b/registry/components/PricingCardTwo.json new file mode 100644 index 0000000..96ffcc6 --- /dev/null +++ b/registry/components/PricingCardTwo.json @@ -0,0 +1,111 @@ +{ + "name": "PricingCardTwo", + "description": "Pricing card with badge, price, subtitle, two CTA buttons, and feature list with checkmarks.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Choose Your Plan", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Select the perfect plan for your needs", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Pricing", + "minChars": 2, + "maxChars": 30 + } + }, + "pricingPlanRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "badge": { + "required": true, + "example": "Business Plan", + "minChars": 2, + "maxChars": 30, + "note": "Required for visual consistency across all cards" + }, + "price": { + "required": true, + "example": "$29/mo", + "minChars": 1, + "maxChars": 20 + }, + "subtitle": { + "required": true, + "example": "Perfect for small teams", + "minChars": 5, + "maxChars": 100, + "note": "Required for visual consistency across all cards" + }, + "buttons": { + "required": true, + "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": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "features": { + "required": true, + "example": [ + "Up to 10 team members", + "100GB storage", + "Priority support" + ], + "note": "Array of feature strings, required for visual consistency" + }, + "badgeIcon": { + "required": false, + "example": "Sparkles", + "note": "Optional Lucide icon to display next to badge" + } + } + }, + "propsSchema": { + "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Pricing section')", + "className?": "string" + }, + "usageExample": " console.log('clicked') }, { text: 'Chat to Sales', onClick: () => console.log('chat') }], features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for pricing pages", + "Use for subscription tiers", + "Requires plans[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/ProductCardFour.json b/registry/components/ProductCardFour.json new file mode 100644 index 0000000..4ddfd2a --- /dev/null +++ b/registry/components/ProductCardFour.json @@ -0,0 +1,92 @@ +{ + "name": "ProductCardFour", + "description": "E-commerce product card with name, variant description, and price in horizontal layout with favorite toggle.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Featured Products", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Discover our latest collection of premium apparel", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "New Arrivals", + "minChars": 2, + "maxChars": 30 + } + }, + "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. All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "productCardRules": { + "name": { + "required": true, + "example": "Represent X Puma Graphic T-Shirt", + "minChars": 2, + "maxChars": 100 + }, + "price": { + "required": true, + "example": "$100", + "note": "Display price with currency symbol" + }, + "variant": { + "required": true, + "example": "Dark Grey 3 Colors", + "minChars": 2, + "maxChars": 100, + "note": "Product variant description (color, size options, etc.)" + }, + "imageSrc": { + "required": true, + "example": "/product.jpg", + "note": "Product image URL" + } + } + }, + "propsSchema": { + "products": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "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' (required)", + "ariaLabel?": "string (default: 'Product section')", + "className?": "string" + }, + "usageExample": " console.log('favorited'), onProductClick: () => window.open('/product', '_blank') }]} title=\"Featured Products\" description=\"Discover our latest collection\" tag=\"New Arrivals\" tagIcon={Package} textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" 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 + } +} \ No newline at end of file diff --git a/registry/components/ProductCardOne.json b/registry/components/ProductCardOne.json new file mode 100644 index 0000000..45a6178 --- /dev/null +++ b/registry/components/ProductCardOne.json @@ -0,0 +1,89 @@ +{ + "name": "ProductCardOne", + "description": "Simple product card showing name, price, and arrow icon for viewing details.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Featured Products", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Discover our latest collection of premium products", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "New Arrivals", + "minChars": 2, + "maxChars": 30 + } + }, + "productCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Eclipse Motion Pro", + "minChars": 2, + "maxChars": 50 + }, + "price": { + "required": true, + "example": "$150", + "minChars": 1, + "maxChars": 20 + } + }, + "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, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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=\"Featured Products\" 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 + } +} \ No newline at end of file diff --git a/registry/components/ProductCardThree.json b/registry/components/ProductCardThree.json new file mode 100644 index 0000000..9bcccdf --- /dev/null +++ b/registry/components/ProductCardThree.json @@ -0,0 +1,94 @@ +{ + "name": "ProductCardThree", + "description": "E-commerce product card with quantity selector and add-to-cart price button.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Shop Now", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "Add your favorite items to cart", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Limited Stock", + "minChars": 2, + "maxChars": 30 + } + }, + "productCardRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "TIMBUK2 Classic Messenger Bag", + "minChars": 2, + "maxChars": 50 + }, + "price": { + "required": true, + "example": "$119.00", + "minChars": 1, + "maxChars": 20 + }, + "initialQuantity": { + "required": false, + "example": 1, + "note": "Default quantity value (default: 1)" + } + }, + "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, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial> }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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'), onQuantityChange: (qty) => console.log(qty) }]} title=\"Shop Now\" 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 + } +} \ No newline at end of file diff --git a/registry/components/ProductCardTwo.json b/registry/components/ProductCardTwo.json new file mode 100644 index 0000000..0e7434d --- /dev/null +++ b/registry/components/ProductCardTwo.json @@ -0,0 +1,106 @@ +{ + "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' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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 + } +} \ No newline at end of file diff --git a/registry/components/RadialGradientBackground.json b/registry/components/RadialGradientBackground.json new file mode 100644 index 0000000..5e93945 --- /dev/null +++ b/registry/components/RadialGradientBackground.json @@ -0,0 +1,24 @@ +{ + "name": "RadialGradientBackground", + "description": "Customizable radial gradient background with theme color integration.", + "constraints": {}, + "propsSchema": { + "className?": "string", + "centerColor?": "string (default: 'var(--background)')", + "edgeColor?": "string (default: 'var(--color-primary-cta)')", + "size?": "string (default: '125% 125%')", + "position?": "string (default: '50% 10%')" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/RotatedRaysBackground.json b/registry/components/RotatedRaysBackground.json new file mode 100644 index 0000000..4da2d79 --- /dev/null +++ b/registry/components/RotatedRaysBackground.json @@ -0,0 +1,25 @@ +{ + "name": "RotatedRaysBackground", + "description": "Atmospheric light rays emanating from a rotated origin point with blur and radial gradient effects, with optional grid overlay.", + "constraints": {}, + "propsSchema": { + "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.", + "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays" + ], + "dont": [ + "Do not use multiple items", + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/SplitAbout.json b/registry/components/SplitAbout.json new file mode 100644 index 0000000..476eb90 --- /dev/null +++ b/registry/components/SplitAbout.json @@ -0,0 +1,95 @@ +{ + "name": "SplitAbout", + "description": "Split-layout about section with bullet points on one side and image/video on the other.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "About Us", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Learn more about our mission, values, and what drives us forward", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Our Story", + "minChars": 2, + "maxChars": 30 + } + }, + "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. All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "bulletPointRules": { + "structure": { + "title": "string - Bullet point heading (required)", + "description": "string - Bullet point text (required)", + "icon": "LucideIcon - Optional icon displayed above title" + }, + "note": "Bullet points are separated by horizontal dividers. Border radius controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level." + }, + "mediaRules": { + "imageSrc": { + "required": false, + "example": "/about-image.jpg", + "note": "Supports external URLs" + }, + "videoSrc": { + "required": false, + "example": "/about-video.mp4", + "note": "Takes precedence over imageSrc if both provided" + }, + "imageAlt": { + "required": false, + "example": "About us", + "note": "Empty string marks image as decorative (aria-hidden)" + } + } + }, + "propsSchema": { + "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}>", + "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'About section video')", + "ariaLabel?": "string (default: 'About section')", + "imagePosition?": "'left' | 'right' (default: 'right')", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n \n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Requires titleSegments?[]", + "Requires buttons?[]", + "Requires bulletPoints[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardEleven.json b/registry/components/TeamCardEleven.json new file mode 100644 index 0000000..4bbc0fa --- /dev/null +++ b/registry/components/TeamCardEleven.json @@ -0,0 +1,110 @@ +{ + "name": "TeamCardEleven", + "description": "Team directory section with groups of members displayed in a list layout with avatar, title, subtitle, and detail.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Meet Our Team", + "minChars": 2, + "maxChars": 60 + }, + "description": { + "required": true, + "example": "The talented people behind our success", + "minChars": 5, + "maxChars": 200 + }, + "tag": { + "required": false, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "groupRules": { + "minItems": 1, + "maxItems": 4, + "recommendedItems": "1-3", + "id": { + "required": true, + "example": "global", + "note": "Unique identifier for the group" + }, + "groupTitle": { + "required": true, + "example": "Global", + "minChars": 2, + "maxChars": 30 + } + }, + "memberRules": { + "minItems": 1, + "maxItems": 10, + "recommendedItems": "2-6", + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for the member" + }, + "title": { + "required": true, + "example": "Mihai Toma", + "minChars": 2, + "maxChars": 50 + }, + "subtitle": { + "required": true, + "example": "Partner", + "minChars": 2, + "maxChars": 50 + }, + "detail": { + "required": true, + "example": "mihai@company.com", + "minChars": 2, + "maxChars": 100 + }, + "imageSrc": { + "required": false, + "example": "/team/mihai.jpg", + "note": "Avatar image" + }, + "videoSrc": { + "required": false, + "example": "/team/mihai.mp4", + "note": "Video alternative to image" + } + } + }, + "propsSchema": { + "groups": "Array<{ id: string, groupTitle: string, members: Array<{ id: string, title: string, subtitle: string, detail: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }> }> (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for contact pages", + "Use for lead generation", + "Use for team pages", + "Use for staff directories", + "Requires groups[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardFive.json b/registry/components/TeamCardFive.json new file mode 100644 index 0000000..4c3dbe6 --- /dev/null +++ b/registry/components/TeamCardFive.json @@ -0,0 +1,106 @@ +{ + "name": "TeamCardFive", + "description": "Team section with overlapping portrait cards in responsive flex layout showing centered vertical cards with name and role.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Meet Our Team", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "The talented people behind our success", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "teamMemberRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Sarah Johnson", + "minChars": 2, + "maxChars": 50, + "note": "Team member name displayed at 2xl font-medium, centered with truncate" + }, + "role": { + "required": true, + "example": "CEO & Founder", + "minChars": 2, + "maxChars": 50, + "note": "Role/title displayed at base size with 75% opacity, centered with truncate" + }, + "imageSrc": { + "required": false, + "example": "/team/sarah.jpg", + "note": "Image path for team member photo (aspect-square in card wrapper with p-2, rounded-theme)" + }, + "videoSrc": { + "required": false, + "example": "/team/sarah.mp4", + "note": "Video path for team member (aspect-square in card wrapper with p-2, rounded-theme)" + }, + "imageAlt": { + "required": false, + "example": "Portrait of Sarah Johnson", + "note": "Alt text for image (defaults to member name if not provided)" + }, + "videoAriaLabel": { + "required": false, + "example": "Video of Sarah Johnson", + "note": "ARIA label for video (defaults to member name if not provided)" + } + }, + "itemRules": { + "minItems": 2, + "maxItems": 12, + "recommendedItems": "4-8", + "note": "Works best with 4-8 team members. Mobile: 2 per row with overlap. Desktop: up to 4 per row with overlap and wrap support for additional rows." + } + }, + "propsSchema": { + "team": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for team pages", + "Use for staff directories", + "Requires team[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items", + "Do not use less than 2 items", + "Do not use more than 12 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardOne.json b/registry/components/TeamCardOne.json new file mode 100644 index 0000000..4159d38 --- /dev/null +++ b/registry/components/TeamCardOne.json @@ -0,0 +1,89 @@ +{ + "name": "TeamCardOne", + "description": "Team member card with image background, overlay info card at bottom-left corner.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Meet Our Team", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "The people behind our success", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "teamMemberRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Sophie P.", + "minChars": 2, + "maxChars": 50, + "note": "Team member name displayed in overlay card" + }, + "role": { + "required": true, + "example": "Digital Nomad", + "minChars": 2, + "maxChars": 40, + "note": "Role/title displayed in primary-button badge" + }, + "imageSrc": { + "required": true, + "example": "/team/sophie.jpg", + "note": "Image path for team member photo (displays as square with rounded-theme)" + }, + "imageAlt": { + "required": false, + "example": "Portrait of Sophie P.", + "note": "Alt text for image (defaults to member name if not provided)" + } + } + }, + "propsSchema": { + "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for team pages", + "Use for staff directories", + "Requires members[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardSix.json b/registry/components/TeamCardSix.json new file mode 100644 index 0000000..dec42c9 --- /dev/null +++ b/registry/components/TeamCardSix.json @@ -0,0 +1,91 @@ +{ + "name": "TeamCardSix", + "description": "Team member card with full-bleed image background and blurred gradient overlay with name and role text at bottom.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Meet Our Team", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "The talented people behind our success", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "teamMemberRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Sarah Johnson", + "minChars": 2, + "maxChars": 50, + "note": "Team member name displayed at 2xl font-medium with truncate in blurred overlay" + }, + "role": { + "required": true, + "example": "CEO & Founder", + "minChars": 2, + "maxChars": 50, + "note": "Role/title displayed at base size with truncate in blurred overlay" + }, + "imageSrc": { + "required": true, + "example": "/team/sarah.jpg", + "note": "Image path for team member photo (full-bleed with rounded-theme-capped)" + }, + "imageAlt": { + "required": false, + "example": "Portrait of Sarah Johnson", + "note": "Alt text for image (defaults to member name if not provided)" + } + } + }, + "propsSchema": { + "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required - determines grid layout or carousel trigger)", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "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: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for about pages", + "Use for company information", + "Use for team pages", + "Use for staff directories", + "Requires members[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardTen.json b/registry/components/TeamCardTen.json new file mode 100644 index 0000000..239095e --- /dev/null +++ b/registry/components/TeamCardTen.json @@ -0,0 +1,74 @@ +{ + "name": "TeamCardTen", + "description": "Team section with animated title at top, Tag label, and member cards with images and names.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Growing fast means tough calls. We help you turn pricing from doubt into conviction.", + "minChars": 20, + "maxChars": 300 + }, + "tag": { + "required": true, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "memberRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Johan van der Poel", + "minChars": 2, + "maxChars": 50 + }, + "imageSrc": { + "required": false, + "example": "/team/johan.jpg", + "note": "Portrait image (3:3.5 aspect ratio)" + }, + "videoSrc": { + "required": false, + "example": "/team/johan.mp4", + "note": "Video alternative to image" + } + }, + "itemRules": { + "minItems": 1, + "maxItems": 6, + "recommendedItems": "2-4" + } + }, + "propsSchema": { + "title": "string", + "tag": "string", + "members": "Array<{ id: string, name: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>", + "memberVariant": "'default' | 'card' (required - 'default': no card styling, 'card': each member wrapped in card with rounded corners)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for team pages", + "Use for staff directories", + "Requires members[]" + ], + "dont": [ + "Do not use multiple items", + "Do not use more than 4 items", + "Do not use more than 6 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TeamCardTwo.json b/registry/components/TeamCardTwo.json new file mode 100644 index 0000000..6d212a2 --- /dev/null +++ b/registry/components/TeamCardTwo.json @@ -0,0 +1,106 @@ +{ + "name": "TeamCardTwo", + "description": "Team member card with image background, overlay info card, and social links.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Meet Our Team", + "minChars": 2, + "maxChars": 35 + }, + "description": { + "required": true, + "example": "The talented people behind our success", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Team", + "minChars": 2, + "maxChars": 30 + } + }, + "teamMemberRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Alisa Hester", + "minChars": 2, + "maxChars": 50, + "note": "Team member name displayed in overlay header" + }, + "role": { + "required": true, + "example": "Founder & CEO", + "minChars": 2, + "maxChars": 40, + "note": "Role/title displayed in secondary-button badge" + }, + "description": { + "required": true, + "example": "Former co-founder of Opendoor. Early staff at Spotify and Clearbit.", + "minChars": 10, + "maxChars": 200, + "note": "Brief bio or description" + }, + "imageSrc": { + "required": true, + "example": "/team/member-1.jpg", + "note": "Image path for team member photo" + }, + "imageAlt": { + "required": false, + "example": "Portrait of Alisa Hester", + "note": "Alt text for image (defaults to member name if not provided)" + }, + "socialLinks": { + "required": false, + "structure": { + "icon": "LucideIcon - Any Lucide icon component (required)", + "url": "string - Social profile URL (required)" + }, + "note": "Flexible social links array. Pass any Lucide icon (Twitter, Linkedin, Globe, Github, etc.) with corresponding URL. Icons display in primary-button styled circles." + } + } + }, + "propsSchema": { + "members": "Array<{ id: string, name: string, role: string, description: string, imageSrc: string, imageAlt?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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: 'Team section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for about pages", + "Use for company information", + "Use for team pages", + "Use for staff directories", + "Requires members[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialAboutCard.json b/registry/components/TestimonialAboutCard.json new file mode 100644 index 0000000..4f916fc --- /dev/null +++ b/registry/components/TestimonialAboutCard.json @@ -0,0 +1,75 @@ +{ + "name": "TestimonialAboutCard", + "description": "Card-based about section with tag, title, description footer, icon box, and required media.", + "constraints": { + "textRules": { + "tag": { + "required": true, + "example": "Testimonial", + "minChars": 2, + "maxChars": 30 + }, + "title": { + "required": true, + "example": "They took social media off our plate completely and our audience has never been more engaged.", + "minChars": 10, + "maxChars": 300 + }, + "description": { + "required": true, + "example": "Elena Chen", + "minChars": 2, + "maxChars": 50 + }, + "subdescription": { + "required": true, + "example": "Bloom Skincare", + "minChars": 2, + "maxChars": 50 + } + }, + "mediaRules": { + "note": "Either imageSrc or videoSrc is required (discriminated union)", + "imageSrc": { + "required": "conditional - required if no videoSrc", + "example": "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=800" + }, + "videoSrc": { + "required": "conditional - required if no imageSrc", + "example": "/videos/testimonial.mp4" + } + } + }, + "propsSchema": { + "tag": "string (required)", + "tagIcon?": "LucideIcon", + "title": "string (required)", + "description": "string (required)", + "subdescription": "string (required)", + "icon": "LucideIcon (required - displayed in the icon box)", + "imageSrc": "string (required if no videoSrc)", + "imageAlt?": "string (default: '')", + "videoSrc": "string (required if no imageSrc)", + "videoAriaLabel?": "string (default: 'Testimonial video')", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Testimonial section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for social proof", + "Use for customer reviews", + "Use for about pages", + "Use for company information" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardFifteen.json b/registry/components/TestimonialCardFifteen.json new file mode 100644 index 0000000..6f493ce --- /dev/null +++ b/registry/components/TestimonialCardFifteen.json @@ -0,0 +1,63 @@ +{ + "name": "TestimonialCardFifteen", + "description": "Centered testimonial with star rating, animated text, author, and avatar group.", + "constraints": { + "textRules": { + "testimonial": { + "required": true, + "example": "This product has completely transformed how we work. The results speak for themselves.", + "minChars": 20, + "maxChars": 300 + }, + "author": { + "required": true, + "example": "James Carter, Journalist", + "minChars": 2, + "maxChars": 60 + } + }, + "ratingRules": { + "rating": { + "required": true, + "min": 0, + "max": 5, + "example": 5, + "note": "Number of filled stars (0-5)" + } + }, + "avatarRules": { + "avatars": { + "required": true, + "minItems": 1, + "example": "[{ src: '/avatars/user1.jpg', alt: 'User 1' }]", + "note": "Array of avatar objects with src and alt. Shows 3 on mobile, 6 on desktop." + } + } + }, + "propsSchema": { + "testimonial": "string", + "rating": "number (0-5)", + "author": "string", + "avatars": "Array<{ src: string, alt: string }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Testimonial section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for landing pages", + "Use for feature showcases", + "Use for capability displays", + "Use for social proof", + "Use for customer reviews", + "Requires avatars[]" + ], + "dont": [ + "Do not use multiple items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardFive.json b/registry/components/TestimonialCardFive.json new file mode 100644 index 0000000..b6cf52d --- /dev/null +++ b/registry/components/TestimonialCardFive.json @@ -0,0 +1,137 @@ +{ + "name": "TestimonialCardFive", + "description": "Full-width carousel testimonial section with split card layout showing text content and square image side-by-side.", + "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" + }, + "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", + "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: 'Testimonials section')", + "className?": "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 + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardOne.json b/registry/components/TestimonialCardOne.json new file mode 100644 index 0000000..808cb73 --- /dev/null +++ b/registry/components/TestimonialCardOne.json @@ -0,0 +1,103 @@ +{ + "name": "TestimonialCardOne", + "description": "Testimonial card with image background, star rating, name, role, and company overlay.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "What Our Customers Say", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Real feedback from our valued customers", + "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", + "minChars": 2, + "maxChars": 50, + "note": "Customer name displayed in overlay" + }, + "role": { + "required": true, + "example": "PM, Hourglass", + "minChars": 2, + "maxChars": 50, + "note": "Customer role/position" + }, + "company": { + "required": true, + "example": "Web Design Agency", + "minChars": 2, + "maxChars": 50, + "note": "Customer company name" + }, + "rating": { + "required": true, + "example": 5, + "min": 1, + "max": 5, + "note": "Star rating (1-5 stars)" + }, + "imageSrc": { + "required": true, + "example": "/testimonials/alisa.jpg", + "note": "Image path for customer photo" + }, + "imageAlt": { + "required": false, + "example": "Portrait of Alisa Hester", + "note": "Alt text for image (defaults to customer name if not provided)" + } + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc: string, imageAlt?: string }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", + "gridVariant": "'uniform-all-items-equal' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for social proof", + "Use for customer reviews", + "Requires testimonials[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardSix.json b/registry/components/TestimonialCardSix.json new file mode 100644 index 0000000..edf023c --- /dev/null +++ b/registry/components/TestimonialCardSix.json @@ -0,0 +1,108 @@ +{ + "name": "TestimonialCardSix", + "description": "Dual auto-scrolling marquee testimonial section with reversed testimonial cards moving in opposite directions.", + "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": "Sarah Johnson", + "minChars": 2, + "maxChars": 50 + }, + "handle": { + "required": true, + "example": "@sarahj", + "minChars": 2, + "maxChars": 50, + "note": "Social media handle or role/company" + }, + "testimonial": { + "required": true, + "example": "This component library has transformed our development workflow. The quality and attention to detail is exceptional.", + "minChars": 20, + "maxChars": 200, + "note": "Testimonial text automatically clamped to 2 lines for consistent card heights" + }, + "imageSrc": { + "required": false, + "example": "/avatar.jpg", + "note": "Avatar image shown in TestimonialAuthor (aspect-square)" + }, + "imageAlt": { + "required": false, + "example": "Sarah Johnson", + "note": "Alt text for avatar image" + }, + "icon": { + "required": false, + "example": "Quote", + "note": "LucideIcon component to display if no imageSrc provided (defaults to Quote icon)" + } + }, + "itemRules": { + "minItems": 6, + "maxItems": 20, + "recommendedItems": "8-12", + "note": "Works best with 8-12 testimonials. Continuously scrolls with top and bottom marquees in opposite directions." + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "speed?": "number (default: 40)", + "topMarqueeDirection?": "'left' | 'right' (default: 'left')", + "ariaLabel?": "string (default: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for social proof", + "Use for customer reviews", + "Requires testimonials[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use less than 6 items", + "Do not use more than 20 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardTen.json b/registry/components/TestimonialCardTen.json new file mode 100644 index 0000000..e5ec9c7 --- /dev/null +++ b/registry/components/TestimonialCardTen.json @@ -0,0 +1,109 @@ +{ + "name": "TestimonialCardTen", + "description": "Split layout testimonial section with titled quote card, navigation arrows, and media display. Supports card and border variants.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Trusted by industry leaders", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "See what our customers have to say", + "minChars": 5, + "maxChars": 300 + }, + "tag": { + "required": false, + "example": "Testimonials", + "minChars": 2, + "maxChars": 30 + } + }, + "testimonialRules": { + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for the testimonial" + }, + "title": { + "required": true, + "example": "Personalized AI, redefined with Mindex", + "minChars": 10, + "maxChars": 80, + "note": "Headline/title displayed at top of quote card" + }, + "quote": { + "required": true, + "example": "Working with this AI has been a game changer! It feels like the system really listens and adapts to what I need.", + "minChars": 20, + "maxChars": 500 + }, + "name": { + "required": true, + "example": "Sarah Mitchell", + "minChars": 2, + "maxChars": 50 + }, + "role": { + "required": true, + "example": "CEO of BrightPath Solutions", + "minChars": 2, + "maxChars": 100 + }, + "imageSrc": { + "required": false, + "example": "/images/testimonial1.webp", + "note": "Image source URL (either imageSrc or videoSrc required)" + }, + "videoSrc": { + "required": false, + "example": "/videos/testimonial.mp4", + "note": "Video source URL (either imageSrc or videoSrc required)" + }, + "imageAlt": { + "required": false, + "example": "Sarah Mitchell headshot", + "note": "Alt text for images" + }, + "videoAriaLabel": { + "required": false, + "example": "Testimonial video", + "note": "Aria label for videos" + } + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, title: string, quote: string, name: string, role: 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", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for social proof", + "Use for customer reviews", + "Requires testimonials[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use more than 4 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardThirteen.json b/registry/components/TestimonialCardThirteen.json new file mode 100644 index 0000000..429ae4e --- /dev/null +++ b/registry/components/TestimonialCardThirteen.json @@ -0,0 +1,101 @@ +{ + "name": "TestimonialCardThirteen", + "description": "Testimonial cards with star ratings or quote icon, testimonial text, and author details.", + "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": { + "id": { + "required": true, + "example": "1", + "note": "Unique identifier for the testimonial" + }, + "name": { + "required": true, + "example": "Sarah Johnson", + "minChars": 2, + "maxChars": 50 + }, + "handle": { + "required": true, + "example": "@sarahj", + "minChars": 2, + "maxChars": 30 + }, + "testimonial": { + "required": true, + "example": "Amazing product that transformed our workflow!", + "minChars": 10, + "maxChars": 500 + }, + "rating": { + "required": true, + "example": 5, + "note": "Number from 1-5 indicating star rating" + }, + "imageSrc": { + "required": false, + "example": "/testimonials/sarah.jpg", + "note": "Author avatar image (either imageSrc or icon required)" + }, + "icon": { + "required": false, + "example": "Quote", + "note": "LucideIcon for author avatar (either imageSrc or icon required)" + } + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", + "showRating": "boolean - true for star ratings, false for quote icon (required)", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", + "title": "string", + "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", + "description": "string", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "ariaLabel?": "string (default: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for social proof", + "Use for customer reviews", + "Use for product catalogs", + "Use for e-commerce", + "Requires testimonials[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [ + "Do not use multiple items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardTwelve.json b/registry/components/TestimonialCardTwelve.json new file mode 100644 index 0000000..efb2798 --- /dev/null +++ b/registry/components/TestimonialCardTwelve.json @@ -0,0 +1,80 @@ +{ + "name": "TestimonialCardTwelve", + "description": "Minimal testimonial card with avatar group, title, and tag in a single centered card layout.", + "constraints": { + "textRules": { + "cardTitle": { + "required": true, + "example": "Over 10,000 customers trust us to deliver exceptional results", + "minChars": 10, + "maxChars": 120 + }, + "cardTag": { + "required": true, + "example": "See what they say", + "minChars": 5, + "maxChars": 40 + } + }, + "testimonialRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Sarah Johnson", + "minChars": 2, + "maxChars": 50, + "note": "Used as fallback for imageAlt" + }, + "imageSrc": { + "required": true, + "example": "/testimonials/sarah.jpg", + "note": "Image path for customer photo" + }, + "imageAlt": { + "required": false, + "example": "Sarah Johnson", + "minChars": 2, + "maxChars": 50, + "note": "Alt text for accessibility (defaults to name)" + } + }, + "itemRules": { + "minItems": 3, + "maxItems": 10, + "recommendedItems": "4-6", + "note": "Shows 3 avatars on mobile, 4 on desktop. Remaining count displayed as '+N'. Works best with 4-6 testimonials." + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>", + "cardTitle": "string", + "cardTag": "string", + "cardTagIcon?": "LucideIcon", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for social proof", + "Use for customer reviews", + "Requires testimonials[]" + ], + "dont": [ + "Do not use multiple items", + "Do not use less than 3 items", + "Do not use more than 10 items" + ], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TestimonialCardTwo.json b/registry/components/TestimonialCardTwo.json new file mode 100644 index 0000000..3efbaf1 --- /dev/null +++ b/registry/components/TestimonialCardTwo.json @@ -0,0 +1,100 @@ +{ + "name": "TestimonialCardTwo", + "description": "Testimonial card with circular image or icon, name, role, and testimonial text.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Customer Reviews", + "minChars": 2, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "See what our customers have to say", + "minChars": 5, + "maxChars": 250 + }, + "tag": { + "required": false, + "example": "Reviews", + "minChars": 2, + "maxChars": 30 + } + }, + "testimonialRules": { + "id": { + "required": true, + "example": "1", + "minChars": 1, + "maxChars": 20 + }, + "name": { + "required": true, + "example": "Sarah Mitchell", + "minChars": 2, + "maxChars": 50, + "note": "Customer name" + }, + "role": { + "required": true, + "example": "Director of Operations", + "minChars": 2, + "maxChars": 80, + "note": "Customer role/position" + }, + "testimonial": { + "required": true, + "example": "The attention to detail and commitment to excellence was outstanding throughout the entire project.", + "minChars": 10, + "maxChars": 500, + "note": "Testimonial text content" + }, + "imageSrc": { + "required": false, + "example": "/testimonials/sarah.jpg", + "note": "Optional image path for customer photo. If not provided, icon will be displayed instead." + }, + "imageAlt": { + "required": false, + "example": "Portrait of Sarah Mitchell", + "note": "Alt text for image (defaults to customer name if not provided)" + }, + "icon": { + "required": false, + "example": "Package", + "note": "Optional Lucide icon to display when no image is provided. Defaults to Quote icon." + } + } + }, + "propsSchema": { + "testimonials": "Array<{ id: string, name: string, role: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", + "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", + "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')", + "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", + "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: 'Testimonials section')", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for social proof", + "Use for customer reviews", + "Requires testimonials[]", + "Requires titleSegments?[]", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TextAbout.json b/registry/components/TextAbout.json new file mode 100644 index 0000000..f7f5221 --- /dev/null +++ b/registry/components/TextAbout.json @@ -0,0 +1,45 @@ +{ + "name": "TextAbout", + "description": "Centered about section with large animated text and optional buttons below.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "We build products that empower teams to create exceptional digital experiences", + "minChars": 10, + "maxChars": 200 + } + }, + "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. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level." + } + }, + "propsSchema": { + "title": "string", + "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n \n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TextAnimation.json b/registry/components/TextAnimation.json new file mode 100644 index 0000000..386e353 --- /dev/null +++ b/registry/components/TextAnimation.json @@ -0,0 +1,35 @@ +{ + "name": "TextAnimation", + "description": "Unified scroll-triggered text animation component with three distinct animation types and two trigger variants.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "This animation responds to scroll. Watch as the text comes to life." + } + } + }, + "propsSchema": { + "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'", + "title": "string", + "children?": "React.ReactNode", + "variant?": "'trigger' | 'words-trigger'", + "className?": "string", + "duration?": "number", + "stagger?": "number", + "start?": "string", + "end?": "string", + "ariaLabel?": "string", + "gradientColors?": "{ from: string, to: string }" + }, + "usageExample": "", + "do": [ + "Use for general use" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TextBox.json b/registry/components/TextBox.json new file mode 100644 index 0000000..58916ad --- /dev/null +++ b/registry/components/TextBox.json @@ -0,0 +1,56 @@ +{ + "name": "TextBox", + "description": "Flexible text composition component with animated title and description.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Welcome to Our Platform", + "minChars": 2, + "maxChars": 100 + }, + "description": { + "required": true, + "example": "Discover amazing features and capabilities", + "minChars": 5, + "maxChars": 500 + }, + "tag": { + "required": false, + "example": "New", + "minChars": 2, + "maxChars": 30 + } + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'", + "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' (required)", + "center?": "boolean (default: false)", + "tag?": "string", + "tagIcon?": "LucideIcon", + "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", + "duration?": "number (default: 1)", + "start?": "string (default: 'top 80%')", + "end?": "string (default: 'top 20%')", + "gradientColors?": "{ from: string, to: string }", + "children?": "React.ReactNode", + "className?": "string", + "avatars?": "Array<{ src: string, alt?: string }> - User avatar images", + "avatarText?": "string" + }, + "usageExample": "", + "do": [ + "Use for general use", + "Requires buttons?[]", + "Requires avatars?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TextNumberCount.json b/registry/components/TextNumberCount.json new file mode 100644 index 0000000..9f5f4e0 --- /dev/null +++ b/registry/components/TextNumberCount.json @@ -0,0 +1,39 @@ +{ + "name": "TextNumberCount", + "description": "Animated number counter that increments smoothly from a start to an end value.", + "constraints": { + "numberRules": { + "value": { + "required": true, + "example": 99.99 + }, + "startFrom": { + "required": false, + "example": 0 + } + } + }, + "propsSchema": { + "value": "number", + "startFrom?": "number", + "duration?": "number", + "format?": "Intl.NumberFormatOptions", + "locales?": "string", + "prefix?": "string", + "suffix?": "string", + "animateOnScroll?": "boolean", + "threshold?": "number", + "className?": "string" + }, + "usageExample": "", + "do": [ + "Use for statistics displays", + "Use for achievement showcases" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/TextSplitAbout.json b/registry/components/TextSplitAbout.json new file mode 100644 index 0000000..a43e7cf --- /dev/null +++ b/registry/components/TextSplitAbout.json @@ -0,0 +1,58 @@ +{ + "name": "TextSplitAbout", + "description": "Split-layout about section with large heading on left and multiple description paragraphs with optional buttons on right.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "About Us", + "minChars": 2, + "maxChars": 30 + }, + "description": { + "required": true, + "type": "array of strings", + "example": [ + "We're a team passionate about creating exceptional digital experiences", + "Our mission is to empower designers and developers" + ], + "minChars": 10, + "maxChars": 300, + "note": "Each description paragraph should be 10-300 characters" + } + }, + "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. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level." + } + }, + "propsSchema": { + "title": "string", + "description": "string[]", + "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", + "showBorder?": "boolean (default: false)", + "useInvertedBackground": "'noInvert' | 'invertDefault'", + "ariaLabel?": "string (default: 'About section')", + "className?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n \n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for about pages", + "Use for company information", + "Requires buttons?[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +} \ No newline at end of file diff --git a/registry/components/Textarea.json b/registry/components/Textarea.json new file mode 100644 index 0000000..80ea8cb --- /dev/null +++ b/registry/components/Textarea.json @@ -0,0 +1,35 @@ +{ + "name": "Textarea", + "description": "Styled textarea field with secondary-button styling and rounded-theme-capped borders.", + "constraints": { + "textRules": { + "placeholder": { + "required": false, + "example": "Type your message...", + "minChars": 2, + "maxChars": 100 + } + } + }, + "propsSchema": { + "value": "string (required)", + "onChange": "(value: string) => void (required)", + "placeholder?": "string", + "rows?": "number (default: 5)", + "required?": "boolean (default: false)", + "disabled?": "boolean (default: false)", + "ariaLabel?": "string", + "className?": "string" + }, + "usageExample": "