92 lines
4.9 KiB
JSON
92 lines
4.9 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.",
|
|
"details": "Use for brand-focused landing pages with multiple background images/videos that auto-rotate. Combines auto-playing carousel with logo layout. Features full viewport height with carousel of background media slides (image or video), auto-advancing with customizable delay (default 3000ms). Linear gradient blur overlay at bottom (75vh height) for improved logo visibility. Large responsive text logo automatically fills the container width below content. Above logo is horizontal row with description text on left and up to 2 buttons on right (stacked vertically on mobile). Progress bars at bottom show carousel progress with animated fill. Users can click progress bars to navigate slides directly.",
|
|
"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}> (required)",
|
|
"slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items",
|
|
"autoplayDelay?": "number (default: 3000)",
|
|
"showDimOverlay?": "boolean (default: false)",
|
|
"ariaLabel?": "string (default: 'Hero section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"contentContainerClassName?": "string",
|
|
"descriptionClassName?": "string",
|
|
"buttonContainerClassName?": "string",
|
|
"buttonClassName?": "string",
|
|
"buttonTextClassName?": "string",
|
|
"logoContainerClassName?": "string",
|
|
"logoClassName?": "string",
|
|
"mediaWrapperClassName?": "string",
|
|
"imageClassName?": "string",
|
|
"blurClassName?": "string",
|
|
"dimOverlayClassName?": "string",
|
|
"progressBarClassName?": "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
|
|
}
|
|
}
|