151 lines
6.9 KiB
JSON
151 lines
6.9 KiB
JSON
{
|
|
"name": "FeatureCardNine",
|
|
"description": "Scroll-based timeline feature section with two animated phone frames and centered content.",
|
|
"details": "Use for mobile-first feature presentations with visual phone mockups. Creates a vertical scroll-based timeline where each feature takes up 100vh of height. Features are displayed with title and description in the center, flanked by two animated phone frames (left and right) that slide in and rotate on scroll. Phone frames use GSAP ScrollTrigger animations: start from off-screen with rotation (-200% left, 200% right with 45deg rotation), then animate to center position with subtle rotation tilt. Desktop phones are 20 (w-20) 2xl:25 (2xl:w-25) in width and 70vh in height. Mobile phones are 45 (w-45) in width and 100 (h-100) in height. Phones display as card with rounded-theme-capped and p-1 padding. Each phone can show either an image or video (discriminated union). Feature content displays in the center with large text (5xl md:6xl title, xl description). Section has py-20 spacing. Mobile layout stacks feature content above phone pairs vertically. Desktop layout uses sticky positioning for phones while content scrolls through. Best for 2-4 features to avoid excessive scroll height.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Powerful Features",
|
|
"minChars": 2,
|
|
"maxChars": 35
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Everything you need to build amazing products",
|
|
"minChars": 5,
|
|
"maxChars": 250
|
|
},
|
|
"tag": {
|
|
"required": false,
|
|
"example": "Features",
|
|
"minChars": 2,
|
|
"maxChars": 30
|
|
}
|
|
},
|
|
"featureCardRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Seamless Integration",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Connect your tools and workflows effortlessly. Our platform integrates with your existing systems.",
|
|
"minChars": 10,
|
|
"maxChars": 300
|
|
}
|
|
},
|
|
"phoneMediaRules": {
|
|
"phoneOne": {
|
|
"imageSrc": {
|
|
"required": true,
|
|
"example": "/phone1.jpg",
|
|
"note": "Either imageSrc or videoSrc required for phoneOne (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
|
|
},
|
|
"videoSrc": {
|
|
"required": true,
|
|
"example": "/phone1.mp4",
|
|
"note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)"
|
|
},
|
|
"imageAlt": {
|
|
"required": false,
|
|
"example": "First phone mockup",
|
|
"note": "Falls back to '[title] - Phone 1' if not provided"
|
|
},
|
|
"videoAriaLabel": {
|
|
"required": false,
|
|
"example": "First phone video",
|
|
"note": "Falls back to '[title] - Phone 1 video' if not provided"
|
|
}
|
|
},
|
|
"phoneTwo": {
|
|
"imageSrc": {
|
|
"required": true,
|
|
"example": "/phone2.jpg",
|
|
"note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
|
|
},
|
|
"videoSrc": {
|
|
"required": true,
|
|
"example": "/phone2.mp4",
|
|
"note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)"
|
|
},
|
|
"imageAlt": {
|
|
"required": false,
|
|
"example": "Second phone mockup",
|
|
"note": "Falls back to '[title] - Phone 2' if not provided"
|
|
},
|
|
"videoAriaLabel": {
|
|
"required": false,
|
|
"example": "Second phone video",
|
|
"note": "Falls back to '[title] - Phone 2 video' if not provided"
|
|
}
|
|
}
|
|
},
|
|
"itemRules": {
|
|
"minItems": 2,
|
|
"maxItems": 4,
|
|
"recommendedItems": "2-4",
|
|
"note": "Each feature takes 100vh height. Recommend 2-4 features to avoid excessive scroll."
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"features": "Array<{ title: string, description: string, buttons?: ButtonConfig[], phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>",
|
|
"showStepNumbers": "boolean (required - controls whether step number badges display)",
|
|
"title": "string",
|
|
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
|
"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'",
|
|
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
|
|
"textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
|
"useInvertedBackground": "boolean",
|
|
"ariaLabel?": "string (default: 'Feature section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"textBoxTitleClassName?": "string",
|
|
"titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
|
|
"titleImageClassName?": "string - For styling images in inline-image layout",
|
|
"textBoxDescriptionClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"textBoxTagClassName?": "string",
|
|
"textBoxButtonContainerClassName?": "string",
|
|
"textBoxButtonClassName?": "string",
|
|
"textBoxButtonTextClassName?": "string",
|
|
"desktopContainerClassName?": "string",
|
|
"mobileContainerClassName?": "string",
|
|
"desktopContentClassName?": "string",
|
|
"desktopWrapperClassName?": "string",
|
|
"mobileWrapperClassName?": "string",
|
|
"phoneFrameClassName?": "string",
|
|
"mobilePhoneFrameClassName?": "string",
|
|
"featureContentClassName?": "string",
|
|
"stepNumberClassName?": "string",
|
|
"featureTitleClassName?": "string",
|
|
"featureDescriptionClassName?": "string",
|
|
"cardButtonClassName?": "string",
|
|
"cardButtonTextClassName?": "string"
|
|
},
|
|
"usageExample": "<FeatureCardNine features={[{ title: 'Seamless Integration', description: 'Connect your tools and workflows effortlessly', phoneOne: { imageSrc: '/phone1.jpg' }, phoneTwo: { imageSrc: '/phone2.jpg' } }]} showStepNumbers={true} title=\"Powerful Features\" description=\"Everything you need to build amazing products\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
|
"do": [
|
|
"Use for feature showcases",
|
|
"Use for capability displays",
|
|
"Requires features[]",
|
|
"Requires titleSegments?[]",
|
|
"Requires buttons?[]"
|
|
],
|
|
"dont": [
|
|
"Do not use less than 2 items",
|
|
"Do not use more than 4 items"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|