121 lines
5.4 KiB
JSON
121 lines
5.4 KiB
JSON
{
|
|
"name": "HeroOverlay",
|
|
"description": "Full-screen hero section with background image/video overlay, circular blur effect, and configurable text positioning (center or bottom-left).",
|
|
"details": "Use for dramatic, immersive landing pages with strong visual impact. Features full viewport height with background media (image or video), text overlay with two positioning options: centered for balanced composition or 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"
|
|
},
|
|
"videoSrc": {
|
|
"required": false,
|
|
"example": "/hero-background.mp4",
|
|
"note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
|
|
},
|
|
"imageAlt": {
|
|
"required": false,
|
|
"example": "Hero background",
|
|
"note": "Empty string marks image as decorative (aria-hidden)"
|
|
},
|
|
"textPosition": {
|
|
"required": false,
|
|
"options": [
|
|
"center",
|
|
"bottom-left"
|
|
],
|
|
"default": "bottom-left",
|
|
"note": "'center' positions text in the center of viewport, 'bottom-left' positions text at bottom-left corner"
|
|
},
|
|
"showBlur": {
|
|
"required": false,
|
|
"default": true,
|
|
"note": "Controls circular blur effect with radial gradient. Blur follows text position (centered or bottom-left corner)"
|
|
},
|
|
"showDimOverlay": {
|
|
"required": false,
|
|
"default": false,
|
|
"note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast"
|
|
}
|
|
},
|
|
"buttonRules": {
|
|
"maxButtons": 2,
|
|
"structure": {
|
|
"text": "string - Button label (required)",
|
|
"href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
|
|
"onClick": "() => void - Additional click handler (optional)",
|
|
"props": "Partial<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",
|
|
"containerClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"titleClassName?": "string",
|
|
"descriptionClassName?": "string",
|
|
"tagClassName?": "string",
|
|
"buttonContainerClassName?": "string",
|
|
"buttonClassName?": "string",
|
|
"buttonTextClassName?": "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 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
|
|
}
|
|
}
|