67 lines
3.2 KiB
JSON
67 lines
3.2 KiB
JSON
{
|
|
"name": "FeatureProcessSteps",
|
|
"description": "Split-layout feature section with text on left and numbered process steps with timeline on right.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Getting you results without the complexity",
|
|
"minChars": 10,
|
|
"maxChars": 100
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Our three-step process takes you from identifying opportunities to launching systems, with clear communication and support at every stage.",
|
|
"minChars": 20,
|
|
"maxChars": 300
|
|
},
|
|
"tag": {
|
|
"required": false,
|
|
"example": "How we work",
|
|
"minChars": 2,
|
|
"maxChars": 30
|
|
}
|
|
},
|
|
"stepsRules": {
|
|
"minSteps": 2,
|
|
"recommendedSteps": 3,
|
|
"maxSteps": 6,
|
|
"structure": {
|
|
"number": "string - Step number to display (required, e.g., '01', '02', '1', '2')",
|
|
"title": "string - Step title (required, e.g., 'Discovery & Assessment')",
|
|
"description": "string - Step description (required)",
|
|
"tag": "string - Optional tag/badge for the step (e.g., 'Week 1', 'Ongoing')"
|
|
},
|
|
"note": "Minimum 2 steps required, but 3+ steps recommended for optimal visual balance. Each step shows a numbered card with a connecting timeline line."
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"title": "string",
|
|
"description": "string",
|
|
"steps": "Array<{ number: string, title: string, description: string, tag?: string }>",
|
|
"useInvertedBackground": "'noInvert' | 'invertDefault'",
|
|
"tag?": "string",
|
|
"tagIcon?": "LucideIcon",
|
|
"buttons?": "ButtonConfig[]",
|
|
"ariaLabel?": "string (default: 'Process steps section')",
|
|
"className?": "string"
|
|
},
|
|
"usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n <FeatureProcessSteps\n tag=\"How we work\"\n tagIcon={Sparkles}\n title=\"Getting you results without the complexity\"\n description=\"Our three-step process takes you from identifying opportunities to launching systems.\"\n buttons={[{ text: 'Book a call', href: '#' }, { text: 'Watch video', href: '#' }]}\n steps={[\n { number: '01', title: 'Discovery & Assessment', tag: 'Week 1', description: 'We analyze your workflows and identify opportunities.' },\n { number: '02', title: 'Build & Deploy', tag: 'Weeks 2-4', description: 'We create and launch custom systems tailored to your operations.' },\n { number: '03', title: 'Train & Support', tag: 'Ongoing', description: 'We train your team and provide ongoing support.' }\n ]}\n useInvertedBackground=\"noInvert\"\n />\n</ThemeProvider>",
|
|
"do": [
|
|
"Use for process flows",
|
|
"Use for roadmaps",
|
|
"Use for step-by-step explanation",
|
|
"Use for feature showcases",
|
|
"Use for capability displays",
|
|
"Requires steps[]"
|
|
],
|
|
"dont": [
|
|
"Do not use non-sequential content",
|
|
"Do not use single item"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
} |