{
  "name": "MediaAbout",
  "description": "Full-width media about section with centered TextBox content overlaid on image or video.",
  "constraints": {
    "textRules": {
      "title": {
        "required": true,
        "example": "Elevate Your Experience",
        "minChars": 2,
        "maxChars": 100
      },
      "description": {
        "required": true,
        "example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
        "minChars": 10,
        "maxChars": 300
      },
      "tag": {
        "required": false,
        "example": "About Us",
        "minChars": 2,
        "maxChars": 30
      }
    },
    "mediaRules": {
      "imageSrc": {
        "required": false,
        "example": "/about-hero.jpg",
        "note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals."
      },
      "videoSrc": {
        "required": false,
        "example": "/about-video.mp4",
        "note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content."
      },
      "imageAlt": {
        "required": false,
        "example": "Our team in action",
        "note": "Alt text for image. Defaults to empty string (decorative)."
      },
      "videoAriaLabel": {
        "required": false,
        "example": "About us video",
        "note": "ARIA label for video accessibility."
      }
    },
    "buttonRules": {
      "maxButtons": 2,
      "minButtons": 0,
      "note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
    }
  },
  "propsSchema": {
    "title": "string",
    "description": "string",
    "tag?": "string",
    "tagIcon?": "LucideIcon",
    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
    "imageSrc?": "string",
    "videoSrc?": "string",
    "imageAlt?": "string",
    "videoAriaLabel?": "string",
    "useInvertedBackground": "'noInvert' | 'invertDefault'",
    "ariaLabel?": "string (default: 'About section')",
    "className?": "string"
  },
  "usageExample": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={\"noInvert\"} />",
  "do": [
    "Use for landing pages",
    "Use for feature showcases",
    "Use for capability displays",
    "Use for about pages",
    "Use for company information",
    "Use for product catalogs",
    "Use for e-commerce",
    "Requires buttons?[]"
  ],
  "dont": [],
  "editRules": {
    "textOnly": true,
    "layoutLocked": true,
    "styleLocked": true
  }
}