45 lines
2.0 KiB
JSON
45 lines
2.0 KiB
JSON
{
|
|
"name": "TextAbout",
|
|
"description": "Centered about section with large animated text and optional buttons below.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "We build products that empower teams to create exceptional digital experiences",
|
|
"minChars": 10,
|
|
"maxChars": 200
|
|
}
|
|
},
|
|
"buttonRules": {
|
|
"maxButtons": 2,
|
|
"structure": {
|
|
"text": "string - Button label (required)",
|
|
"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. All sections should be wrapped in a single ThemeProvider at the app/page level."
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"title": "string",
|
|
"buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
|
|
"useInvertedBackground": "'noInvert' | 'invertDefault'",
|
|
"ariaLabel?": "string (default: 'About section')",
|
|
"className?": "string"
|
|
},
|
|
"usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <TextAbout title=\"We create exceptional digital experiences\" useInvertedBackground={\"noInvert\"} buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} />\n</ThemeProvider>",
|
|
"do": [
|
|
"Use for feature showcases",
|
|
"Use for capability displays",
|
|
"Use for about pages",
|
|
"Use for company information",
|
|
"Requires buttons?[]"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
} |