Initial commit
This commit is contained in:
50
registry/components/AboutMetric.json
Normal file
50
registry/components/AboutMetric.json
Normal file
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"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",
|
||||
"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 }>",
|
||||
"metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'About metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "// Wrap in ThemeProvider\nimport { TrendingUp, ShoppingCart, Users, Globe } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <AboutMetric \n title=\"At Berco Inc. we redefine innovation by empowering businesses to reach their full potential\" \n useInvertedBackground={false}\n metrics={[\n { icon: TrendingUp, label: 'Conversions', value: '7,000+' },\n { icon: ShoppingCart, label: 'Ecommerce Since', value: '2018' },\n { icon: Users, label: 'Partnered Brands', value: '30+' },\n { icon: Globe, label: 'Global Impressions Generated Annually', value: '100M+' }\n ]} \n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
21
registry/components/AnimatedAuroraBackground.json
Normal file
21
registry/components/AnimatedAuroraBackground.json
Normal file
@@ -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": "<AnimatedAuroraBackground invertColors={true} showRadialGradient={true} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
24
registry/components/AnimatedGridBackground.json
Normal file
24
registry/components/AnimatedGridBackground.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "AnimatedGridBackground",
|
||||
"description": "Grid pattern with animated pulsing squares using Framer Motion.",
|
||||
"constraints": {},
|
||||
"propsSchema": {
|
||||
"squareSize?": "number (default: 100)",
|
||||
"numSquares?": "number (default: 50)",
|
||||
"maxOpacity?": "number (default: 0.15)",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<AnimatedGridBackground squareSize={100} numSquares={50} maxOpacity={0.15} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use more than 4 items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
20
registry/components/AuroraBackground.json
Normal file
20
registry/components/AuroraBackground.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "AuroraBackground",
|
||||
"description": "Aurora borealis-style background with multiple rotated gradient bars and blur effect.",
|
||||
"constraints": {},
|
||||
"propsSchema": {
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<AuroraBackground />",
|
||||
"do": [
|
||||
"Use for landing pages",
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/AvatarGroup.json
Normal file
34
registry/components/AvatarGroup.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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 }>",
|
||||
"text?": "string",
|
||||
"maxVisible?": "number (default: 5)",
|
||||
"animationType?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"className?": "string",
|
||||
"ariaLabel?": "string (default: 'User avatars')"
|
||||
},
|
||||
"usageExample": "<AvatarGroup avatars={[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }]} text=\"Join 1,000+ members\" />",
|
||||
"do": [
|
||||
"Use for social proof",
|
||||
"Use for customer reviews",
|
||||
"Requires avatars[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
27
registry/components/BentoGlobe.json
Normal file
27
registry/components/BentoGlobe.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "BentoGlobe",
|
||||
"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": "<Globe className=\"w-full h-full\" config={{ markers: [{ location: [40.7128, -74.006], size: 0.1 }] }} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
66
registry/components/BlogCardOne.json
Normal file
66
registry/components/BlogCardOne.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Blog section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<BlogCardOne blogs={[{id: '1', category: 'Design', title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', authorAvatar: '/avatar-1.jpg', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} 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
|
||||
}
|
||||
}
|
||||
69
registry/components/BlogCardThree.json
Normal file
69
registry/components/BlogCardThree.json
Normal file
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"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\", \"excerpt\": \"Optimizing speed and scalability\", \"imageSrc\": \"/blog-1.jpg\"}]",
|
||||
"note": "Array of blog items. Each item requires id, category, title, excerpt, and imageSrc."
|
||||
}
|
||||
}
|
||||
},
|
||||
"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 (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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Blog section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<BlogCardThree blogs={[{id: '1', category: 'Software Development', title: 'Redefining Digital Performance at Scale', excerpt: 'Optimizing speed, scalability, and user experience.', imageSrc: '/blog-1.jpg', onBlogClick: () => console.log('clicked')}]} title=\"Featured Articles\" description=\"Explore our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} 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
|
||||
}
|
||||
}
|
||||
66
registry/components/BlogCardTwo.json
Normal file
66
registry/components/BlogCardTwo.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"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\", \"category\": [\"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, category (string | string[]), title, excerpt, imageSrc, authorName, and date."
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"blogs": "Array<{ id: string, category: string | 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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Blog section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<BlogCardTwo blogs={[{id: '1', category: ['Design', 'Research', 'Presentation'], title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} 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
|
||||
}
|
||||
}
|
||||
19
registry/components/BlurBottomBackground.json
Normal file
19
registry/components/BlurBottomBackground.json
Normal file
@@ -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": "<BlurBottomBackground />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonBounceEffect.json
Normal file
34
registry/components/ButtonBounceEffect.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonBounceEffect text=\"Get Started\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonDirectionalHover.json
Normal file
34
registry/components/ButtonDirectionalHover.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonDirectionalHover text=\"Get Started\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonElasticEffect.json
Normal file
34
registry/components/ButtonElasticEffect.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonElasticEffect text=\"Get Started\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonExpandHover.json
Normal file
34
registry/components/ButtonExpandHover.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonExpandHover text=\"Get Started\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonHoverBubble.json
Normal file
34
registry/components/ButtonHoverBubble.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonHoverBubble text=\"Contact Us\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
35
registry/components/ButtonHoverMagnetic.json
Normal file
35
registry/components/ButtonHoverMagnetic.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"strengthFactor?": "number (default: 20)",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonHoverMagnetic text=\"Button\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonIconArrow.json
Normal file
34
registry/components/ButtonIconArrow.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonIconArrow text=\"Continue\" href=\"next-section\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
36
registry/components/ButtonShiftHover.json
Normal file
36
registry/components/ButtonShiftHover.json
Normal file
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonShiftHover text=\"Get Started\" href=\"pricing\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use multiple items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonTextShift.json
Normal file
34
registry/components/ButtonTextShift.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonTextShift text=\"Get Started\" href=\"contact\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonTextStagger.json
Normal file
34
registry/components/ButtonTextStagger.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonTextStagger text=\"Get Started\" href=\"https://example.com\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
34
registry/components/ButtonTextUnderline.json
Normal file
34
registry/components/ButtonTextUnderline.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"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",
|
||||
"scrollToSection?": "boolean",
|
||||
"className?": "string",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
|
||||
},
|
||||
"usageExample": "<ButtonTextUnderline text=\"Learn more\" href=\"about\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
57
registry/components/CardStack.json
Normal file
57
registry/components/CardStack.json
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"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' | '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' (default: 'uniform-all-items-equal')",
|
||||
"uniformGridCustomHeightClasses?": "string (default: varies by usage)",
|
||||
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground?": "boolean",
|
||||
"ariaLabel?": "string (default: 'Card stack')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<CardStack title=\"Features\" buttons={[{ text: 'View All', href: 'features' }]} animationType=\"slide-up\" textboxLayout=\"default\">{/* Card components */}</CardStack>",
|
||||
"do": [
|
||||
"Use for general use",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
20
registry/components/CircleGradientBackground.json
Normal file
20
registry/components/CircleGradientBackground.json
Normal file
@@ -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": "<CircleGradientBackground diagonal=\"primary\" />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
79
registry/components/ContactCTA.json
Normal file
79
registry/components/ContactCTA.json
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"name": "ContactCTA",
|
||||
"description": "Centered contact CTA section with tag, title, description, and action buttons in a card container with background support.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"tag": {
|
||||
"required": true,
|
||||
"example": "Get in Touch",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
},
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Ready to Build Your Next Project?",
|
||||
"minChars": 5,
|
||||
"maxChars": 100
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Let's work together to create something amazing. Our team is ready to help you bring your vision to life.",
|
||||
"minChars": 10,
|
||||
"maxChars": 300
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"required": true,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"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<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
|
||||
},
|
||||
"examples": [
|
||||
"{ text: 'Contact Us', href: 'contact' }",
|
||||
"{ text: 'Learn More', href: 'https://example.com' }"
|
||||
],
|
||||
"note": "At least one button is required. Supports up to 2 buttons with gap-4 spacing. Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius."
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"tag": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Contact section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"contentClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"descriptionClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"buttonContainerClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <ContactCTA\n tag=\"Get in Touch\"\n tagIcon={Mail}\n title=\"Ready to Build Your Next Project?\"\n description=\"Let's work together to create something amazing.\"\n buttons={[{ text: 'Contact Us', href: 'contact' }]}\n background={{ variant: 'plain' }}\n useInvertedBackground=\"none\"\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for call-to-action contact sections",
|
||||
"Place at the end of pages for conversion",
|
||||
"Use with appropriate background variant",
|
||||
"Requires at least one button"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without buttons",
|
||||
"Do not use for general content sections"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
74
registry/components/ContactCenter.json
Normal file
74
registry/components/ContactCenter.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"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<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactCenter tag=\"Newsletter\" title=\"Stay updated with our latest news\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={false} onSubmit={(email) => console.log(email)} />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
70
registry/components/ContactFaq.json
Normal file
70
registry/components/ContactFaq.json
Normal file
@@ -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",
|
||||
"useInvertedBackground": "boolean",
|
||||
"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": "<ContactFaq faqs={[{ id: '1', title: \"What's included?\", content: 'Your subscription covers...' }]} ctaTitle=\"Book an intro call\" ctaDescription=\"Let's get started with a brief intro call.\" ctaButton={{ text: 'Book a Free Call', href: '#contact' }} ctaIcon={Phone} useInvertedBackground={false} animationType=\"slide-up\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
74
registry/components/ContactForm.json
Normal file
74
registry/components/ContactForm.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"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",
|
||||
"description": "string",
|
||||
"tag": "string",
|
||||
"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",
|
||||
"useInvertedBackground": "boolean",
|
||||
"centered?": "boolean (default: false)",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<ContactForm title=\"Join our newsletter\" description=\"Get updates\" tag=\"Newsletter\" useInvertedBackground={false} onSubmit={(email) => 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
|
||||
}
|
||||
}
|
||||
80
registry/components/ContactSplit.json
Normal file
80
registry/components/ContactSplit.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"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": "boolean",
|
||||
"imageSrc": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string (default: '')",
|
||||
"videoAriaLabel?": "string (default: 'Contact section video')",
|
||||
"mediaPosition?": "'left' | 'right' (default: 'right')",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactSplit tag=\"Newsletter\" title=\"Stay updated\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={false} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(email) => console.log(email)} />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
58
registry/components/ContactSplitForm.json
Normal file
58
registry/components/ContactSplitForm.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"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": "boolean",
|
||||
"imageSrc": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string (default: '')",
|
||||
"videoAriaLabel?": "string (default: 'Contact section video')",
|
||||
"mediaPosition?": "'left' | 'right' (default: 'right')",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttonText?": "string (default: 'Submit')",
|
||||
"onSubmit?": "(data: Record<string, string>) => void",
|
||||
"ariaLabel?": "string (default: 'Contact section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <ContactSplitForm title=\"Get in touch\" description=\"We'd love to hear from you. Send us a message.\" inputs={[{ name: 'name', type: 'text', placeholder: 'Name', required: true }, { name: 'email', type: 'email', placeholder: 'Email', required: true }]} textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }} useInvertedBackground={false} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(data) => console.log(data)} />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
48
registry/components/ContactText.json
Normal file
48
registry/components/ContactText.json
Normal file
@@ -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": "boolean",
|
||||
"ariaLabel?": "string (default: 'Contact section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<ContactText text=\"Ready to start your next project? Let's create something amazing together.\" animationType=\"entrance-slide\" buttons={[{ text: 'Get in Touch', href: '/contact' }, { text: 'View Portfolio', href: '/portfolio' }]} useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for contact pages",
|
||||
"Use for lead generation",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
23
registry/components/DotGridBackground.json
Normal file
23
registry/components/DotGridBackground.json
Normal file
@@ -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": "<DotGridBackground size=\"medium\" perspectiveThreeD={false} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use more than 4 items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
27
registry/components/DownwardRaysBackground.json
Normal file
27
registry/components/DownwardRaysBackground.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"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",
|
||||
"containerClassName?": "string"
|
||||
},
|
||||
"usageExample": "<DownwardRaysBackground animated={true} showGrid={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
39
registry/components/EmailSignupForm.json
Normal file
39
registry/components/EmailSignupForm.json
Normal file
@@ -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": "<EmailSignupForm inputPlaceholder=\"Your email\" buttonText=\"Subscribe\" onSubmit={(email) => console.log(email)} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
75
registry/components/FaqBase.json
Normal file
75
registry/components/FaqBase.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
|
||||
"showCard?": "boolean (default: true)",
|
||||
"ariaLabel?": "string (default: 'FAQ section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FaqBase faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for help pages",
|
||||
"Use for support sections",
|
||||
"Requires faqs[]",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
74
registry/components/FaqDouble.json
Normal file
74
registry/components/FaqDouble.json
Normal file
@@ -0,0 +1,74 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
|
||||
"ariaLabel?": "string (default: 'FAQ section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FaqDouble faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}, {id: '3', title: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for help pages",
|
||||
"Use for support sections",
|
||||
"Requires faqs[]",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
102
registry/components/FaqSplitMedia.json
Normal file
102
registry/components/FaqSplitMedia.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
|
||||
"showCard?": "boolean (default: true)",
|
||||
"ariaLabel?": "string (default: 'FAQ section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FaqSplitMedia faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} imageSrc=\"/images/faq-hero.jpg\" imageAlt=\"Customer support representative\" title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} mediaPosition=\"left\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
73
registry/components/FaqSplitText.json
Normal file
73
registry/components/FaqSplitText.json
Normal file
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"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}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textPosition?": "'left' | 'right' (default: 'left')",
|
||||
"useInvertedBackground": "boolean",
|
||||
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
|
||||
"showCard?": "boolean (default: true)",
|
||||
"ariaLabel?": "string (default: 'FAQ section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FaqSplitText faqs={[{id: '1', title: 'How can I be part of Buenro?', content: 'You can join by signing up on our platform.'}, {id: '2', title: 'Can anyone join Buenro?', content: 'Yes! We welcome remote workers and entrepreneurs.'}]} sideTitle=\"Frequently Asked Questions\" textPosition=\"left\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for help pages",
|
||||
"Use for support sections",
|
||||
"Requires faqs[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
109
registry/components/FeatureBento.json
Normal file
109
registry/components/FeatureBento.json
Normal file
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"name": "FeatureBento",
|
||||
"description": "Feature section with bento-style cards displaying interactive visualizations (globe, charts, 3D cards, map).",
|
||||
"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
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"required": true,
|
||||
"note": "Array of feature cards. Each card has title, description, optional button, and a bentoComponent type with its specific props."
|
||||
},
|
||||
"bentoComponentTypes": {
|
||||
"globe": "3D rotating globe visualization",
|
||||
"icon-info-cards": "Scrolling metric cards - requires items: BentoInfoItem[] with icon, label, value",
|
||||
"animated-bar-chart": "Animated bar chart visualization",
|
||||
"3d-stack-cards": "Three stacked notification cards - requires items: [Bento3DItem, Bento3DItem, Bento3DItem]",
|
||||
"3d-task-list": "Rotated task list card - requires items: TaskItem[]",
|
||||
"orbiting-icons": "Orbiting integration icons on rings - requires centerIcon and items: OrbitingItem[]",
|
||||
"marquee": "Scrolling text/icon rows - requires centerIcon and variant ('text' with texts[] or 'icon' with icons[])",
|
||||
"map": "World map with animated location markers",
|
||||
"line-chart": "Area line chart with gradient fill",
|
||||
"3d-card-grid": "3D card grid - requires items (4 items with name and icon) and centerIcon",
|
||||
"phone": "Interactive phone mockup with notification animation - requires statusIcon, alertIcon, alertTitle, alertMessage, apps",
|
||||
"chat": "Chat animation - requires aiIcon, userIcon, exchanges, placeholder",
|
||||
"reveal-icon": "Icon reveal animation - requires icon",
|
||||
"timeline": "Timeline visualization - requires heading, subheading, items (3), completedLabel",
|
||||
"media-stack": "Three stacked images/videos that fan out on hover - requires items: [MediaStackItem, MediaStackItem, MediaStackItem]"
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureCard[]",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"animationType": "BentoAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"cardButtonClassName?": "string",
|
||||
"cardButtonTextClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureBento\n title=\"Our Features\"\n description=\"Discover the tools that make our platform powerful.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n useInvertedBackground=\"none\"\n animationType=\"fade\"\n features={[\n { title: \"Global Reach\", description: \"Connect worldwide.\", bentoComponent: \"globe\" },\n { title: \"Analytics\", description: \"Track metrics live.\", bentoComponent: \"line-chart\" },\n { title: \"Location\", description: \"See your users.\", bentoComponent: \"map\" }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for showcasing features with interactive visualizations",
|
||||
"Use appropriate bentoComponent for each feature type",
|
||||
"Provide all required props for each bentoComponent type",
|
||||
"Best for modern landing pages showcasing platform capabilities"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without proper items for bento types that require them",
|
||||
"Do not use for simple text-only feature lists",
|
||||
"Do not use the same bentoComponent type for multiple features - each feature should have a unique visualization"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
102
registry/components/FeatureBorderGlow.json
Normal file
102
registry/components/FeatureBorderGlow.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"name": "FeatureBorderGlow",
|
||||
"description": "CardStack feature section with animated glowing border effect that follows cursor/scroll.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Powerful Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 35
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Hover over each card to reveal the glowing border effect",
|
||||
"minChars": 5,
|
||||
"maxChars": 250
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"required": true,
|
||||
"structure": {
|
||||
"icon": "LucideIcon",
|
||||
"title": "string",
|
||||
"description": "string"
|
||||
},
|
||||
"note": "Array of feature cards. Each card displays icon at top, title and description below, with animated glowing border overlay."
|
||||
},
|
||||
"glowEffect": {
|
||||
"desktop": "Border glow tracks mouse movement with conic gradient mask following cursor angle within 64px proximity",
|
||||
"mobile": "Effect centers on viewport when card enters view on scroll",
|
||||
"styling": "Uses CSS variables (accent, background-accent) for theme-aware colors. Border width 1.5px with 40deg spread."
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureCard[] (required) - Array with icon, title, description",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')",
|
||||
"animationType": "CardAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"iconContainerClassName?": "string",
|
||||
"iconClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureBorderGlow\n title=\"Powerful Features\"\n description=\"Hover over each card to reveal the glowing border effect.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n useInvertedBackground=\"none\"\n animationType=\"fade\"\n features={[\n { icon: Zap, title: \"Fast Performance\", description: \"Lightning quick responses.\" },\n { icon: Shield, title: \"Secure\", description: \"Enterprise-grade security.\" },\n { icon: Globe, title: \"Global\", description: \"Available worldwide.\" }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for premium feature showcases with elegant visual polish",
|
||||
"Best for 2-6 features",
|
||||
"Each feature requires icon, title, and description",
|
||||
"Use for modern landing pages"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use for simple text-only feature lists",
|
||||
"Do not use without icons for each feature"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
113
registry/components/FeatureCardEight.json
Normal file
113
registry/components/FeatureCardEight.json
Normal file
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardEight features={[{ id: 1, title: 'Research & Planning', description: 'Understanding user needs, market trends, and project requirements', imageSrc: '/feature1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
72
registry/components/FeatureCardMedia.json
Normal file
72
registry/components/FeatureCardMedia.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"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",
|
||||
"title": "string - Card title",
|
||||
"description": "string - Card description",
|
||||
"tag": "string - Tag displayed on media top-right",
|
||||
"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": "boolean",
|
||||
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string",
|
||||
"ariaLabel?": "string (default: 'Features section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardMedia features={[{ id: '1', title: 'Research', description: 'Understanding user needs and market trends', tag: 'Phase 1', imageSrc: '/img.jpg', buttons: [{ text: 'Learn more', href: '#' }] }]} animationType=\"slide-up\" textboxLayout=\"default\" title=\"Our Process\" description=\"Discover how we work\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires features[]",
|
||||
"Requires titleSegments?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
133
registry/components/FeatureCardNine.json
Normal file
133
registry/components/FeatureCardNine.json
Normal file
@@ -0,0 +1,133 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardNine features={[{ id: 1, title: 'Seamless Integration', description: 'Connect your tools and workflows effortlessly', phoneOne: { imageSrc: '/phone1.jpg' }, phoneTwo: { imageSrc: '/phone2.jpg' } }]} showStepNumbers={true} title=\"Powerful Features\" description=\"Everything you need to build amazing products\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
113
registry/components/FeatureCardNineteen.json
Normal file
113
registry/components/FeatureCardNineteen.json
Normal file
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"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}> }>",
|
||||
"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'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardNineteen features={[{ id: 1, tag: 'Expertise', title: 'Strategy', subtitle: 'Data-driven decisions', description: 'We analyze market trends...', imageSrc: '/images/strategy.webp' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
75
registry/components/FeatureCardOne.json
Normal file
75
registry/components/FeatureCardOne.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"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' | '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'",
|
||||
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"useInvertedBackground": "boolean"
|
||||
},
|
||||
"usageExample": "<FeatureCardOne features={[{ title: 'Analytics', description: 'Get insights', imageSrc: '/feature.jpg', button: { text: 'Learn More', href: '#' } }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
105
registry/components/FeatureCardSeven.json
Normal file
105
registry/components/FeatureCardSeven.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardSeven features={[{ id: 1, title: 'Modern Architecture', description: 'Built with the latest technologies and best practices', imageSrc: '/feature1.jpg' }]} title=\"Our Features\" description=\"Sequential features with numbered badges\" textboxLayout=\"default\" animationType=\"blur-reveal\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
104
registry/components/FeatureCardSix.json
Normal file
104
registry/components/FeatureCardSix.json
Normal file
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardSix features={[{ id: 1, title: 'Research & Planning', description: 'Understanding user needs and project requirements', imageSrc: '/step1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
82
registry/components/FeatureCardSixteen.json
Normal file
82
registry/components/FeatureCardSixteen.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"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[] }",
|
||||
"positiveCard": "{ items: string[] }",
|
||||
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
|
||||
"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'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Feature comparison section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardSixteen negativeCard={{ items: ['Time-consuming processes', 'Limited scalability'] }} positiveCard={{ items: ['Streamlined workflow', 'Scalable solutions'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
122
registry/components/FeatureCardTen.json
Normal file
122
registry/components/FeatureCardTen.json
Normal file
@@ -0,0 +1,122 @@
|
||||
{
|
||||
"name": "FeatureCardTen",
|
||||
"description": "Timeline process flow feature section with numbered steps, alternating layout, and list items.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Powerful Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 35
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Everything you need to build and scale your business with confidence",
|
||||
"minChars": 5,
|
||||
"maxChars": 250
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureCardRules": {
|
||||
"id": {
|
||||
"required": true,
|
||||
"example": "1",
|
||||
"minChars": 1,
|
||||
"maxChars": 3,
|
||||
"note": "Feature identifier displayed in numbered badge"
|
||||
},
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Easy Integration",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Connect your existing tools and workflows seamlessly.",
|
||||
"minChars": 5,
|
||||
"maxChars": 200
|
||||
},
|
||||
"media": {
|
||||
"required": true,
|
||||
"note": "Either imageSrc or videoSrc required, with optional imageAlt/videoAriaLabel"
|
||||
},
|
||||
"items": {
|
||||
"required": true,
|
||||
"note": "Array of list items with icon (LucideIcon) and text (string)"
|
||||
},
|
||||
"reverse": {
|
||||
"required": true,
|
||||
"note": "Boolean to alternate layout direction (left/right)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureCard[] (required) - Array with id, title, description, media, items, reverse",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"animationType": "CardAnimationType",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string",
|
||||
"titleImageWrapperClassName?": "string",
|
||||
"titleImageClassName?": "string",
|
||||
"itemClassName?": "string",
|
||||
"mediaWrapperClassName?": "string",
|
||||
"mediaCardClassName?": "string",
|
||||
"numberClassName?": "string",
|
||||
"contentWrapperClassName?": "string",
|
||||
"featureTitleClassName?": "string",
|
||||
"featureDescriptionClassName?": "string",
|
||||
"listItemClassName?": "string",
|
||||
"iconContainerClassName?": "string",
|
||||
"iconClassName?": "string",
|
||||
"gapClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTen\n title=\"How It Works\"\n description=\"Follow these simple steps to get started.\"\n tag=\"Process\"\n tagIcon={Workflow}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n {\n id: \"1\",\n title: \"Sign Up\",\n description: \"Create your account in seconds.\",\n media: { imageSrc: \"/step1.jpg\", imageAlt: \"Sign up\" },\n items: [\n { icon: Check, text: \"Free to start\" },\n { icon: Check, text: \"No credit card required\" }\n ],\n reverse: false\n },\n {\n id: \"2\",\n title: \"Configure\",\n description: \"Set up your preferences.\",\n media: { imageSrc: \"/step2.jpg\", imageAlt: \"Configure\" },\n items: [\n { icon: Settings, text: \"Easy customization\" }\n ],\n reverse: true\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for step-by-step process showcases",
|
||||
"Best for 3-6 step processes",
|
||||
"Alternate reverse property for visual variety",
|
||||
"Include relevant icons for list items"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without media for each feature",
|
||||
"Do not use without list items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
92
registry/components/FeatureCardThree.json
Normal file
92
registry/components/FeatureCardThree.json
Normal file
@@ -0,0 +1,92 @@
|
||||
{
|
||||
"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' | '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'",
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"useInvertedBackground": "boolean"
|
||||
},
|
||||
"usageExample": "<FeatureCardThree features={[{ id: '01', title: 'Analytics', description: 'Track performance with detailed insights', imageSrc: '/feature.jpg' }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires features[]",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
100
registry/components/FeatureCardTwelve.json
Normal file
100
registry/components/FeatureCardTwelve.json
Normal file
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"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'",
|
||||
"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": "boolean",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardTwelve features={[{ id: 'premium', label: 'Premium', title: 'Premium features for your most demanding needs and growth goals', items: ['Priority support', 'Advanced features', 'Custom integrations'], buttons: [{ text: 'Learn more', href: '#' }, { text: 'Get started', onClick: () => console.log('clicked') }] }]} animationType=\"opacity\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
112
registry/components/FeatureCardTwentyFive.json
Normal file
112
registry/components/FeatureCardTwentyFive.json
Normal file
@@ -0,0 +1,112 @@
|
||||
{
|
||||
"name": "FeatureCardTwentyFive",
|
||||
"description": "Feature section with icon, title, description, and two-column media grid per card.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Our Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Discover what makes us different",
|
||||
"minChars": 5,
|
||||
"maxChars": 250
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Advanced Analytics",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Track your metrics in real-time.",
|
||||
"minChars": 5,
|
||||
"maxChars": 150
|
||||
},
|
||||
"icon": {
|
||||
"required": true,
|
||||
"note": "LucideIcon displayed in primary-button styled container"
|
||||
},
|
||||
"mediaItems": {
|
||||
"required": true,
|
||||
"exactCount": 2,
|
||||
"note": "Tuple of exactly 2 MediaItems, each with imageSrc/videoSrc and optional alt/ariaLabel"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureCard[] (required) - Array with title, description, icon, mediaItems (tuple of 2)",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string",
|
||||
"animationType": "CardAnimationTypeWith3D",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"mediaClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"cardIconClassName?": "string",
|
||||
"cardIconWrapperClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTwentyFive\n title=\"Our Features\"\n description=\"Discover what makes us different.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n {\n title: \"Advanced Analytics\",\n description: \"Track your metrics in real-time.\",\n icon: BarChart,\n mediaItems: [\n { imageSrc: \"/analytics1.jpg\", imageAlt: \"Analytics dashboard\" },\n { imageSrc: \"/analytics2.jpg\", imageAlt: \"Analytics charts\" }\n ]\n },\n {\n title: \"Team Collaboration\",\n description: \"Work together seamlessly.\",\n icon: Users,\n mediaItems: [\n { imageSrc: \"/team1.jpg\", imageAlt: \"Team working\" },\n { imageSrc: \"/team2.jpg\", imageAlt: \"Collaboration\" }\n ]\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for features with visual examples",
|
||||
"Each feature requires exactly 2 media items",
|
||||
"Use relevant icons for each feature",
|
||||
"Supports 3D animations"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without 2 media items per feature",
|
||||
"Do not use without icons"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
102
registry/components/FeatureCardTwentyFour.json
Normal file
102
registry/components/FeatureCardTwentyFour.json
Normal file
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"name": "FeatureCardTwentyFour",
|
||||
"description": "Two-column feature card list with title, author, description, tags, and media.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Latest Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Stay updated with our latest announcements",
|
||||
"minChars": 5,
|
||||
"maxChars": 300
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"itemRules": {
|
||||
"minItems": 1,
|
||||
"maxItems": 10,
|
||||
"recommendedItems": "2-4",
|
||||
"structure": {
|
||||
"id": "string",
|
||||
"title": "string",
|
||||
"author": "string",
|
||||
"description": "string",
|
||||
"tags": "string[]",
|
||||
"media": "Either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel)",
|
||||
"onFeatureClick": "() => void (optional)"
|
||||
},
|
||||
"note": "Each feature requires id, title, author, description, tags array. Media uses discriminated union."
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureItem[] (required) - Array with id, title, author, description, tags[], imageSrc/videoSrc",
|
||||
"animationType": "CardAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Features section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string",
|
||||
"titleImageWrapperClassName?": "string",
|
||||
"titleImageClassName?": "string",
|
||||
"cardContentClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"authorClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"tagsContainerClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"mediaWrapperClassName?": "string",
|
||||
"mediaClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTwentyFour\n title=\"Latest Features\"\n description=\"Stay updated with our latest announcements.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n {\n id: \"1\",\n title: \"Building the Future of Web Development\",\n author: \"John Doe\",\n description: \"A comprehensive guide to modern web technologies.\",\n tags: [\"Development\", \"Tutorial\"],\n imageSrc: \"/feature1.jpg\"\n },\n {\n id: \"2\",\n title: \"Design Systems at Scale\",\n author: \"Jane Smith\",\n description: \"How to build and maintain design systems.\",\n tags: [\"Design\", \"Systems\"],\n imageSrc: \"/feature2.jpg\"\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for feature articles, case studies, or content with author attribution",
|
||||
"Best for 2-4 featured items",
|
||||
"Include relevant tags for each feature",
|
||||
"Use high-quality images or videos"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without author attribution",
|
||||
"Do not use for simple feature lists without descriptions"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
89
registry/components/FeatureCardTwentyOne.json
Normal file
89
registry/components/FeatureCardTwentyOne.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "boolean",
|
||||
"mediaPosition?": "'left' | 'right' (default: 'left')",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FeatureCardTwentyOne title=\"Custom designs\" description=\"Explore our range of customizable solutions.\" tag=\"Features\" imageSrc=\"/images/feature.webp\" imageAlt=\"Feature showcase\" accordionItems={[{ id: '1', title: 'Inspiration + innovation', content: 'Collaborate with us on custom designs.' }, { id: '2', title: 'Sustainability + us', content: 'Committed to sustainable practices.' }, { id: '3', title: 'Request samples', content: 'Get in touch for samples and pricing.' }]} buttons={[{ text: 'Learn more', href: '#' }]} useInvertedBackground={false} mediaPosition=\"left\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
101
registry/components/FeatureCardTwentySix.json
Normal file
101
registry/components/FeatureCardTwentySix.json
Normal file
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"name": "FeatureCardTwentySix",
|
||||
"description": "Full-bleed media carousel feature cards with bottom text overlay and arrow navigation.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Featured Courses",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Handpicked by our team to help you start strong",
|
||||
"minChars": 5,
|
||||
"maxChars": 300
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Popular",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"minItems": 4,
|
||||
"maxItems": 12,
|
||||
"recommendedItems": "6",
|
||||
"structure": {
|
||||
"title": "string - Card title displayed over media",
|
||||
"description": "string - Card description displayed over media",
|
||||
"imageSrc": "string - Path to background image (optional if videoSrc provided)",
|
||||
"videoSrc": "string - Path to background video (optional if imageSrc provided)",
|
||||
"imageAlt": "string - Alt text for background image",
|
||||
"videoAriaLabel": "string - Aria label for background video",
|
||||
"buttonIcon": "LucideIcon - Icon for the action button",
|
||||
"buttonHref": "string - Button link destination (optional)",
|
||||
"buttonOnClick": "() => void - Button click handler (optional)"
|
||||
},
|
||||
"note": "Each feature requires title, description, media (image or video), and buttonIcon. Cards display with frosted glass gradient overlay."
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureItem[] (required) - Array with title, description, imageSrc/videoSrc, buttonIcon, buttonHref/buttonOnClick",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"cardButtonClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTwentySix\n title=\"Featured Courses\"\n description=\"Handpicked by our team to help you start strong.\"\n tag=\"Popular\"\n tagIcon={Star}\n textboxLayout=\"default\"\n useInvertedBackground=\"none\"\n features={[\n {\n title: \"Web Development\",\n description: \"Learn modern web technologies.\",\n imageSrc: \"/course1.jpg\",\n buttonIcon: ArrowRight,\n buttonHref: \"/courses/web\"\n },\n {\n title: \"UI/UX Design\",\n description: \"Master design principles.\",\n imageSrc: \"/course2.jpg\",\n buttonIcon: ArrowRight,\n buttonHref: \"/courses/design\"\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for showcasing features or courses with strong visual media",
|
||||
"Best for 4-12 items (6 recommended)",
|
||||
"Use high-quality images or videos for full-bleed display",
|
||||
"Each card requires a buttonIcon for the action button"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without media for each feature",
|
||||
"Do not use without buttonIcon",
|
||||
"Do not use for text-heavy content"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
120
registry/components/FeatureCardTwentyThree.json
Normal file
120
registry/components/FeatureCardTwentyThree.json
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"name": "FeatureCardTwentyThree",
|
||||
"description": "Feature section with separate media and card layout, featuring tags and arrow navigation.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Our Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Stay updated with the latest trends and insights",
|
||||
"minChars": 5,
|
||||
"maxChars": 300
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"id": {
|
||||
"required": true,
|
||||
"example": "1",
|
||||
"note": "Unique identifier for the feature item"
|
||||
},
|
||||
"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 in Tag components"
|
||||
},
|
||||
"media": {
|
||||
"required": false,
|
||||
"note": "Either imageSrc or videoSrc with optional imageAlt/videoAriaLabel"
|
||||
},
|
||||
"onFeatureClick": {
|
||||
"required": false,
|
||||
"note": "Optional click handler for the feature card"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureItem[] (required) - Array with id, title, tags[], imageSrc/videoSrc, onFeatureClick",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string",
|
||||
"animationType": "CardAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Features section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"itemClassName?": "string",
|
||||
"mediaWrapperClassName?": "string",
|
||||
"mediaClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"tagsContainerClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"arrowClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTwentyThree\n title=\"Our Features\"\n description=\"Stay updated with the latest trends and insights.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n {\n id: \"1\",\n title: \"Discover the essential features of our app\",\n tags: [\"Features\", \"New\"],\n imageSrc: \"/feature1.jpg\"\n },\n {\n id: \"2\",\n title: \"Advanced analytics for your business\",\n tags: [\"Analytics\", \"Pro\"],\n imageSrc: \"/feature2.jpg\"\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for visual-focused feature listings",
|
||||
"Include 1-4 tags per feature",
|
||||
"Use high-quality square images",
|
||||
"Best for feature showcases with clean separation between imagery and content"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without tags",
|
||||
"Do not use for text-heavy features"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
110
registry/components/FeatureCardTwentyTwo.json
Normal file
110
registry/components/FeatureCardTwentyTwo.json
Normal file
@@ -0,0 +1,110 @@
|
||||
{
|
||||
"name": "FeatureCardTwentyTwo",
|
||||
"description": "Feature section with TextBox header and fixed 2-column grid layout with horizontal feature cards and categories.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Our Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Discover what makes us different",
|
||||
"minChars": 5,
|
||||
"maxChars": 250
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureRules": {
|
||||
"id": {
|
||||
"required": true,
|
||||
"example": "1",
|
||||
"minChars": 1,
|
||||
"maxChars": 20
|
||||
},
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "The Future of Web Development",
|
||||
"minChars": 10,
|
||||
"maxChars": 150,
|
||||
"note": "Feature title shown at text-3xl size, supports line-clamp-2"
|
||||
},
|
||||
"category": {
|
||||
"required": true,
|
||||
"example": ["Technology", "Innovation"],
|
||||
"note": "Array of category strings, displayed inline with bullet separators"
|
||||
},
|
||||
"media": {
|
||||
"required": false,
|
||||
"note": "Either imageSrc or videoSrc with optional imageAlt/videoAriaLabel"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureItem[] (required) - Array with id, category[], title, imageSrc/videoSrc",
|
||||
"animationType": "CardAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Features section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"titleImageWrapperClassName?": "string",
|
||||
"titleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"cardContentClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"categoryContainerClassName?": "string",
|
||||
"categoryClassName?": "string",
|
||||
"mediaWrapperClassName?": "string",
|
||||
"mediaClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureCardTwentyTwo\n title=\"Our Features\"\n description=\"Discover what makes us different.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n {\n id: \"1\",\n title: \"Advanced Analytics Dashboard\",\n category: [\"Analytics\", \"Data\"],\n imageSrc: \"/feature1.jpg\"\n },\n {\n id: \"2\",\n title: \"Real-time Collaboration Tools\",\n category: [\"Collaboration\", \"Team\"],\n imageSrc: \"/feature2.jpg\"\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for featured listings with prominent display",
|
||||
"Best for 2-6 feature items",
|
||||
"Include relevant categories for each feature",
|
||||
"Use high-quality square images"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without categories",
|
||||
"Do not use for simple icon-based features"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
118
registry/components/FeatureHoverPattern.json
Normal file
118
registry/components/FeatureHoverPattern.json
Normal file
@@ -0,0 +1,118 @@
|
||||
{
|
||||
"name": "FeatureHoverPattern",
|
||||
"description": "CardStack feature section with interactive hover pattern effect revealing behind centered icons.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Powerful Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 35
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Hover over each card to reveal the interactive pattern",
|
||||
"minChars": 5,
|
||||
"maxChars": 250
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Features",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"featureCardRules": {
|
||||
"icon": {
|
||||
"required": true,
|
||||
"note": "LucideIcon displayed centered in the card"
|
||||
},
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Fast Performance",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Lightning-fast responses for your users.",
|
||||
"minChars": 5,
|
||||
"maxChars": 150
|
||||
},
|
||||
"button": {
|
||||
"required": false,
|
||||
"note": "Optional ButtonConfig for card-level action"
|
||||
}
|
||||
},
|
||||
"hoverEffect": {
|
||||
"desktop": "Mouse movement reveals radial gradient pattern with random character overlay",
|
||||
"mobile": "Pattern activates when card enters viewport (20% threshold for pattern, 40% for icon)",
|
||||
"note": "Pattern uses Framer Motion with useMotionValue for smooth tracking"
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"features": "FeatureCard[] (required) - Array with icon, title, description, optional button",
|
||||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||||
"uniformGridCustomHeightClasses?": "string (default: 'min-h-85 2xl:min-h-95')",
|
||||
"animationType": "CardAnimationType",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[]",
|
||||
"description": "string",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "TextboxLayout",
|
||||
"useInvertedBackground": "InvertedBackground",
|
||||
"ariaLabel?": "string (default: 'Feature section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"cardClassName?": "string",
|
||||
"iconContainerClassName?": "string",
|
||||
"iconClassName?": "string",
|
||||
"textBoxTitleClassName?": "string",
|
||||
"textBoxTitleImageWrapperClassName?": "string",
|
||||
"textBoxTitleImageClassName?": "string",
|
||||
"textBoxDescriptionClassName?": "string",
|
||||
"cardTitleClassName?": "string",
|
||||
"cardDescriptionClassName?": "string",
|
||||
"gradientClassName?": "string",
|
||||
"gridClassName?": "string",
|
||||
"carouselClassName?": "string",
|
||||
"controlsClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"textBoxTagClassName?": "string",
|
||||
"textBoxButtonContainerClassName?": "string",
|
||||
"textBoxButtonClassName?": "string",
|
||||
"textBoxButtonTextClassName?": "string",
|
||||
"cardButtonClassName?": "string",
|
||||
"cardButtonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <FeatureHoverPattern\n title=\"Powerful Features\"\n description=\"Hover over each card to reveal the interactive pattern.\"\n tag=\"Features\"\n tagIcon={Sparkles}\n textboxLayout=\"default\"\n animationType=\"fade\"\n useInvertedBackground=\"none\"\n features={[\n { icon: Zap, title: \"Fast Performance\", description: \"Lightning-fast responses.\" },\n { icon: Shield, title: \"Secure\", description: \"Enterprise-grade security.\" },\n { icon: Globe, title: \"Global\", description: \"Available worldwide.\" }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for feature showcases with visual engagement",
|
||||
"Best for 2-6 features",
|
||||
"Each feature requires an icon",
|
||||
"Supports custom gradient colors via gradientClassName"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without icons for each feature",
|
||||
"Do not use for simple text-only feature lists"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
70
registry/components/FeatureProcessSteps.json
Normal file
70
registry/components/FeatureProcessSteps.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"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",
|
||||
"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": "boolean",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"stepsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Process steps section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <FeatureProcessSteps\n tag=\"How we work\"\n tagIcon={Sparkles}\n title=\"Getting you results without the complexity\"\n description=\"Our three-step process takes you from identifying opportunities to launching systems.\"\n buttons={[{ text: 'Book a call', href: '#' }, { text: 'Watch video', href: '#' }]}\n steps={[\n { number: '01', title: 'Discovery & Assessment', tag: 'Week 1', description: 'We analyze your workflows and identify opportunities.' },\n { number: '02', title: 'Build & Deploy', tag: 'Weeks 2-4', description: 'We create and launch custom systems tailored to your operations.' },\n { number: '03', title: 'Train & Support', tag: 'Ongoing', description: 'We train your team and provide ongoing support.' }\n ]}\n useInvertedBackground={false}\n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
19
registry/components/FloatingGradientBackground.json
Normal file
19
registry/components/FloatingGradientBackground.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "FloatingGradientBackground",
|
||||
"description": "Five animated gradient circles with CSS animations and vertical gradient mask.",
|
||||
"constraints": {},
|
||||
"propsSchema": {
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FloatingGradientBackground />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
19
registry/components/FluidBackground.json
Normal file
19
registry/components/FluidBackground.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "FluidBackground",
|
||||
"description": "Generative fluid patterns using CPPN shader with theme color integration.",
|
||||
"constraints": {},
|
||||
"propsSchema": {
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FluidBackground />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
71
registry/components/FooterBase.json
Normal file
71
registry/components/FooterBase.json
Normal file
@@ -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",
|
||||
"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",
|
||||
"logoText?": "string (default: 'Webild')",
|
||||
"copyrightText?": "string (default: '© 2025 | Webild')",
|
||||
"onPrivacyClick?": "() => void",
|
||||
"ariaLabel?": "string (default: 'Site footer')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FooterBase columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" onPrivacyClick={() => console.log('Privacy clicked')} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires columns[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
54
registry/components/FooterBaseCard.json
Normal file
54
registry/components/FooterBaseCard.json
Normal file
@@ -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",
|
||||
"items": "Array<{ label: string, href: string }> - Navigation links"
|
||||
},
|
||||
"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",
|
||||
"copyrightText?": "string (default: '© 2025 | Webild')",
|
||||
"onPrivacyClick?": "() => void",
|
||||
"ariaLabel?": "string (default: 'Site footer')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FooterBaseCard columns={[{ title: 'Product', items: [{ label: 'Features', href: '/features' }, { label: 'Pricing', href: '/pricing' }] }, { title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Blog', href: '/blog' }] }]} logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" onPrivacyClick={() => console.log('Privacy clicked')} />",
|
||||
"do": [
|
||||
"Use for general use",
|
||||
"Requires columns[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
62
registry/components/FooterBaseReveal.json
Normal file
62
registry/components/FooterBaseReveal.json
Normal file
@@ -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",
|
||||
"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",
|
||||
"copyrightText?": "string",
|
||||
"onPrivacyClick?": "() => void",
|
||||
"ariaLabel?": "string",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FooterBaseReveal columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
|
||||
"do": [
|
||||
"Use for general use",
|
||||
"Requires columns[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
53
registry/components/FooterCard.json
Normal file
53
registry/components/FooterCard.json
Normal file
@@ -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",
|
||||
"href": "string - Social profile URL",
|
||||
"ariaLabel": "string - Accessibility label"
|
||||
},
|
||||
"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": "<FooterCard logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" socialLinks={[{ icon: Twitter, href: 'https://twitter.com/webild', ariaLabel: 'Twitter' }, { icon: Linkedin, href: 'https://linkedin.com/company/webild', ariaLabel: 'LinkedIn' }]} />",
|
||||
"do": [
|
||||
"Use for general use",
|
||||
"Requires socialLinks?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
61
registry/components/FooterLogoEmphasis.json
Normal file
61
registry/components/FooterLogoEmphasis.json
Normal file
@@ -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",
|
||||
"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": "<FooterLogoEmphasis columns={[{ items: [{ label: 'Features', href: 'features' }] }, { items: [{ label: 'About', href: 'about' }] }]} logoText=\"Company\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
37
registry/components/FooterLogoReveal.json
Normal file
37
registry/components/FooterLogoReveal.json
Normal file
@@ -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": "<FooterLogoReveal logoText=\"Webild\" />",
|
||||
"do": [
|
||||
"Use for general use"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
86
registry/components/FooterMedia.json
Normal file
86
registry/components/FooterMedia.json
Normal file
@@ -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",
|
||||
"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",
|
||||
"logoText?": "string (default: 'Webild')",
|
||||
"copyrightText?": "string (default: '© 2025 | Webild')",
|
||||
"onPrivacyClick?": "() => void",
|
||||
"ariaLabel?": "string (default: 'Site footer')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<FooterMedia imageSrc=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires columns[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
68
registry/components/FooterSimple.json
Normal file
68
registry/components/FooterSimple.json
Normal file
@@ -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",
|
||||
"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": "<FooterSimple columns={[{ title: 'Navigate', items: [{ label: 'Home', href: '#' }, { label: 'About', href: '#' }] }, { title: 'Resources', items: [{ label: 'Blog', href: '#' }, { label: 'FAQ', href: '#' }] }, { title: 'Legal', items: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }] }]} bottomLeftText=\"© 2025 Company. All rights reserved.\" bottomRightText=\"Made with Webild\" />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires columns[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
26
registry/components/GradientBarsBackground.json
Normal file
26
registry/components/GradientBarsBackground.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "GradientBarsBackground",
|
||||
"description": "Vertical gradient bars with dynamic height distribution creating a wave-like pattern.",
|
||||
"constraints": {},
|
||||
"propsSchema": {
|
||||
"className?": "string",
|
||||
"numBarsPerSide?": "number (default: 8)",
|
||||
"gradientFrom?": "string (default: 'var(--color-primary-cta)')",
|
||||
"gradientTo?": "string (default: 'transparent')",
|
||||
"opacity?": "number (default: 0.075)",
|
||||
"sideWidth?": "string (default: '35%')"
|
||||
},
|
||||
"usageExample": "<GradientBarsBackground numBarsPerSide={8} gradientFrom=\"var(--color-primary-cta)\" gradientTo=\"transparent\" opacity={0.075} sideWidth=\"35%\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
23
registry/components/GridBackround.json
Normal file
23
registry/components/GridBackround.json
Normal file
@@ -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": "<GridBackround size=\"medium\" perspectiveThreeD={false} />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use more than 4 items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
89
registry/components/HeroBillboard.json
Normal file
89
registry/components/HeroBillboard.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"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": 36
|
||||
},
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"imageSrc?": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string (default: '')",
|
||||
"videoAriaLabel?": "string (default: 'Hero video')",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboard \n title=\"Welcome to Our Platform\" \n description=\"Create beautiful, responsive web experiences\" \n tag=\"New Release\" \n imageSrc=\"/hero.jpg\" \n imageAlt=\"Hero banner\"\n buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
78
registry/components/HeroBillboardCarousel.json
Normal file
78
registry/components/HeroBillboardCarousel.json
Normal file
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"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": 36
|
||||
},
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboardCarousel \n title=\"Our Portfolio\" \n description=\"Browse through our collection of projects\" \n tag=\"Portfolio\" \n mediaItems={[\n { imageSrc: '/img1.jpg', imageAlt: 'Product 1' },\n { imageSrc: '/img2.jpg', imageAlt: 'Product 2' },\n { imageSrc: '/img3.jpg', imageAlt: 'Product 3' },\n { imageSrc: '/img4.jpg', imageAlt: 'Product 4' },\n { imageSrc: '/img5.jpg', imageAlt: 'Product 5' },\n { imageSrc: '/img6.jpg', imageAlt: 'Product 6' },\n { imageSrc: '/img7.jpg', imageAlt: 'Product 7' }\n ]}\n buttons={[{ text: 'View Portfolio', href: 'https://example.com' }, { text: 'Contact Us', href: 'contact' }]} \n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
96
registry/components/HeroBillboardDashboard.json
Normal file
96
registry/components/HeroBillboardDashboard.json
Normal file
@@ -0,0 +1,96 @@
|
||||
{
|
||||
"name": "HeroBillboardDashboard",
|
||||
"description": "Full-width hero section with centered text content and an interactive Dashboard component below instead of a static image/video.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Real-Time On-Chain Intelligence",
|
||||
"minChars": 2,
|
||||
"maxChars": 36
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Monitor protocol revenue, trading volume, and wallet activity.",
|
||||
"minChars": 5,
|
||||
"maxChars": 200
|
||||
},
|
||||
"tag": {
|
||||
"required": false,
|
||||
"example": "Live Analytics",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"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<ButtonPropsForVariant> - 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."
|
||||
},
|
||||
"dashboardRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Analytics Dashboard"
|
||||
},
|
||||
"stats": {
|
||||
"required": true,
|
||||
"note": "Exactly 3 stat cards with animated number cycling (values rotate every 3s via TextNumberCount)"
|
||||
},
|
||||
"sidebarItems": {
|
||||
"required": true,
|
||||
"note": "Array of sidebar navigation items with icons"
|
||||
},
|
||||
"listItems": {
|
||||
"required": true,
|
||||
"note": "Array of list items for the auto-scrolling list section"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"dashboard": "{title: string, stats: [DashboardStat, DashboardStat, DashboardStat], logoIcon: LucideIcon, sidebarItems: DashboardSidebarItem[], searchPlaceholder?: string, buttons: ButtonConfig[], chartTitle?: string, chartData?: ChartDataItem[], listItems: DashboardListItem[], listTitle?: string, imageSrc: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, className?: string, containerClassName?: string, sidebarClassName?: string, statClassName?: string, chartClassName?: string, listClassName?: string}",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"descriptionClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"buttonContainerClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string",
|
||||
"dashboardClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"background-highlight\" borderRadius=\"rounded\">\n <HeroBillboardDashboard\n title=\"Real-Time On-Chain Intelligence\"\n description=\"Monitor protocol revenue, trading volume, and wallet activity.\"\n tag=\"Live Analytics\"\n tagIcon={Activity}\n background={{ variant: 'plain' }}\n buttons={[{ text: 'Start Building', href: '#' }]}\n dashboard={{\n title: 'Analytics',\n logoIcon: Zap,\n sidebarItems: [{ icon: LayoutDashboard, label: 'Dashboard' }],\n buttons: [{ text: 'Export' }],\n stats: [\n { label: 'Revenue', values: ['$1.2M', '$1.5M'] },\n { label: 'Users', values: ['50K', '75K'] },\n { label: 'Growth', values: ['+25%', '+30%'] }\n ],\n chartData: [...],\n listItems: [...],\n imageSrc: '/dashboard.jpg'\n }}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for SaaS landing pages",
|
||||
"Use for analytics/dashboard product showcases",
|
||||
"Use for data visualization platforms",
|
||||
"Requires dashboard prop with all nested properties"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without dashboard data",
|
||||
"Do not use for simple hero sections without interactive elements"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
79
registry/components/HeroBillboardGallery.json
Normal file
79
registry/components/HeroBillboardGallery.json
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n <HeroBillboardGallery \n title=\"Explore Our Collection\" \n description=\"Discover amazing products and experiences\" \n tag=\"Featured\" \n mediaItems={[\n { imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' },\n { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' },\n { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' },\n { imageSrc: '/img4.jpg', imageAlt: 'Gallery 4' },\n { imageSrc: '/img5.jpg', imageAlt: 'Gallery 5' }\n ]}\n buttons={[{ text: 'View Gallery', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
|
||||
"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 3 items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
83
registry/components/HeroBillboardRotatedCarousel.json
Normal file
83
registry/components/HeroBillboardRotatedCarousel.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"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": 36
|
||||
},
|
||||
"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",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - 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",
|
||||
"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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroBillboardRotatedCarousel \n title=\"Transform Your Workflow\" \n description=\"Experience seamless collaboration and productivity\" \n tag=\"New Release\" \n tagIcon={Sparkles}\n buttons={[{ text: 'Get Started' }, { text: 'Learn More' }]}\n carouselItems={[\n { id: '1', imageSrc: '/image1.jpg', imageAlt: 'Product 1' },\n { id: '2', imageSrc: '/image2.jpg', imageAlt: 'Product 2' },\n { id: '3', imageSrc: '/image3.jpg', imageAlt: 'Product 3' },\n { id: '4', imageSrc: '/image4.jpg', imageAlt: 'Product 4' },\n { id: '5', imageSrc: '/image5.jpg', imageAlt: 'Product 5' },\n { id: '6', imageSrc: '/image6.jpg', imageAlt: 'Product 6' }\n ]}\n autoPlay={true}\n autoPlayInterval={4000}\n />\n</ThemeProvider>",
|
||||
"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 6 items"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
103
registry/components/HeroBillboardScroll.json
Normal file
103
registry/components/HeroBillboardScroll.json
Normal file
@@ -0,0 +1,103 @@
|
||||
{
|
||||
"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": 36
|
||||
},
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"imageSrc?": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string (default: '')",
|
||||
"videoAriaLabel?": "string (default: 'Hero video')",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroBillboardScroll \n title=\"Scroll Animations\" \n description=\"Experience smooth, performant animations as you scroll through your content\" \n tag=\"Unleash the Power\" \n imageSrc=\"/dashboard.jpg\" \n imageAlt=\"Dashboard preview\"\n buttons={[{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
78
registry/components/HeroCarouselLogo.json
Normal file
78
registry/components/HeroCarouselLogo.json
Normal file
@@ -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",
|
||||
"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<ButtonPropsForVariant> - 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": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroCarouselLogo \n logoText=\"WEBILD\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n slides={[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }, { imageSrc: '/slide3.jpg', imageAlt: 'Slide 3' }]}\n autoplayDelay={5000}\n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
101
registry/components/HeroCentered.json
Normal file
101
registry/components/HeroCentered.json
Normal file
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"name": "HeroCentered",
|
||||
"description": "Full-screen centered hero section with avatar group above title, centered text content, configurable background, and optional buttons.",
|
||||
"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
|
||||
},
|
||||
"avatarText": {
|
||||
"required": false,
|
||||
"example": "Trusted by 1000+ users",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
}
|
||||
},
|
||||
"avatarRules": {
|
||||
"avatars": {
|
||||
"required": true,
|
||||
"minItems": 1,
|
||||
"maxItems": 5,
|
||||
"structure": {
|
||||
"src": "string - Avatar image source",
|
||||
"alt": "string - Alt text for accessibility"
|
||||
},
|
||||
"note": "Avatars are displayed above the title for social proof"
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"marqueeRules": {
|
||||
"required": false,
|
||||
"structure": {
|
||||
"items": "MarqueeItem[] - Array of items with text, optional icon/image",
|
||||
"speed": "number - Scroll speed (default: 30)",
|
||||
"showCard": "boolean - Whether to show card styling (default: true)"
|
||||
},
|
||||
"note": "Optional logo marquee positioned at bottom of hero"
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"avatars": "Avatar[] (required) - Array with src and alt",
|
||||
"avatarText?": "string",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"marqueeItems?": "MarqueeItem[]",
|
||||
"marqueeSpeed?": "number (default: 30)",
|
||||
"showMarqueeCard?": "boolean (default: true)",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"descriptionClassName?": "string",
|
||||
"avatarGroupClassName?": "string",
|
||||
"buttonContainerClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string",
|
||||
"marqueeClassName?": "string",
|
||||
"marqueeItemClassName?": "string",
|
||||
"marqueeCardClassName?": "string",
|
||||
"marqueeImageClassName?": "string",
|
||||
"marqueeTextClassName?": "string",
|
||||
"marqueeIconClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <HeroCentered\n title=\"Build Modern Web Experiences\"\n description=\"Create stunning, responsive websites with our component library.\"\n background={{ variant: 'plain' }}\n avatars={[\n { src: '/avatar1.jpg', alt: 'User 1' },\n { src: '/avatar2.jpg', alt: 'User 2' },\n { src: '/avatar3.jpg', alt: 'User 3' }\n ]}\n avatarText=\"Trusted by 1000+ users\"\n buttons={[{ text: 'Get Started', href: '#' }]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for impactful landing pages with social proof emphasis",
|
||||
"Include avatars for social proof",
|
||||
"Use appropriate background variant",
|
||||
"Full viewport height - purely text-focused hero"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without avatars",
|
||||
"Do not use for heroes with media content below"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
83
registry/components/HeroLogo.json
Normal file
83
registry/components/HeroLogo.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroLogo \n logoText=\"Webild\" \n description=\"Building the future of web design with innovative solutions\" \n buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n imageSrc=\"/placeholders/placeholder5.jpg\" \n imageAlt=\"Hero background\"\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for landing pages",
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires buttons[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
76
registry/components/HeroLogoBillboard.json
Normal file
76
registry/components/HeroLogoBillboard.json
Normal file
@@ -0,0 +1,76 @@
|
||||
{
|
||||
"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",
|
||||
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n <HeroLogoBillboard \n logoText=\"klime studio\" \n description=\"we help driven founders build the brands of tomorrow through websites, product design & branding.\" \n imageSrc=\"/hero.jpg\"\n imageAlt=\"Hero showcase\"\n frameStyle=\"card\"\n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
94
registry/components/HeroLogoBillboardSplit.json
Normal file
94
registry/components/HeroLogoBillboardSplit.json
Normal file
@@ -0,0 +1,94 @@
|
||||
{
|
||||
"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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"layoutOrder": "'default' | 'reverse'",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n <HeroLogoBillboardSplit \n logoText=\"ACME\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n buttons={[\n { text: 'Get Started', href: '#' },\n { text: 'Learn More', href: '#' }\n ]}\n layoutOrder=\"default\"\n imageSrc=\"/hero.jpg\"\n imageAlt=\"Hero showcase\"\n frameStyle=\"browser\"\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for landing pages",
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires buttons[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
107
registry/components/HeroOverlay.json
Normal file
107
registry/components/HeroOverlay.json
Normal file
@@ -0,0 +1,107 @@
|
||||
{
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n <HeroOverlay \n title=\"Build Modern Web Experiences\" \n description=\"Create stunning, responsive websites with our comprehensive component library\" \n tag=\"New Release\" \n imageSrc=\"/hero-background.jpg\" \n imageAlt=\"Hero background\"\n textPosition=\"bottom-left\"\n showBlur={true}\n showDimOverlay={false}\n buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for landing pages",
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
80
registry/components/HeroPersonalLinks.json
Normal file
80
registry/components/HeroPersonalLinks.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"name": "HeroPersonalLinks",
|
||||
"description": "Full-screen centered hero section with title, social link buttons, and link cards for personal/portfolio pages.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Hi, I'm John Doe",
|
||||
"minChars": 2,
|
||||
"maxChars": 36
|
||||
}
|
||||
},
|
||||
"socialLinkRules": {
|
||||
"required": false,
|
||||
"structure": {
|
||||
"icon": "LucideIcon",
|
||||
"label": "string - Display label",
|
||||
"href": "string - Link destination"
|
||||
},
|
||||
"note": "Array of social media links displayed as pill buttons"
|
||||
},
|
||||
"linkCardRules": {
|
||||
"required": true,
|
||||
"minItems": 1,
|
||||
"structure": {
|
||||
"icon": "LucideIcon (optional if imageSrc/videoSrc provided)",
|
||||
"imageSrc": "string - Image source (optional)",
|
||||
"videoSrc": "string - Video source (optional)",
|
||||
"imageAlt": "string - Alt text for image",
|
||||
"videoAriaLabel": "string - Aria label for video",
|
||||
"title": "string - Card title",
|
||||
"description": "string - Card description",
|
||||
"button": "ButtonConfig - Card action button"
|
||||
},
|
||||
"note": "Array of link cards with icon/media, title, description, and action button"
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"title": "string",
|
||||
"titleSegments?": "TitleSegment[] - For inline images in title",
|
||||
"socialLinks?": "SocialLink[] - Array with icon, label, href",
|
||||
"linkCards": "LinkCard[] (required) - Array with icon/media, title, description, button",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'Personal links section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textboxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"titleImageWrapperClassName?": "string",
|
||||
"titleImageClassName?": "string",
|
||||
"socialLinksClassName?": "string",
|
||||
"socialLinkClassName?": "string",
|
||||
"linkCardsClassName?": "string",
|
||||
"linkCardClassName?": "string",
|
||||
"linkCardIconClassName?": "string",
|
||||
"linkCardTitleClassName?": "string",
|
||||
"linkCardDescriptionClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <HeroPersonalLinks\n background={{ variant: 'plain' }}\n title=\"Hi, I'm John Doe\"\n socialLinks={[\n { icon: Twitter, label: 'Twitter', href: 'https://twitter.com' },\n { icon: Linkedin, label: 'LinkedIn', href: 'https://linkedin.com' }\n ]}\n linkCards={[\n {\n icon: Briefcase,\n title: 'My Portfolio',\n description: 'Check out my latest work',\n button: { text: 'View', href: '/portfolio' }\n },\n {\n imageSrc: '/project.jpg',\n title: 'Latest Project',\n description: 'A new design system',\n button: { text: 'Explore', href: '/project' }\n }\n ]}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use only for single-section personal brand websites (link-in-bio style)",
|
||||
"Can optionally include a footer section",
|
||||
"Include at least one link card",
|
||||
"Use social links for social media presence"
|
||||
],
|
||||
"dont": [
|
||||
"Never use with other sections",
|
||||
"Never use for multi-page or multi-section websites",
|
||||
"Do not use without link cards",
|
||||
"Do not use for product or company landing pages"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
79
registry/components/HeroSignup.json
Normal file
79
registry/components/HeroSignup.json
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"name": "HeroSignup",
|
||||
"description": "Full-screen centered hero section with tag badge above title, centered text content, configurable background, and email signup form below.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Join the Future of Web Development",
|
||||
"minChars": 2,
|
||||
"maxChars": 36
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "Be the first to experience our revolutionary platform. Sign up now and get exclusive early access.",
|
||||
"minChars": 5,
|
||||
"maxChars": 200
|
||||
},
|
||||
"tag": {
|
||||
"required": true,
|
||||
"example": "Early Access",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
},
|
||||
"inputPlaceholder": {
|
||||
"required": false,
|
||||
"example": "Enter your email",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
},
|
||||
"buttonText": {
|
||||
"required": false,
|
||||
"example": "Get Early Access",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'glowing-orb-sparkles' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"inputPlaceholder?": "string (default: 'Enter your email')",
|
||||
"buttonText?": "string (default: 'Get Started')",
|
||||
"onSubmit?": "(email: string) => void",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"descriptionClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"formWrapperClassName?": "string",
|
||||
"formClassName?": "string",
|
||||
"inputClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <HeroSignup\n title=\"Join the Future of Web Development\"\n description=\"Be the first to experience our revolutionary platform.\"\n background={{ variant: 'plain' }}\n tag=\"Early Access\"\n tagIcon={Sparkles}\n inputPlaceholder=\"Enter your email\"\n buttonText=\"Get Early Access\"\n onSubmit={(email) => console.log(email)}\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use ONLY for waitlist or coming soon websites",
|
||||
"Use for single-page early access email capture",
|
||||
"Include a compelling tag badge"
|
||||
],
|
||||
"dont": [
|
||||
"Never use for any other type of website",
|
||||
"Never use for multi-section websites",
|
||||
"Never use for product, company, or portfolio websites",
|
||||
"Do not use for heroes that need multiple CTA buttons",
|
||||
"Do not use for heroes with media content"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
100
registry/components/HeroSplit.json
Normal file
100
registry/components/HeroSplit.json
Normal file
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"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",
|
||||
"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<ButtonPropsForVariant> - 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",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <HeroSplit \n title=\"Build Better Products\" \n description=\"Create exceptional user experiences with our design system\" \n tag=\"New Release\"\n imagePosition=\"right\" \n imageSrc=\"/hero.jpg\"\n imageAlt=\"Product showcase\"\n buttons={[{ text: 'Start Building', href: 'https://example.com' }, { text: 'View Demo', href: 'demo' }]} \n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
113
registry/components/HeroSplitDualMedia.json
Normal file
113
registry/components/HeroSplitDualMedia.json
Normal file
@@ -0,0 +1,113 @@
|
||||
{
|
||||
"name": "HeroSplitDualMedia",
|
||||
"description": "Split-layout hero section with configurable background, text content with rating on one side, and dual image/video grid on the other.",
|
||||
"constraints": {
|
||||
"textRules": {
|
||||
"title": {
|
||||
"required": true,
|
||||
"example": "Transform your business with proven strategies",
|
||||
"minChars": 2,
|
||||
"maxChars": 36
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"example": "I help entrepreneurs and executives unlock their full potential and build thriving businesses.",
|
||||
"minChars": 5,
|
||||
"maxChars": 200
|
||||
},
|
||||
"tag": {
|
||||
"required": true,
|
||||
"example": "Business Coach",
|
||||
"minChars": 2,
|
||||
"maxChars": 30
|
||||
},
|
||||
"ratingText": {
|
||||
"required": true,
|
||||
"example": "Rated by loving Clients",
|
||||
"minChars": 2,
|
||||
"maxChars": 50
|
||||
}
|
||||
},
|
||||
"buttonRules": {
|
||||
"maxButtons": 2,
|
||||
"structure": {
|
||||
"text": "string - Button label",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
|
||||
},
|
||||
"note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
|
||||
},
|
||||
"mediaRules": {
|
||||
"mediaItems": {
|
||||
"required": true,
|
||||
"exactCount": 2,
|
||||
"note": "Array of exactly 2 media items displayed in 2-column grid",
|
||||
"structure": {
|
||||
"imageSrc": "string - Path to image (optional if videoSrc provided)",
|
||||
"videoSrc": "string - Path to video (optional if imageSrc provided)",
|
||||
"imageAlt": "string - Alt text for image",
|
||||
"videoAriaLabel": "string - Aria label for video"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ratingRules": {
|
||||
"rating": {
|
||||
"required": true,
|
||||
"min": 1,
|
||||
"max": 5,
|
||||
"note": "Number of filled star icons to display"
|
||||
},
|
||||
"ratingText": {
|
||||
"required": true,
|
||||
"note": "Text displayed next to star rating"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"tag": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "ButtonConfig[]",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"mediaItems": "[MediaItem, MediaItem] (required) - Exactly 2 media items",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"rating": "number (required) - Number of stars (1-5)",
|
||||
"ratingText": "string",
|
||||
"ariaLabel?": "string (default: 'Hero section')",
|
||||
"className?": "string",
|
||||
"containerClassName?": "string",
|
||||
"textBoxClassName?": "string",
|
||||
"titleClassName?": "string",
|
||||
"descriptionClassName?": "string",
|
||||
"tagClassName?": "string",
|
||||
"buttonContainerClassName?": "string",
|
||||
"buttonClassName?": "string",
|
||||
"buttonTextClassName?": "string",
|
||||
"mediaWrapperClassName?": "string",
|
||||
"mediaItemClassName?": "string",
|
||||
"imageClassName?": "string",
|
||||
"ratingClassName?": "string",
|
||||
"ratingTextClassName?": "string"
|
||||
},
|
||||
"usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\">\n <HeroSplitDualMedia\n title=\"Transform your business with proven strategies\"\n description=\"I help entrepreneurs unlock their full potential.\"\n background={{ variant: 'plain' }}\n tag=\"Business Coach\"\n tagIcon={Briefcase}\n buttons={[{ text: 'Book a Call', href: '#' }]}\n mediaItems={[\n { imageSrc: '/coach1.jpg', imageAlt: 'Coaching session' },\n { imageSrc: '/coach2.jpg', imageAlt: 'Workshop' }\n ]}\n rating={5}\n ratingText=\"Rated by loving Clients\"\n />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for coaching, consulting, or service-focused landing pages",
|
||||
"Include exactly 2 media items",
|
||||
"Include star rating for social proof",
|
||||
"Full viewport height with split layout"
|
||||
],
|
||||
"dont": [
|
||||
"Do not use without 2 media items",
|
||||
"Do not use without rating",
|
||||
"Do not use for product showcases"
|
||||
],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
109
registry/components/HeroSplitKpi.json
Normal file
109
registry/components/HeroSplitKpi.json
Normal file
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"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",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Additional click handler (optional)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"propsSchema": {
|
||||
"title": "string",
|
||||
"description": "string",
|
||||
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
|
||||
"avatarText?": "string - Text displayed next to the avatar group",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"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": "<HeroSplitKpi title=\"The Future of Supply Chain\" description=\"Ship globally within 3 days with smart fulfillment\" background={{ variant: \"radial-gradient\" }} enableKpiAnimation={true} kpis={[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]} imageSrc=\"/hero-image.jpg\" imageAlt=\"Supply chain\" buttons={[{ text: 'Get Started', href: 'https://example.com' }]} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
62
registry/components/InlineImageSplitTextAbout.json
Normal file
62
registry/components/InlineImageSplitTextAbout.json
Normal file
@@ -0,0 +1,62 @@
|
||||
{
|
||||
"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",
|
||||
"href": "string - Link destination (optional)",
|
||||
"onClick": "() => void - Click handler (optional)",
|
||||
"props": "Partial<ButtonPropsForVariant> - 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<ButtonPropsForVariant<CTAButtonVariant>> }>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'About section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <InlineImageSplitTextAbout heading={[{ type: 'text', content: 'Building the future with' }, { type: 'image', src: '/brand/logo.png', alt: 'Company logo' }, { type: 'text', content: 'innovative solutions' }]} useInvertedBackground={false} buttons={[{ text: 'Get Started', href: '/signup' }, { text: 'Learn More', href: '/about' }]} />\n</ThemeProvider>",
|
||||
"do": [
|
||||
"Use for about pages",
|
||||
"Use for company information",
|
||||
"Requires heading[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
35
registry/components/Input.json
Normal file
35
registry/components/Input.json
Normal file
@@ -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",
|
||||
"onChange": "(value: string) => void",
|
||||
"type?": "string (default: 'text')",
|
||||
"placeholder?": "string",
|
||||
"required?": "boolean (default: false)",
|
||||
"disabled?": "boolean (default: false)",
|
||||
"ariaLabel?": "string",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<Input value={name} onChange={(value) => setName(value)} type=\"text\" placeholder=\"Name\" required />",
|
||||
"do": [
|
||||
"Use for feature showcases",
|
||||
"Use for capability displays"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
86
registry/components/MediaAbout.json
Normal file
86
registry/components/MediaAbout.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"imageSrc?": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string",
|
||||
"videoAriaLabel?": "string",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'About section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
91
registry/components/MediaSplitTabsAbout.json
Normal file
91
registry/components/MediaSplitTabsAbout.json
Normal file
@@ -0,0 +1,91 @@
|
||||
{
|
||||
"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",
|
||||
"label": "string - Tab button text",
|
||||
"description": "string - Description shown when tab is active"
|
||||
},
|
||||
"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')",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'About section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MediaSplitTabsAbout title=\"Why Choose Us\" tabs={[{ id: 'collaboration', label: 'Deep Collaboration', description: 'We work side by side with your team, fostering open communication and shared accountability.' }, { id: 'expertise', label: 'Expertise', description: 'Our team brings decades of combined experience across industries.' }, { id: 'solutions', label: 'Tailored Solutions', description: 'Every challenge is unique. We craft custom strategies that align with your specific goals.' }]} imageSrc=\"/team-photo.jpg\" imageAlt=\"Team collaboration\" imagePosition=\"right\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
97
registry/components/MetricCardEleven.json
Normal file
97
registry/components/MetricCardEleven.json
Normal file
@@ -0,0 +1,97 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardEleven metrics={[{ id: '1', value: '10M+', title: 'Organic Views', description: 'Growth through smart content strategy', imageSrc: '/hero/hero-1.webp', imageAlt: 'Content creator working' }, { id: '2', value: '500K+', title: 'New Followers', description: 'Engaged community members gained', imageSrc: '/hero/hero-2.webp', imageAlt: 'Social media engagement' }]} title=\"Our Impact\" description=\"See the results we've delivered for our clients\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
71
registry/components/MetricCardFourteen.json
Normal file
71
registry/components/MetricCardFourteen.json
Normal file
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"metrics": "Array<{ id: string, value: string, description: string }>",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardFourteen title=\"We're committed to sustainability and reducing our environmental impact.\" tag=\"Impact\" metrics={[{ id: '1', value: '16x', description: 'By using 80% less steel, we've lowered our carbon footprint.' }, { id: '2', value: '95%', description: 'Customer satisfaction rate across all products.' }]} useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
93
registry/components/MetricCardOne.json
Normal file
93
registry/components/MetricCardOne.json
Normal file
@@ -0,0 +1,93 @@
|
||||
{
|
||||
"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' | 'bento-grid' | 'bento-grid-inverted'",
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardOne metrics={[{ id: '1', value: '100', title: 'million', description: 'Active users worldwide', icon: TrendingUp }, { id: '2', value: '700', title: 'thousand', description: 'Projects completed successfully', icon: Users }]} title=\"Our Impact\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for statistics displays",
|
||||
"Use for achievement showcases",
|
||||
"Requires metrics[]",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
91
registry/components/MetricCardSeven.json
Normal file
91
registry/components/MetricCardSeven.json
Normal file
@@ -0,0 +1,91 @@
|
||||
{
|
||||
"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')",
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
108
registry/components/MetricCardTen.json
Normal file
108
registry/components/MetricCardTen.json
Normal file
@@ -0,0 +1,108 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardTen metrics={[{ id: '1', title: 'Senior Software Engineer, Platform', subtitle: 'San Francisco, CA · Full-time · Remote eligible', category: 'Engineering', value: '$185K – $265K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '2', title: 'Product Designer, Enterprise', subtitle: 'New York, NY · Full-time', category: 'Design', value: '$145K – $195K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '3', title: 'Data Scientist, ML Platform', subtitle: 'Remote · Full-time', category: 'Data Science', value: '$168K – $238K', buttons: [{ text: 'Apply Now', href: '#' }] }]} title=\"Open Positions\" description=\"Join our team and help shape the future of AI\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
87
registry/components/MetricCardThree.json
Normal file
87
registry/components/MetricCardThree.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardThree metrics={[{ id: '1', icon: TrendingUp, title: 'Conversions', value: '7,000+' }, { id: '2', icon: Users, title: 'Active Users', value: '50,000+' }]} title=\"Performance Metrics\" description=\"See how we're making a difference\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"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
|
||||
}
|
||||
}
|
||||
81
registry/components/MetricCardTwo.json
Normal file
81
registry/components/MetricCardTwo.json
Normal file
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"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' | 'bento-grid' | 'bento-grid-inverted'",
|
||||
"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",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||||
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
||||
"useInvertedBackground": "boolean",
|
||||
"ariaLabel?": "string (default: 'Metrics section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '98%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
|
||||
"do": [
|
||||
"Use for statistics displays",
|
||||
"Use for achievement showcases",
|
||||
"Requires metrics[]",
|
||||
"Requires titleSegments?[]",
|
||||
"Requires buttons?[]"
|
||||
],
|
||||
"dont": [],
|
||||
"editRules": {
|
||||
"textOnly": true,
|
||||
"layoutLocked": true,
|
||||
"styleLocked": true
|
||||
}
|
||||
}
|
||||
66
registry/components/MetricSplitMediaAbout.json
Normal file
66
registry/components/MetricSplitMediaAbout.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"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": "boolean",
|
||||
"tag?": "string",
|
||||
"tagIcon?": "LucideIcon",
|
||||
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"imageSrc?": "string",
|
||||
"videoSrc?": "string",
|
||||
"imageAlt?": "string",
|
||||
"videoAriaLabel?": "string (default: 'About section video')",
|
||||
"mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
||||
"ariaLabel?": "string (default: 'About section')",
|
||||
"className?": "string"
|
||||
},
|
||||
"usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <MetricSplitMediaAbout\n tag=\"Case study\"\n tagIcon={Sparkles}\n title=\"We help automate what matters most\"\n description=\"Hamilton, a growing e-commerce business, was overwhelmed by repetitive order processing. We built custom automation that integrated seamlessly with their existing tools.\"\n metrics={[{ value: '50+', title: 'Hours saved every month' }, { value: '40%', title: 'Reduction in manual work' }]}\n imageSrc=\"/placeholders/placeholder.jpg\"\n imageAlt=\"Case study image\"\n useInvertedBackground={false}\n />\n</ThemeProvider>",
|
||||
"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
|
||||
}
|
||||
}
|
||||
69
registry/components/NavbarLayoutFloatingInline.json
Normal file
69
registry/components/NavbarLayoutFloatingInline.json
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user