From 67ced19ff2ceef74acba9e085eac21dd381dc5c0 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 17 Apr 2026 21:18:59 +0000 Subject: [PATCH] Switch to version 2: added registry/components/TextSplitAbout.json --- registry/components/TextSplitAbout.json | 66 +++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 registry/components/TextSplitAbout.json diff --git a/registry/components/TextSplitAbout.json b/registry/components/TextSplitAbout.json new file mode 100644 index 0000000..f8ddf22 --- /dev/null +++ b/registry/components/TextSplitAbout.json @@ -0,0 +1,66 @@ +{ + "name": "TextSplitAbout", + "description": "Split-layout about section with large heading on left and multiple description paragraphs with optional buttons on right.", + "details": "Use for about sections with prominent messaging and optional CTA. Features responsive split layout with large animated heading (7xl) on left, multiple description paragraphs with optional buttons on right. Each description text animates independently. Supports up to 2 buttons with primary/secondary styling, optional border separator below content. Button variant controlled by ThemeProvider, text animations use theme defaults.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "About Us", + "minChars": 2, + "maxChars": 30 + }, + "description": { + "required": true, + "type": "array of strings", + "example": [ + "We're a team passionate about creating exceptional digital experiences", + "Our mission is to empower designers and developers" + ], + "minChars": 10, + "maxChars": 300, + "note": "Each description paragraph should be 10-300 characters" + } + }, + "buttonRules": { + "maxButtons": 2, + "structure": { + "text": "string - Button label (required)", + "href": "string - Link destination (optional)", + "onClick": "() => void - Click handler (optional)", + "props": "Partial - 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", + "description": "string[]", + "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", + "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", + "showBorder?": "boolean (default: false)", + "useInvertedBackground": "boolean", + "ariaLabel?": "string (default: 'About section')", + "className?": "string", + "containerClassName?": "string", + "titleClassName?": "string", + "descriptionClassName?": "string", + "buttonContainerClassName?": "string", + "buttonClassName?": "string", + "buttonTextClassName?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n \n", + "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 + } +}