{
  "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
  }
}