78 lines
3.8 KiB
JSON
78 lines
3.8 KiB
JSON
{
|
|
"name": "HeroCarouselLogo",
|
|
"description": "Full-screen hero section with auto-playing carousel background, large text logo at bottom that scales to fill container width, description and button row above, with progress bars and linear gradient blur overlay.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"logoText": {
|
|
"required": true,
|
|
"example": "WEBILD",
|
|
"minChars": 2,
|
|
"maxChars": 20
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Create stunning, responsive websites with our comprehensive component library",
|
|
"minChars": 5,
|
|
"maxChars": 200
|
|
}
|
|
},
|
|
"mediaRules": {
|
|
"slides": {
|
|
"required": true,
|
|
"example": "[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }]",
|
|
"note": "Array of CarouselSlide objects. Each slide can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Video takes precedence over image if both provided in a slide."
|
|
},
|
|
"autoplayDelay": {
|
|
"required": false,
|
|
"default": 3000,
|
|
"note": "Milliseconds between automatic slide transitions"
|
|
},
|
|
"showDimOverlay": {
|
|
"required": false,
|
|
"default": false,
|
|
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast"
|
|
}
|
|
},
|
|
"buttonRules": {
|
|
"maxButtons": 2,
|
|
"structure": {
|
|
"text": "string - Button label (required)",
|
|
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
|
|
"onClick": "() => void - Additional click handler (optional)",
|
|
"props": "Partial<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
|
|
}
|
|
} |