115 lines
5.2 KiB
JSON
115 lines
5.2 KiB
JSON
{
|
|
"name": "HeroOverlay",
|
|
"description": "Full-screen hero section with background image/video overlay, circular blur effect, and bottom-left text positioning.",
|
|
"details": "Use for dramatic, immersive landing pages with strong visual impact. Features full viewport height with background media (image or video), text overlay positioned at bottom-left for modern editorial layouts. Includes optional circular blur effect with radial gradient mask (enabled by default) and optional dim overlay for improved text readability. Text automatically styled with light colors for visibility over background media.",
|
|
"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 Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
|
|
},
|
|
"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)"
|
|
},
|
|
"showBlur": {
|
|
"required": false,
|
|
"default": true,
|
|
"note": "Controls circular blur effect with radial gradient at bottom-left corner"
|
|
},
|
|
"showDimOverlay": {
|
|
"required": false,
|
|
"default": false,
|
|
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast"
|
|
}
|
|
},
|
|
"buttonRules": {
|
|
"maxButtons": 2,
|
|
"structure": {
|
|
"text": "string - Button label (required)",
|
|
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
|
|
"onClick": "() => void - Additional click handler (optional)",
|
|
"props": "Partial<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'",
|
|
"avatars?": "Array<{ src: string, alt: string }>",
|
|
"avatarText?": "string",
|
|
"imageSrc?": "string",
|
|
"videoSrc?": "string",
|
|
"imageAlt?": "string (default: '')",
|
|
"videoAriaLabel?": "string (default: 'Hero video')",
|
|
"showDimOverlay?": "boolean (default: false)",
|
|
"showBlur?": "boolean (default: true)",
|
|
"textPosition?": "'top' | 'bottom' (default: 'bottom')",
|
|
"ariaLabel?": "string (default: 'Hero section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"titleClassName?": "string",
|
|
"descriptionClassName?": "string",
|
|
"tagClassName?": "string",
|
|
"buttonContainerClassName?": "string",
|
|
"buttonClassName?": "string",
|
|
"buttonTextClassName?": "string",
|
|
"avatarGroupClassName?": "string",
|
|
"mediaWrapperClassName?": "string",
|
|
"imageClassName?": "string",
|
|
"blurClassName?": "string",
|
|
"dimOverlayClassName?": "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 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
|
|
}
|
|
}
|