82 lines
4.2 KiB
JSON
82 lines
4.2 KiB
JSON
{
|
|
"name": "HeroPersonalLinks",
|
|
"description": "Full-screen centered hero section with title, social link buttons, and link cards for personal/portfolio pages.",
|
|
"details": "Use for single-section personal brand websites (link-in-bio style). Features a centered title with optional title segments for inline images, social media link buttons, and link cards with icon/media content. Each link card has a title, description, and action button. Can optionally include a footer section.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Hi, I'm John Doe",
|
|
"minChars": 2,
|
|
"maxChars": 36
|
|
}
|
|
},
|
|
"socialLinkRules": {
|
|
"required": false,
|
|
"structure": {
|
|
"icon": "LucideIcon",
|
|
"label": "string - Display label",
|
|
"href": "string - Link destination"
|
|
},
|
|
"note": "Array of social media links displayed as pill buttons"
|
|
},
|
|
"linkCardRules": {
|
|
"required": true,
|
|
"minItems": 1,
|
|
"structure": {
|
|
"icon": "LucideIcon (optional if imageSrc/videoSrc provided)",
|
|
"imageSrc": "string - Image source (optional) Image is recommended if no videoSrc.",
|
|
"videoSrc": "string - Video source (optional)",
|
|
"imageAlt": "string - Alt text for image",
|
|
"videoAriaLabel": "string - Aria label for video",
|
|
"title": "string - Card title",
|
|
"description": "string - Card description",
|
|
"button": "ButtonConfig - Card action button"
|
|
},
|
|
"note": "Array of link cards with icon/media, title, description, and action button"
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
|
|
"title": "string",
|
|
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
|
"socialLinks?": "Array<{ icon: LucideIcon, label: string, href: string }> - Social media links",
|
|
"linkCards": "Array<{ icon?: LucideIcon, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, title: string, description: string, button: ButtonConfig }> (required)",
|
|
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"ariaLabel?": "string (default: 'Personal links section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"textboxClassName?": "string",
|
|
"titleClassName?": "string",
|
|
"titleImageWrapperClassName?": "string",
|
|
"titleImageClassName?": "string",
|
|
"socialLinksClassName?": "string",
|
|
"socialLinkClassName?": "string",
|
|
"linkCardsClassName?": "string",
|
|
"linkCardClassName?": "string",
|
|
"linkCardIconClassName?": "string",
|
|
"linkCardTitleClassName?": "string",
|
|
"linkCardDescriptionClassName?": "string",
|
|
"buttonClassName?": "string",
|
|
"buttonTextClassName?": "string"
|
|
},
|
|
"usageExample": "<HeroPersonalLinks background={{ variant: 'plain' }} title=\"Hi, I'm John Doe\" socialLinks={[{ icon: Twitter, label: 'Twitter', href: 'https://twitter.com' }, { icon: Linkedin, label: 'LinkedIn', href: 'https://linkedin.com' }]} linkCards={[{ icon: Briefcase, title: 'My Portfolio', description: 'Check out my latest work', button: { text: 'View', href: '/portfolio' } }, { imageSrc: '/project.jpg', title: 'Latest Project', description: 'A new design system', button: { text: 'Explore', href: '/project' } }]} />",
|
|
"do": [
|
|
"Use only for single-section personal brand websites (link-in-bio style)",
|
|
"Can optionally include a footer section",
|
|
"Include at least one link card",
|
|
"Use social links for social media presence"
|
|
],
|
|
"dont": [
|
|
"Never use with other sections",
|
|
"Never use for multi-page or multi-section websites",
|
|
"Do not use without link cards",
|
|
"Do not use for product or company landing pages"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|